JSのfor...inとfor...ofの使い方

前にプログラミング方法学を見て、forサイクルの基本的なフォーマットは

for(init;test;step ){
    statement
}
//  
for(int i=0,i<10;i++){
    ...
}

その後pythonに触れると、forループのフォーマットはもっと簡単で優雅で、for......in文だけでオブジェクトを直接遍歴することができます.

for i in arry

今日廖雪峰の公式サイトを見て、意外にもjsの中で更に不思議な操作を見て、for......of循環、これはpythonのforに似ています......in循環、jsの中にもfor......in循環がありますが、遍歴したのはオブジェクトの属性で、キー値の対の中のキーキーキーキーに似ていて、それがarrayを遍歴した時遍歴したのはarrayのインデックスで、

var a = ['A', 'B', 'C'];
for (var i in a) {
    alert(i); // '0', '1', '2'
    alert(a[i]); // 'A', 'B', 'C'
}

for...ofループはES 6が導入した新しい構文で、for...ofループで集合を巡り、次のように使用されます.

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { //   Array
    alert(x);//'A', 'B', 'C'
}
for (var x of s) { //   Set
    alert(x);//'A', 'B', 'C'
}
for (var x of m) { //   Map
    alert(x[0] + '=' + x[1]);//1='x',2='y',3='z'
}

for...inループは、履歴に残された問題のため、実際にはオブジェクトの属性名を巡回します.Array配列は、実際にはオブジェクトでもあり、各要素のインデックスは属性とみなされます.Arrayオブジェクトに追加のプロパティを手動で追加すると、for...inループは予期せぬ予期せぬ効果をもたらします.

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    alert(x); // '0', '1', '2', 'name'
}

for...inループはnameを含めますが、Arrayのlength属性は含まれません.
for...ofループは、これらの問題を完全に修正し、集合自体の要素のみをループします.

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
    alert(x); // 'A', 'B', 'C'
}