コスプレクリエーターfor…of.

for...ofステートメントは、反復可能なオブジェクト(Aray,Map,Set,String,TypedAray,argmentsオブジェクトなどを含む)上で反復ループを作成し、ユーザー定義の反復フックを呼び出し、各属性の値についてステートメントを実行します.文法は以下の通りです

for (variable of iterable) {
    //statements
}

例:

  Array
let iterable = [10, 20, 30];
for (let value of iterable) {
    value += 1;
    console.log(value);// 11 21 31
}
               ,      const  let。
let iterable = [10, 20, 30];
for (const value of iterable) {
  console.log(value); // 10 20 30
}
  String
let iterable = "boo";
for (let value of iterable) {
  console.log(value); // "b" "o" "o"
}
  TypedArray
let iterable = new Uint8Array([0x00, 0xff]);
for (let value of iterable) {
  console.log(value); // 0 255
}
  Map
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let entry of iterable) {
  console.log(entry); // ["a", 1] ["b", 2]  ["c", 3]
}
for (let [key, value] of iterable) {
  console.log(value); // 1 2 3
}
   Set（  Unity     ，    ）
let iterable = new Set([1, 2, 2, 3, 3, 1]);
for (let value of iterable) {
  console.log(value); // 1 2 3
}
   arguments   
(function() {
  for (let argument of arguments) {
    console.log(argument); // 1 2 3
  }
})(1, 2, 3);

反復DOMのセットは、NodeListオブジェクトのような反復DOM要素のセットである.以下の例は、各articラベル内のpラベルに「read」クラスを追加することを示す.

//  ：       NodeList.prototype[Symbol.iterator]      
let articleParagraphs = document.querySelectorAll("article > p");
for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}

ディレクタのfor...ofサイクルをオフにすると、break、continue[4]、throwまたはreturn[5]で終了できます.このような場合は、シーケンサはオフになります.

function* foo(){ 
  yield 1; 
  yield 2; 
  yield 3; 
}; 
for (let o of foo()) { 
  console.log(o); 
  break; // closes iterator, triggers return
}

反復ジェネレータはまた一つのジェネレータを反復できます.

function* fibonacci() { //        
    let [prev, curr] = [0, 1];
    for (;;) { // while (true) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
    }
}
for (let n of fibonacci()) {
     console.log(n); 
    //  n  1000     
    if (n >= 1000)
        break;
}

ジェネレータを再利用しないでください.for...ofサイクルの早期終了は、例えばbreakキーによって行われます.サイクルを終了した後、ジェネレータはオフになり、再度繰り返しを試みます.さらなる結果は発生しません.

var gen = (function *(){
    yield 1;
    yield 2;
    yield 3;
})();
for (let o of gen) {
    console.log(o);
    break;//     
} 
//        ，      ！
for (let o of gen) {
    console.log(o);
}

他の反復可能なオブジェクトも反復明示的に反復可能なプロトコルのオブジェクトを実装できます.

var iterable = {
  [Symbol.iterator]() {
    return {
      i: 0,
      next() {
        if (this.i < 3) {
          return { value: this.i++, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};
for (var value of iterable) {
  console.log(value); // 0 1 2 
}

for...ofとfor...inの違いはfor...inであれ、for...ofステートメントであれ、反復的なものです.それらの間の主な違いは、それらの反復方式にある.for...in文は、元の挿入順序で反復オブジェクトのエニュメレート・プロパティーを表します.for...ofステートメントは、反復可能なオブジェクトを巡回して、反復するデータを定義します.以下の例は、Arayと一緒に使用する場合、for...ofサイクルとfor...inサイクルの違いを示しています.

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

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

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 (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

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

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

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

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 (let i of iterable) {
  console.log(i); // logs 3, 5, 7 
}

ループ反復は、反復可能なオブジェクトとして定義された反復値を記録し、これらは配列要素3,5,7であり、任意のオブジェクトの属性ではない.
簡単に言えば、for inはキーの名前を遍歴し、for ofはキーの値を遍歴しています.たとえば:

let arr = ["a","b"];
for (let a in arr) {
console.log(a);//1,2
}
for (let a of arr) {
console.log(a);//a,b
}