JavaScript for…ofとfor…inの違い

for…inであれ、forであれ、ofステートメントは反復的なものです.それらの間の主な違いは、それらの反復方式にある.

for...in文は、元の挿入順序で反復オブジェクトのエニュメレーション属性を表します.

2.for...ofステートメントは、反復対象によって定義されるデータを巡回します.
以下の例は、Arayと一緒に使用する場合、for...ofサイクルとfor...inサイクルの違いを示しています.

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = 'hello';

//for in    

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs 0, 1, 2, "foo"
  }
}

// for of
for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

各オブジェクトは、Object.prototypeおよびAray.prototypeにこれらの属性を追加するので、Object.prototypeの各オブジェクトとしてアールCustom属性を継承します.プロトタイプチェーンの継承と結果として、オブジェクトiterableは、属性objCustomとarrCustomを継承します.
for in

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom" 
}

このループは、元の挿入順に、iterableオブジェクトのエニュメレート・属性のみを記録します.配列要素3,5,7またはハローは記録されていません.これらは列挙属性ではないからです.しかし,配列インデックスとarrCustomとObjCustomを記録した.これらの属性が反復される理由が分からないなら、array iteration and for...inにはもっと多くの解釈があります.

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs 0, 1, 2, "foo"
  }
}

このサイクルは最初と似ていますが、hasOwnProperty()を使ってチェックします.見つかったエニュメレーション属性は対象が自分のものです.はい、属性が記録されています.記録の属性は0、1、2、fooです.これは自分自身の属性です.プロパティarrCustomとobjCustomは、それらが継承されているので、記録されません.
for of

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7 
}

ループ反復は、反復可能なオブジェクトとして定義された反復値を記録し、これらは配列要素3,5,7であり、任意のオブジェクトの属性ではない.