ES 6新特性for…of(2018-05-22)
2755 ワード
for...ofは、データ構造を巡回するための方法です.トラバース可能なオブジェクトは、配列、オブジェクト、文字列、set、map構造など、iteratorインターフェースを有するデータ構造を含む.
伝統的なエルゴード方式とfor...of優欠
1、forサイクル
4、for…of
サイクルは終了できます
現在のループをスキップできます.
数値タイプの索引を得る
伝統的なエルゴード方式とfor...of優欠
1、forサイクル
var arr = [1,2,3,4,5];
for(let i = 0;i
2、forEachvar arr = [1,2,3,4,5];
arr.forEach(function (value,index) {
//...
});
// : 。
3、for…invar 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