ES 6新特性for…of(2018-05-22)

2755 ワード

for...ofは、データ構造を巡回するための方法です.トラバース可能なオブジェクトは、配列、オブジェクト、文字列、set、map構造など、iteratorインターフェースを有するデータ構造を含む.
伝統的なエルゴード方式とfor...of優欠
1、forサイクル
var arr = [1,2,3,4,5];
    for(let i = 0;i
2、forEach
var arr = [1,2,3,4,5];
arr.forEach(function (value,index) {
   //...
});
//  :          。
3、for…in
var arr = [1,2,3,4,5];
    for(let i in arr){
        //...
    } 
for...inサイクルは対象のサイクルによく使われています.配列のサイクルに使うなら、上記のコードの中で循環毎に得られるiは文字列タイプであり、予想される数字タイプではなく、演算を行うにはまずタイプ変換が必要で、不便をもたらします.
4、for…of
var arr = [1,2,3,4,5];
for(let value of arr){
    console.log(value);
}
//    :    :1 2 3 4 5
書き方はforサイクルよりずっと簡潔です.breakでループ全体を終了することができます.またはcontinteeで現在のサイクルから跳び出して、後のサイクルを続けます.keys()を結合してループインデックスを取得し、文字列タイプではなく数字タイプです.
サイクルは終了できます
var arr = [1,2,3,4,5];
    for(let value of arr){
        if(value == 3){
            //      
            break;
        }
        console.log(value);
    }
    //    :1 2
breakでループ全体を終了し、その後の遍歴が続きませんので、印刷結果は:1 2です.
現在のループをスキップできます.
var arr = [1,2,3,4,5];
    for(let value of arr){
        if(value == 3){
            //      ,       
            continue;
        }
        console.log(value);
    }
    //    :1 2 4  5
現在のループをcontinueでスキップして、後のサイクルを続けますので、印刷結果は1 2 4 5です.
数値タイプの索引を得る
var arr = [1,2,3,4,5];
    for(let index of arr.keys()){
        console.log(index);
    }
    //    :    :0 1 2 3 4
文字列を巡回
let word = "     ";
    for(let w of word){
        console.log(w);
    }
    //    :             
DOM Listを巡回
    

1

2

3

// 3 p let pList = document.getElementsByTagName('p'); for(let p of pList){ console.log(p); } // :

1

//

2

//

3

Json配列サイクル
var arr1 = [{a:1},{a:2},{a:3}];
for (var val of arr1.keys()) { 
    console.log(val,arr1[val].a)
}
// 0 1
// 1 2
// 2 3

var arr1 = [{a:1},{a:2},{a:3}];
for (var val of arr1) { 
    console.log(val)
}
// 1
// 2
// 3
for ofはオブジェクトを遍歴することができません.for...ofが正常に遍歴するためには、エルゴードIteratorを実現する必要があります.配列、文字列、セット、Map構造は、とっくにIteratorを内蔵しています.それらの原型の中にはSymbol.iterator方法があります.Objectオブジェクトはこのインターフェースを実現していません.for...of遍歴できません.たとえば:

Array.prototype[Symbol.iterator];
 
// ƒ values() { [native code] }
 
String.prototype[Symbol.iterator];
 
// ƒ [Symbol.iterator]() { [native code] }
 
Set.prototype[Symbol.iterator];
 
// ƒ values() { [native code] }
 
Map.prototype[Symbol.iterator];
 
// ƒ entries() { [native code] }
 
Object.prototype[Symbol.iterator];
 
// undefined