JavaScriptのiterableタイプ(Map,Set,Arrayの3種類)の遍歴方法for in;for of;forEachの使い方の違い

ループArrayは下付きループを採用することができ、ループMapとSetは下付きループを使用することができない.集合型を統一するために、ES 6規格は新しいiterable型を導入し、Array、MapおよびSetはいずれもiterable型に属する.iterable型を有する集合は、新しいfor ... ofサイクルによって巡回することができる.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
    console.log(x);
}
for (var x of s) { //   Set
    console.log(x);
}
for (var x of m) { //   Map
    console.log(x[0] + '=' + x[1]);
}

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

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    console.log(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) {
    console.log(x); // 'A', 'B', 'C'
}

これが、新しいfor ... ofサイクルを導入する理由です.
しかしながら、より良い方法は、iterableに組み込まれたforEachメソッドを直接使用し、反復するたびに自動的に関数をコールバックする関数を受信することである.Arrayを例にとります.

'use strict';
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element:         
    // index:       
    // array:   Array    
    console.log(element + ', index = ' + index);
});

 Run
A, index = 0 B, index = 1 C, index = 2
なお、forEach()の方法はES 5である.1標準で導入されたもので、ブラウザがサポートされているかどうかをテストする必要があります.SetはArrayと似ていますが、Setにはインデックスがありません.したがって、コールバック関数の最初の2つのパラメータは要素自体です.

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    console.log(element);
});

Mapのコールバック関数パラメータは、value、key、およびmapの順である.

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    console.log(value);
});

いくつかのパラメータに興味がない場合は、JavaScriptの関数呼び出しはパラメータが一致する必要がないため、無視できます.例えば、Arrayのelementを得るだけです.

var a = ['A', 'B', 'C'];
a.forEach(function (element) {
    console.log(element);
});

廖雪峰の公式サイトより抜粋