何のために...の?
for...of は ES6 の新しいトラバーサル メソッドで、イテレータ インターフェイスを含むデータ構造 (配列、オブジェクトなど) をトラバースし、各項目の値を返すことができます。
ES3のfor...ofとfor...inの違い
-
for...of はトラバースしてオブジェクトのキー値を取得し、for...in はオブジェクトのキー名を取得します。
-
for... in はオブジェクトのプロトタイプ チェーン全体をトラバースしますが、パフォーマンスが非常に悪く、使用することはお勧めしません。一方、for... of は現在のオブジェクトのみをトラバースし、プロトタイプ チェーンをトラバースしません。
-
配列トラバーサルの場合、for...in は配列内のすべての列挙可能なプロパティ (プロトタイプ チェーンの列挙可能なプロパティを含む) を返し、for...of は配列の添え字に対応するプロパティ値のみを返します。
概要: for...in ループは、主にオブジェクトのトラバース用であり、配列のトラバース用ではありません; for...of ループは、配列、配列のようなオブジェクト、文字列、セット、マップ、およびジェネレータ オブジェクトのトラバースに使用できます。
for...of の使い方は？
for...of は ES6 の新しいトラバーサル メソッドで、イテレータ インターフェイスを含むデータ構造 (配列、オブジェクト、文字列など) のトラバーサルを可能にし、各項目の値を返します。はエラーを報告します。
1. トラバースするオブジェクトが配列のようなオブジェクトの場合は、Array.from を使用して配列に変換します。
var obj = {
0:'one',
1:'two',
length: 2
};
obj = Array.from(obj);
for(var k of obj){
console.log(k)
}-
配列のようなオブジェクトでない場合は、オブジェクトに [Symbol.iterator] 属性を追加して、反復子を指すだけです。
var obj = {
a:1,
b:2,
c:3
};
obj[Symbol.iterator] = function(){
var keys = Object.keys(this);
var count = 0;
return {
next(){
if(count<keys.length){
return {value: obj[keys[count++]],done:false};
}else{
return {value:undefined,done:true};
}
}
}
};
for(var k of obj){
console.log(k);
}チップ：
-
for...of は iterrable の値をトラバースするために使用され、for...in はオブジェクトのキーをトラバースするために使用されます。
-
for...of はオブジェクトのトラバースには使用できません。for...in は反復可能な配列と文字列のトラバースに使用できますが、反復可能なオブジェクトのトラバースには使用しないでください。