ES6新特性之迭代器与for-of循环

我们知道遍历数组的方式之一就是 使用for循环来遍历，如：

var arr = [1, 2, 3, 4, 5, 6];
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]); //1,2,3,4,5,6
}

但是这样感觉代码有点多，不简洁，因此ES5发布之后，可以使用数组的 forEach()迭代方法来遍历数组：

forEach()方法：为数组的第一项给定函数，对数组的第一项运行给定的函数，该函数没有返回值。相当于遍历数组。

var arr = [1, 2, 3, 4, 5, 6];

arr.forEach(function (value) {
    console.log(value); //1,2,3,4,5,6
});

这样代码更加就简洁，但有一个小小的缺陷：就是不能使用break、continue语句等来中断函数，也不能使用return语句返回到外层函数。

当然除了以上两种方法遍历数组外，还可以使用for-in枚举方法来遍历数组：

var arr = [1, 2, 3, 4, 5, 6];


for (var i in arr) {
    console.log(i); //0,1,2,3,4,5 索引
    console.log(arr[i]); //1,2,3,4,5,6 数组项的值
    console.log(typeof(i));  //string,string,string,string,string,string 字符串
}

但是这样做是一个很糟糕的选择，为什么呢？

• 在这段代码中，赋给i的不是实际的值，而是字符串"0","1","2"等（遍历到字符串类型的键--遍历普通对象的），表示的是数组项在数组中的位置索引，这很可能在无意之间进行字符串计算，如："2" + 1 = "21"等情况，所以会带来不必要的麻烦。
• for-in除了可以遍历数组外，我们还知道可以遍历自定义属性，也就是可以枚举 可枚举属性，那么在遍历数组时，它还额外执行一次，用于遍历可枚举属性了，这是我们不需要的操作。甚至还可以遍历到数组原型链上的属性，这更是一个大麻烦。
• for-in循环还有一个更大的缺点：那就是它会以随机次序遍历数组元素，这更是我们不想要的。也就是说它遍历出的元素的顺序不是数组中真正的顺序。
• for-in循环主要用于遍历普通对象的，用于遍历字符串类型的键，也就是对象的属性名（键名）。不适用于遍历数组。

以上所列举的方法可以都有缺点，那么用什么方法来遍历数组更好呢？

for-of循环

在ES6中，有一个新的特性for-of循环可以用来遍历数组：

var arr = [1, 2, 3, 4, 5, 6];

for (var i of arr) {
    console.log(i); //1,2,3,4,5,6
}

for-of循环的优点：

• 这是一种更简洁、更直接用于遍历数组的方法
• 这个方法避开了for-in循环的所有缺点。
• 与forEach()不同的是，for-of循环可以使用break、continue、return等语句来中断函数的运行。
• for-in循环主要用于对象属性的遍历。
• for-of循环用于遍历数据--如对数组元素的遍历

for -of对其它集合的遍历

for-of循环不仅用于数组，还可以用于数组对象等，如DOM中的nodeList等，可以用来遍历DOM中的子节点、根据给定条件返回的元素节点的集合等。

for-of循环还可以用于遍历字符串，如：

var str = "hello ES6";

for (var i of str) {
    console.log(i); //h e l l o  E S 6
}

同样，for-of循环还支持对Map和Set对象的遍历，这两个对象到后面会一一讲解。

未来JavaScript还有许多的新的集合类型出现，那么for-of循环就是用来遍历这些新的集合类型的。

for-of循环不支持对普通对象的遍历，如果想遍历普通对象，可以使用for-in循环，for-in循环主要是遍历对象的属性的（键/值）。

深入理解

for-of循环语句通过 方法调用 来遍历各种集合。  我们所讨论的数组、Map、Set对象以及其它对象有一个共同点：它们都有一个迭代器方法。

我们可以为任何类型的对象添加迭代器方法。

当我们向任意对象添加[Symbol.iterator]()方法后，就可以遍历这个对象了。

Symbol是ES6中的一个新特性，所有拥有[Symbol.iterator]()方法的对象被称为 可迭代的。

迭代器对象

for-of循环的机制

for-of循环首先会调用 [Symbol.iterator]()方法，并返回一个 迭代对象，迭代对象可以是任意有.next()方法的对象，for-of循环会重复调用next()方法，循环一次调用一次。

一个最简单的迭代器：

var ydq = {

    [Symbol.iterator]: function () {
        return this; //返回新的迭代器对象 ,就是返回ydq对象（this）。
    },
    
    next: function () {
        //返回给for-of循环的结果有两种可能。
        return {done: false, value: 0};
    }
};

每一次调用next()方法，它都会返回相同的结果，返回 给 for-of循环的结果 有两种可能：(a)没有完成迭代，(b)下一个值为0。

我们简单了解了一下for-of循环的机制，现在写一个简单的for-of循环，按下列方法调用重写被迭代的对象。

首先是for-of循环：

for (var i of obj) {
    //一些语句
}

接着，使用下列方法和部分临时变量实现一个与前面相似的例子：

//调用[Symbol.ietrator]()方法，并返回新迭代对象$ietrator
var $ietrator = obj[Symbol.ietrator]();
//接着新迭代对象调用next()方法并返回dome,value属性值
var $next = $ietrator.next();
//确定dome、value属性值
while (!$next.dome) {
    i = $next.value; //将value属性值赋值给i。
    //一些语句
    
    $next = $ietrator.next(); //并继续调用next()方法。
}

经过以上步骤就可以将集合中的数据一一遍历出来。

当没有完成迭代时（dome: false）才继续迭代下去，并返回value属性的值给i。