【十】iterable

巡回Arrayは下付きループを採用でき,巡回MapとSetは下付きループを使用できない.集合型を統一するために、ES 6規格は新しいiterable型を導入し、Array、Map、およびSetはiterable型に属する.iterableタイプのセットは新しいforで...ofループが遍歴する.for...ofループはES 6が導入した新しい構文で、ブラウザがサポートしているかどうかをテストします.

'use strict';
var a = [1, 2, 3];
for (var x of a) {
}
alert(' for ... of');

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);
}
for (var x of s ) { //  Set
    alert(x);
}
for (var x of m) { //  Map
    alert(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) {
    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'
}

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

var a = ['A', 'B', 'C']；
a.forEach(function (element, index, array) {
    // element:  
    // index:  
    // array:  Array 
    alert(element);
});

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

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

Mapのコールバック関数パラメータはvalue、key、mapの順になります.

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

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

var a = ['A', 'B', 'C'];
a.forEach(funciton (element) {
    alert(element);
});