本文實例講述了ES6新特性之Iterator(遍歷器)和for-of循環。分享給大家供大家參考，具體如下：
1. 遍歷數組
for-of工作原理：迭代器有一個next方法，for循環會不斷調用這個iterator.next方法來獲取下一個值,直到返回值中的 done屬性為true的時候結束循環。
① 在ES6之前
var arr = [1,2,3,4,5,6];
arr.name = 'a';
for (var index = 0; index < arr.length; index++) {
console.log(arr[index]);
}
arr.forEach(function (value) { //ES5 內建的forEach方法 缺陷：無法使用break 中斷 ，也不能使用return 語句返回到外層函數
console.log(value);
});
結果都是：1,2,3,4,5,6
② 用 for-in ：作用于數組的 forfor -in 循環體除了遍歷數組元素外,還會遍歷自定義屬性。比如數組有一個可枚舉屬性arr.a,循環將額外執行一次
for (var index in arr) { // 千萬別這樣做
console.log(arr[index]);
}
結果：1,2,3,4,5,6，a
for-in 是為普通對象設計的，賦值給index的值不是實際的數字1、2，而是字符串‘1'，‘2'
var b = 0;
for (var index in arr) {
b = b+ index;
console.log(b)
}
結果：00，001，0012，00123，001234，0012345，0012345name
③ 使用 for-of：避開了for-in 的所有缺陷，可以正確響應 break、return 語句
for(var value of arr){
console.log(value)
}
結果：1,2,3,4,5,6
2.for-of 循環便利其他集合
① 遍歷Set
var words = 'a';
var s = new Set();
s.add("a");
s.add(1);
for(var word of s){
console.log(word);
}
結果：a，1
② 遍歷Map
var map = new Map();
map.set('a',1);
map.set('b',2);
map.set('c',3);
map.set('d',4);
for(var [key,value] of map){
console.log(key+':'+value);
}
結果：a：1，b：2，c：3，d：4
3. Iterator（遍歷器）
① 遍歷器（Iterator）是一種接口規格，任何對象只要部署這個接口，就可以完成遍歷操作。它的作用有兩個，一是為各種數據結構，提供一個統一的、簡便的接口，二是使得對象的屬性能夠按某種次序排列。
② 遍歷器的原理：遍歷器提供了一個指針，指向當前對象的某個屬性，使用next方法，就可以將指針移動到下一個屬性。next方法返回一個包含value和done兩個屬性的對象。其中，value屬性是當前遍歷位置的值，done屬性是一個布爾值，表示遍歷是否結束。
//模擬遍歷器原理
function makeIterator(array){
var nextIndex = 0;
return {
next: function(){
return nextIndex < array.length ?
{value: array[nextIndex++], done: false} :
{value: undefined, done: true};
}
}
}
var it = makeIterator(['a', 'b']);
console.log(it.next());//{ value: 'a', done: false }
console.log(it.next());//{ value: 'b', done: false }
console.log(it.next());//{ value: undefined, done: true }
③ Iterator接口返回的遍歷器，原生具備next方法。
> 有三類數據結構原生具備Iterator接口：數組、類似數組的對象、Set和Map結構。
var map = new Map(); console.log(map[Symbol.iterator] === map.entries)//true var arr = new Array(); console.log(arr[Symbol.iterator] === arr.values)//true var set = new Set(); console.log(set[Symbol.iterator] === set.values)//true
> 其他數據結構（主要是對象）如果需要Iterator接口,都需要自己部署。
var students = {}
students[Symbol.iterator] = function() {
let index = 1;
return {
next() {
return {done: index>10, value: index++}
}
}
}
for(var i of students) {
console.log(i);
}//
希望本文所述對大家ECMAScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
