for,for…in,for…of,forEach()の違い

私たちはよく循環を使います.ES 6まで全部で4つの文法が循環に使われますが、それぞれの機能と使用シーンには大きな違いがあります.これから、この4つの文法について説明します.まずどれがありますか?

1: for(let i = 0; i < number; i ++){...}
2: for(let key in object){...}
3: for(let value of iterable){...}
4: forEach(){...}

次は一つずつ見ます.1:for()文法:

for(let i = 0; i < number, i ++){...};

forは一番簡単です.ここでは説明しすぎません.
2:for...in文法:

for(let key in object){...}

for...inは任意の順序でオブジェクトを巡る.Symboneタイプ以外のエニュメレート・属性.この簡単な言葉は多すぎる情報を伝達しています.次のような点があります.

1:         
2:            ，         
3:          
4:         ，   Symbol  

もう一つ注意したいのは、

5: for...in          ，         。

上記のいくつかの小さな点について、まず知識の延長をして、よりよく理解できるようにします.
無秩序巡回とは何ですか?
無秩序巡回は出力のデータ順序と入れたデータ順序が同じであることを保証できないので、同じかもしれません.また違っているかもしれません.
どのような属性が列挙できますか?まず、列挙可能な属性とは、内部の「エミュレーションマーク」がtrueに設定されている属性のことです.データの列挙性は以下の2つの法則に従う.

1:                ，  enumerable == true，     
2:   Object.defineProperty     ，  enumerable == false，     ;       ，     enumerable:true

for…inのコード例:

let obj = {name: 'nana', age: 20};
for(let key in obj){
    console.log(`${key}`); // name, age
}

for…inで対象属性を修正したらどうなりますか?MDNのページで明確に指摘していますが、私達はfor...inのループの中で属性を追加しないほうがいいです.削除して、修正して(Object.definePropertyを通じて)操作します.サイクルの中でこれらの操作を行っても一つの確定結果が得られないからです.
for...inをArayに使用しないでください.反復可能なオブジェクトでは、配列は以下のkeyと表記されたオブジェクトと見なすことができます.for…inは対象を遍歴するkeyに用いられます.for…inはアーチェリーを遍歴するために使えますか?このようにしないでください.あなたはこのようにしましたが、文法的には間違いがありません.でも、ちょっと重要です.下付きの秩序はArayにとって核心です.しかし、前にfor…inと言ったのは無秩序です.だから、forを取ってはいけません.inはアラを遍歴するのに使います.
3:for...offfor...ofは、属性ではなく、反復可能なオブジェクトの要素の値を巡回するために使用されます.反復可能なオブジェクトは何かを復習してもいいです.簡単に言えば、次のような種類があります.

1: ES6        ：Array，TypedArray，Map， Set，String
2: Array-like object：arguments， nodeList
3:             (              )

特に注意する点は:

4: weakSet weakMap        ，      for...of

for...ofはArayの例に使います.

let colors = ['red', 'green', 'yellow'];
for(let color of colors){
    console.log(color); // 'red' 'green' 'yellow'
}

for...ofは、反復可能なオブジェクトを作成するための例を示します.

function* numbers() {
    yield 1;
    yield 2;
    yield 3;
}
for(let color of numbers()){
   console.log(color); // 1 2 3
}

4:forEach()まずforEach()の説明を見てみます.The forEach()method executes a provided function for each array element.上の文について以下のように説明します.

1: forEach()    Array，            
2: forEach()    function    
3:   function                 

見てみる文法:

forEach(function (value, index, array) {}, thisArg);

value:現在ポーリングされている要素の値index:現在ポーリングされている要素の下付きarray:ポーリングされているarray自身this.arg:このコールバック関数の中のthis値はforEach()の方法についていくつかの注意が必要です.

let numbers = [1, 2, 3];
let newNumbers1 = numbers.forEach(function (value, index, numbers) {
    return value + 1;
});
console.log(newNumbers1); //undefined

let newNumbers2 = numbers.map(function (value, index, numbers) {
    return value + 1;
})
console.log(newNumbers2); //[2, 3, 4]

2:forEach()を巡回する範囲は、最初の要素を遍歴する前にすでに決定されているという意味です.一度最初の要素に対して、arrayがforEach()の中のコールバック関数を呼び出したら、その後に追加された新しい要素は、このホイールで巡回されないということです.配列は既に変化していますが.次の例を見てもいいです.

let numbers = [1, 2, 3];
numbers.forEach(function (value, index, numbers) {
    console.log(value); // 1, 2, 3
    numbers.push(4);
});
console.log(numbers);//[1, 2, 3, 4, 4, 4]

以上のコードは私達がforEach()に元素を追加しましたが、全部で1、2、3の3つの要素を遍歴しました.ポーリングの過程で、私達のnumbersはすでに変化が発生しました.ただし、ポーリングにおいてArayが修正されると、ある要素はポーリングされてスキップされるかもしれない.

let numbers = [1, 2, 3, 4];
numbers.forEach((value, index, numbers)=>{
   console.log(value);
   if(value === 2){
       numbers.shift(); //1 2 4
   }
});
console.log(numbers);// [2, 3, 4]

3:初期化されていない要素に対して、forEach()はcalback関数を呼び出しません.

let count = 0;
let numbers = [1, 2, , 3];
numbers.forEach(function (value, index, numbers) {
    console.log(value); //1 2 3
    count ++;
});
console.log(count); //3
console.log(numbers.length); //4

numbersには4つの要素がありますので、lenghtは4です.しかし、一つの要素は空です.countは3回しか入れていません.空の要素に対してcalbackは呼び出しられません.4:forEach()の中からポーリングができなくて、ポーリングが飛び出すことができるのは以下の通りです.

1: for  
2: for...in/for...of
3: Array.prototype.every()
4: Array.prototype.some()
5: Array.prototype.find()
6: Array.prototype.findIndex()

最後に以下のfor…in、for…of、forEach()の違いをまとめます.

1: for...in    ，     key，    Array
2: for...of       ，       value，（   Array，Map ）
3: forEach()  Array，