JavaScriptとES 6知識点まとめ

JavaScriptのまとめ:
JavaScriptのまとめにはいくつかの点があります.配列の遍歴、作用域、閉包、thisの指向.
1.行列のエルゴード
1.1 forとfor/inを使用して、実際の配列要素値ではなく、配列の下にアクセスできます.

for(var i = 0; i < arr.length; ++i){
	console.log(arr[i]);
}

for(var i in arr){
	console.log(arr[i]);
}

1.2 for/ofを使用すると、配列の要素値に直接アクセスできます.

for(const v of arr){
	console.log(v);
}

1.3 forEach()を使うと、配列の下付き文字と要素値に同時にアクセスできます.

arr.forEach((v,i) => console.log(v));

2.スコープ

var a = 1;
function test(){
	var a = 2;
	console.log(a);  //2
}
test();

上の関数のスコープでは、aを宣言して割り当てられており、consolieの上にあるので、近くの原則に従って出力aは2に等しい.

var a = 1;
function test2(){
	console.log(a);  //undefined
	var a = 2;
}
test2();

上の関数のスコープでは、aを宣言して与えましたが、consoneの下にあります.a変数は引き上げられ、出力時に宣言されましたが、まだ値が与えられていないので、「undefined」を出力します.

var a = 1;
function test3(){
	console.log(a);  //1
	a = 2;
}
test3();

上の関数作用領域においてaは再割り当てされ、再宣言されず、consoneの下に位置しているので、グローバル作用領域のaが出力される.
3.クローズド

var elem = document.getElementsByTagName('div'); //      5 div
for(var i = 0; i < elem.length; i++){
	elem[i].onclick = function(){
		alert(i); //  5
	};
}

上の方はよくあるクローズド問題です.divをクリックして、いつも5つの値をポップアップします.イベントをクリックした時、iの値はすでに5になりました.以下の方法で解決できます.

var elem = document.getElementsByTagName('div'); //      5 div
for(var i = 0; i < elem.length;i++){
	(function (w) {
		elem[w].onclick  = function(){
			alert(w);  //   0，1，2，3，4
		};
	})(i);
}

結合クリックイベントの外部パッケージに、即座に関数を実行し、iをその関数に導入すればいいです.
4.this指向

var obj = {
	name: 'xiaoming',
	getName: function(){
		return this.name;
	}
};
console.log(obj.getName());  //'xiaoming'

上の対象法のthisは対象自体を指すので、「xiaoming」を出力します.

var obj = {
	myName: 'xiaoming',
	getName: function(){
		return this.myName;
	}
};
var nameFn = obj.getName;
console.log(nameFn()); //undefined

オブジェクト中のメソッドの値を上に変数を与えた場合、方法中のthisもobjオブジェクトに向けず、windowオブジェクトを指すので、consolieは「undefined」となります.

var obj = {
	myName: 'xiaoming',
	getName: function(){
		return this.myName;
	}
};
var obj2 = {
	myName: 'xiaohua'
};
var nameFn = obj.getName;
console.log(nameFn.apply(obj2));//'xiaohua'

上の方もobjオブジェクト中の方法を変数nameFnに値付けしていますが、appy方式によりthisをobj 2オブジェクトに向けていますので、最終的にはconsolieは'xiahua'です.
ES 6まとめ:
1.letとconstコマンド
letは変数を宣言するために使用します.letコマンドがあるコードブロックだけで有効です.

{
  let a =10;
  var b = 1;
}
a // ReferenceError: a is not
b // 1

let宣言の変数はそのコードブロックだけで有効であることを示します.
const命令の基本ルール:

読み取り専用定数

を宣言します.

一旦、値を付けなければならないと宣言したら、エラーが発生します.

constのスコープは声明のブロックレベルドメイン内でのみ有効である.

声明の定数は向上しません.一時的なデッドゾーンがあります.

constステートメントの定数は、letと同じように重複してはいけない声明

である.

const PI = 3.1415;
PI //3.1415

PI = 3;
//TypeError：Assignment to constant variable.

2.分配値
構文は、配列内の値またはオブジェクト内の属性を異なる変数として区別するためのJavaScript式です.
2.1、変数宣言と値付け時の構文

var foo = ["one","two","three"];
var [one,two,three] = foo;
console.log(one);//"one"
console.log(two);//"two"
console.log(three);//"three"       

2.2、変数が先に宣言した後に、値を賦課する時の解構
変数を分離する宣言により、変数に値を割り当てることができます.

var a,b;
[a,b] = [1,2];
console.log(a);//1
console.log(b);//2 
     

2.3、標準値
配列から値がundefinedのオブジェクトを取り出すことを防止するために、表式の左の配列に任意のオブジェクトのデフォルト値を設定することができます.

var a,b;
[a=5,b=7] = [1];
console.log(a);//1
console.log(b);//7  

2.4、交換変数
1つの解式では2つの変数の値を交換できます.解賦値がない場合、2つの変数を交換するには一時的な変数が必要です.

var a = 1;
var b = 3;
[a,b] = [b,a];
console.log(a);//3
console.log(b);//1 

2.5、関数から返された行列を解析します.
関数から行列を返すのはよく見られます.解は、処理の戻り値が配列の場合に便利になります.

function f(){
    return [1,2];
}

var a,b;
[a,b] = f();
console.log(a);//1
console.log(b);//2 

2.6、残りの配列を変数に割り当てます.
行列を構成するときは、残りのパターンを使用して、配列の残りの部分を変数に割り当てます.

var [a,...b] = [1,2,3];
console.log(a);//1
console.log(b);//[2,3]    

2.7、for循環分解

var arr = [[11,12],[21,22],[31,32]];
for(let [a,b] of arr){
	console.log(a);
	console.log(b);
}
//11
//12
//21
//22
//31
//32 

3.矢印関数
ES 6は矢印関数を追加しました.

	let func = value => value;

相当于:

	let func = function(value){
		return value;
	};

関数に複数のパラメータを入力する必要がある場合:

	let func = (value,num) => value * num;

関数のコードブロックが複数の語句を必要とする場合:

	let func = (value,num) =>{
		return value * num
	};

オブジェクトを直接返す必要がある場合:

let func = (value,num) =>({total:value*num});

変数との結合:

let func = ({value,num}) => ({total: value*num})

//  
var result = func({
	value: 10,
	num: 10
})
console.log(result);//{total:100}

4.配列
4.1、Aray.from(json)
json文字列を行列に変換するには、json文字列は長さの属性が必要です.

let json ={
	'0': 'niit',
	'1': 'computer',
	'2': 'mobile',
	length: 3
}
let arr1 = Array.from(json);
console.log(arr1);
function test(a,b){
	let arr = Array.from(arguments,value => value +2);
	console.log(arr);
}
test(1,2);    

4.2、Aray.of(変数)
変数を配列に変換します.エヴァを使って変換しないで、Aray()またはnew Aray()を代替してもいいです.

let arr2 =  Array.of(1,2,3,4);
console.log('arr2:',arr2);  

4.3、fill()
与えられた値を使って配列を充填すると、配列中の既存の要素が消去され、位置startから充填されます.end位置は含まれていません.

let arr4 = [1,2,3,4,5,6,7,8,9];
arr4.fill(1,2,5);
console.log(arr4); 

4.4、map()
元の配列はいくつありますか?map処理後もまだそんなに多くあります.文法:arr.map(fn,thisArg)

let arr = [12,35,56,79,56];;
let arr1 = arr.map(item => item%2 === 0 ?' ' : ' ');
let arr2 = arr.map((item,index) => index+':'+item);

console.log(arr);
console.log(arr1);
console.log(arr2);

4.5、reduce()
reduce()メソッドは、アキュムレータとして受信し、配列内の各値(左から右にかけて)はマージされ、最終的には値となります.文法:arr.reduce(fn,initial Value)

var arr = [1,2,3,4];
arr.reduce((previousValue,value,index,array) => {
    console.log(previousValue);
    console.log(value);
    console.log(index);
    return previousValue+value;//10
}) 

4.6、filter()
filter()メソッドは、入力された関数を使用して、すべての要素をテストし、テストされた要素から成るすべての新しい配列を返します.フィルタのように、条件に合わない要素文法をふるい落とします.arr.filter(fn,thisArg)

var arr = [1,2,3,4];
arr.filter((value,index,array) =>{
	return value >2
})   

4.7、forEach()
forEach()メソッド指定配列の各要素は、一度に入力された関数を実行します.戻り値はundefinedです.文法:arr.forEach(fn,thisArg)

let scores = [23,45,76,85,12,91];
scores.forEach((item,index) =>{
	console.log(` ${index}   `+` `+item);
})