本文實(shí)例講述了ES6新特性之Iterator(遍歷器)和for-of循環(huán)。分享給大家供大家參考，具體如下：

1. 遍歷數(shù)組

for-of工作原理：迭代器有一個(gè)next方法，for循環(huán)會(huì)不斷調(diào)用這個(gè)iterator.next方法來獲取下一個(gè)值,直到返回值中的 done屬性為true的時(shí)候結(jié)束循環(huán)。

① 在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 內(nèi)建的forEach方法 缺陷：無法使用break 中斷 ，也不能使用return 語句返回到外層函數(shù)  console.log(value);});

結(jié)果都是：1,2,3,4,5,6

② 用 for-in ：作用于數(shù)組的 forfor -in 循環(huán)體除了遍歷數(shù)組元素外,還會(huì)遍歷自定義屬性。比如數(shù)組有一個(gè)可枚舉屬性arr.a,循環(huán)將額外執(zhí)行一次

for (var index in arr) { // 千萬別這樣做 console.log(arr[index]);}

結(jié)果：1,2,3,4,5,6，a

for-in 是為普通對(duì)象設(shè)計(jì)的，賦值給index的值不是實(shí)際的數(shù)字1、2，而是字符串‘1'，‘2'

var b = 0;for (var index in arr) { b = b+ index; console.log(b)}

結(jié)果：00，001，0012，00123，001234，0012345，0012345name

③ 使用 for-of：避開了for-in 的所有缺陷，可以正確響應(yīng) break、return 語句

for(var value of arr){  console.log(value)}

結(jié)果：1,2,3,4,5,6

2.for-of 循環(huán)便利其他集合

① 遍歷Set

var words = 'a';var s = new Set();s.add("a");s.add(1);for(var word of s){  console.log(word);}

結(jié)果：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);}

結(jié)果：a：1，b：2，c：3，d：4

3. Iterator（遍歷器）

① 遍歷器（Iterator）是一種接口規(guī)格，任何對(duì)象只要部署這個(gè)接口，就可以完成遍歷操作。它的作用有兩個(gè)，一是為各種數(shù)據(jù)結(jié)構(gòu)，提供一個(gè)統(tǒng)一的、簡(jiǎn)便的接口，二是使得對(duì)象的屬性能夠按某種次序排列。

② 遍歷器的原理：遍歷器提供了一個(gè)指針，指向當(dāng)前對(duì)象的某個(gè)屬性，使用next方法，就可以將指針移動(dòng)到下一個(gè)屬性。next方法返回一個(gè)包含value和done兩個(gè)屬性的對(duì)象。其中，value屬性是當(dāng)前遍歷位置的值，done屬性是一個(gè)布爾值，表示遍歷是否結(jié)束。

//模擬遍歷器原理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 }