深入浅出ES 6——ローズマリーの進化

JavaScriptが芽生え始めたばかりの時、私達は通常このような方式を使って配列を巡回します.

let arr1 = [1, 2, 3, 4];

for (let index = 0; index < arr1.length; index++) {
    const element = arr1[index];
    console.log(element); // 1 2 3 4
}

ES 5が正式に発表されてから、私達はforEach方法を使って配列を巡ることができます.

let arr2 = [1, 2, 3, 4];

arr2.forEach( item => {
    if (item === 3) return
    console.log(item); // 1 2 4
})

は明らかに、このコードはより簡潔に見えるが、私たちの予想通りに終了したわけではない.

は、特定の関数においてforEach() 。が存在しても、その関数の実行が終了しただけという意味の説明を文書で見ることができます.

では、是非for-i循環を試してみたいです.

let arr3 = [1, 2, 3, 4];

for (const index in arr3) {
    if (index === 3) break
    console.log(index);   // 0 1 2 3
    console.log(typeof index); // string
}

プログラムは再度私達の予想通りに運行していませんでした.

はこのコードの中でindexに値を与えた値は実際の数字ではなく、出力がstring'0''1''2''3'であることが分かります.その前に理解していなかったら、穴に落ちるかもしれません.この時に==を=に変えたらいいです.

for...inサイクルは、エニュメレート・属性のみを巡回します.ArayやObjectのように、内蔵構造関数を使って作成されたオブジェクトは、Object.prototypeとStering.prototypeのエニュメレーション属性を継承します.プロトタイプに属性がカスタマイズされていると、以下のようなエラーが発生します.

let arr3 = [1, 2, 3, 4];

Array.prototype.name = '        ';

for (const key in arr3) {

    //         
    // const element = arr3[key];
    // console.log(element); // 1 2 3 4 '       '

    //     
    if (arr3.hasOwnProperty(key)) {
        const element = arr3[key];
        console.log(element); // 1 2 3 4
    }
}

は、反復の順序が実行環境に依存するので、配列が巡回して必ずしも順番に要素にアクセスするとは限らないということがより恐ろしい.

は、つまり、for-innは通常のオブジェクトのために設計されており、文字列タイプのキーを遍歴することができますので、配列遍歴には適用されません.

より良い選択for-ofサイクル
ES 6には、現在の問題を解決するための新しい循環文法が追加されている.

for (variable of iterable) {
    //statements
}

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

これは最も簡潔で、最も直接的なエルゴード配列要素の文法

である.

この方法は、for-iサイクルのすべての欠陥を回避している

.

は、forEachと違って、break、continue、return文

に正しく応答することができます.

未来のJSは、いくつかの新しいタイプのクラスを使用してもよく、さらには、より多くのタイプが続々と誕生してもよく、for-ofは、これらのセットを通して特別に設計されたループステートメント

である.

for-ofサイクルは通常のオブジェクトをサポートしていませんが、オブジェクトの属性を繰り返したい場合は、for-i-nサイクル(これも自分の仕事です)またはビルドされたObject.keys()方法:

//               
for (var key of Object.keys(someObject)) {
    console.log(key + ": " + someObject[key]);
}

理解を深める
「形を模して、意匠を盗む」――パブロ・ペガソ
ES 6は常にこのような宗旨を信じています.新しく加入した特性は他の言語の中で強力な実用性を証明するに違いないです.例を挙げると、新しく追加されたfor-ofの循環像はC+、Java、C璣及びPythonの循環文を極めている.彼らと同じように、ここのfor-of循環サポート言語と標準ライブラリで提供されるいくつかの異なるデータ構造は、この言語の一つの拡張点でもある.