for…in、for…ofとforEachの違い

27270 ワード
javascript 先端
for…in、for…ofとforEachの違い
  • 、エルゴードオブジェクト
  • 、エルゴード配列
  • 、エルゴード配列またはオブジェクトは、プロトタイプ属性またはカスタム属性
    • を含む.
  • 、マルチタイムは、ループを中断することができますか?
  • 、for…of特有
  • 、その他のエルゴード方式
  • オブジェクトは
    • を巡回しました.
  • 配列は
    • を巡回しています.
    for...inはキーの名前を遍歴して、for...ofはキーの値を遍歴して、forEachはキーの名前と値を遍歴します.
    オブジェクトを巡回
    var testArr={
   code:'ac32',
    name:'joe',
    age:12
};
for(let i in testArr){
    console.log(i);    
}
    結果:
    code
name
age
    for...inだけがオブジェクトを直接遍歴することができます.for...ofとforEachはサポートされていません.それぞれUncaught TypeError: testArr is not iterableとUncaught TypeError: testArr.forEach is not a functionをエラーとして報告します.
    for...ofを使って普通のオブジェクトの属性を遍歴したいなら、Object.keys()と組み合わせることで、まず対象のkeyの配列をすべて取得することができます.
    var testArr={
        code:'ac32',
        name:'joe',
        age:12
    };
    for(let j of Object.keys(testArr)){
        console.log(j);
    }
    結果:
    code
name
age
    二、遍歴行列
    var testArr=['a','b','c'];
	console.log('for...in');
    for(let i in testArr){
        console.log(i);    
    }
	console.log('for...of');
	 for(let j of testArr){
        console.log(j);    
    }
	console.log('forEach');
	testArr.forEach(function(item,index){
		console.log(item);
		console.log(index);
	});
    結果:
    for...in
0
1
2
for...of
a
b
c
forEach
a
0
b
1
c
2
    注:for…inはインデックス、for...of出力値、forEachはインデックスと値を出力します.
    三、遍歴された配列またはオブジェクトは、プロトタイプまたはカスタム属性を含みます.
    var testArr=['a','b','c'];
    testArr.code='123abc';
    testArr.length=5;
	Array.prototype.name = function() {};
	console.log('for...in');
    for(let i in testArr){
        console.log(i);    
    }
	console.log('for...in  ');
	//   hasOwnProperty      ，            
	for(let k in testArr){
		if (testArr.hasOwnProperty(k)) {
			console.log(k);
		}
	}
	console.log('for...of');
	 for(let j of testArr){
        console.log(j);    
    }
	console.log('forEach');
	testArr.forEach(function(item,index){
		console.log(item);
		console.log(index);
	});
    結果:
    for...in
0
1
2
code
name
for...in  
0
1
2
code
for...of
a
b
c
undefined
undefined
forEach
a
0
b
1
c
2
    注:for…inは全部出力しますが、Arayのlength属性は含まれていません.for…ofとforEachは影響しません.
    四、遍歴はサイクルを中断することができますか?
    var testArr=['a','b','c'];
	console.log('for...in');
    for(let i in testArr){
        console.log(i);    
		if(i===1){
			break;
		}
    }
	console.log('for...of');
	 for(let j of testArr){
        console.log(j); 
		 if(j==='b'){
			break;
		}
    }
	console.log('forEach');
	testArr.forEach(function(item,index){
		console.log(item);
		console.log(index);
		if(item==='b'){
			return false;
		}
	});
    結果:
    for...in
0
1
2
for...of
a
c
forEach
a
0
b
1
c
2
    注:for…ofはbreakで中断できます.for…inとforEachは中断できません.
    五、for…of特有
  • 反復文字列
  • 反復アーグメンントクラス
  • 反復型DOMのセットは、[].slice.call()を必要とせず、Array.from()を必要としないで、配列変換
    • を行う.
  • 反復型配列
  • 反復Map
  • 反復Set 
    • console.log('     ');
var testArr='Joe';
 for(let j of testArr){
       console.log(j); 
   }
console.log('      ');
let typeArr = new Uint8Array([0x00, 0xff]);
for (let value of typeArr) {
  console.log(value);
}
console.log('  Map');
let mapData = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (let [key, value] of mapData) {
  console.log(value);
}
console.log('  Set');
let setData = new Set([1, 1, 2, 2, 3, 3]);
for (let value of setData) {
  console.log(value);
}
    結果:
         
J
o
e
      
0
255
  Map
1
2
3
  Set
1
2
3
    六、その他のエルゴード方式
    オブジェクトを巡回
  • Obeject.keys(obj)は、継承属性およびSymbol属性
    • を含まないオブジェクト自身のエニュメレート・属性の全てを含む配列を返すことができる.
  • Object.getOwnPropertyNames(obj)は、オブジェクト自体のすべての属性を含む配列を返し、Symbol属性を含まず、エニュメレート・属性
    • を含む.
  • Object.getOwnPropertySymbols(obj)は、オブジェクト自体のすべてのSymbol属性
    • を含む配列を返します.
  • Reflect.ownKeys(obj)は、オブジェクト自体の属性を含む配列を返し、属性名がSymbolまたは文字列であっても、エニュメレート・
    • を含んでいる.
    var mySymbol = Symbol();
let myObj = {
    name:'seven',
    age:18,
    [mySymbol]:'Hello!'//Symbol  
}
Object.prototype.hobby = 'music';
myObj.sex='female'
console.log('Obeject.keys(obj)');
console.log(Object.keys(myObj));
console.log('Object.getOwnPropertyNames(obj)');
console.log(Object.getOwnPropertyNames(myObj));
console.log('Object.getOwnPropertySymbols(myObj)');
console.log(Object.getOwnPropertySymbols(myObj));
console.log('Reflect.ownKeys(myObj)');
console.log(Reflect.ownKeys(myObj));
    結果:
    Obeject.keys(obj)
 ["name", "age", "sex"]
 Object.getOwnPropertyNames(obj)
 ["name", "age", "sex"]
 Object.getOwnPropertySymbols(myObj)
 [Symbol()]
 Reflect.ownKeys(myObj)
 ["name", "age", "sex", Symbol()]
    配列巡回
  • Array.every()：は、配列のすべての要素が、指定された関数のテスト
    • に合格したかどうかをテストします.
  • Array.some()：は、配列中の要素が指定条件を満たしているかどうかを検出する(要素が条件を満たすと、表現はtrueに戻り、残りの要素は再検出されない.条件を満たす要素がないとfalseに戻る.)
    • .
  • Array.filter()：は、指定された配列内の条件に合致するすべての要素をチェックすることによって、新しい配列を作成します.
  • Array.map()：は、元の配列の各要素によって指定された方法を呼び出した後の戻り値からなる新しい配列
    • を返します.
  • Array.reduce()：は、1つの関数をアキュムレータとして受信し、配列内の各値(左から右へ)は縮小され、最終的には値注として計算される.元の配列
    • は変更されない.
    Threejsの.objモデル投影