ES6：迭代器和for-of循环

es6之前的循环

传统的循环

var myArray = [0, 1, 2, 3];
for (var index = 0; index < myArray.length; index++) {
  console.log(myArray[index]);
}

打印结果：

0
1
2
3

ES5支持的forEach()

var myArray = [0, 1, 2, 3];
myArray.forEach(function (value) {
  console.log(value);
});

打印结果：

0
1
2
3

这段代码看起来更加简洁，但这种方法也有一个小缺陷：你不能使用break语句中断循环，也不能使用return语句返回到外层函数。

for-in循环

var myArray = [0, 1, 2, 3];
for (var index in myArray) { // 千万别这样做
  console.log(myArray[index]);
}

打印结果：

0
1
2
3

• 在这段代码中，赋给index的值是字符串“0”、“1”、“2”，而不是数字，稍不留意会导致字符串拼接而不是数字计算错误。

var myArray = [0, 1, 2, 3];
myArray.test = "test";
for (var index in myArray) { // 千万别这样做
  console.log(myArray[index]);
}

看上面这段代码，为myArray添加了一个属性test,执行结果如下：

0
1
2
3
test

• for-in循环会遍历自定义属性。就连数组原型链上的属性都能被访问到。
• 遍历的顺序不能保证。

强调一下：for-in是为普通对象设计的，你可以遍历普通对象的属性，键都是字符串，不适用于数组遍历。

ES6的for-of循环

        var myArray = [0, 1, 2, 3];
        for (var value of myArray) {
            console.log(value);
        }

打印结果：

0
1
2
3

for-of：

• 这是最简洁、最直接的遍历数组元素的语法
• 这个方法避开了for-in循环的所有缺陷
• 与forEach()不同的是，它可以正确响应break、continue和return语句

for-of循环可以遍历其它的集合

for-of循环可以遍历Map，Set，字符串等对象

for-of字符串遍历

它将字符串视为一系列的Unicode字符来进行遍历：

        var str = '测试代码';
        for (var chr of str) {
            console.log(chr);
        }

结果：

测
试
代
码

for-of Set遍历

        var mySet = new Set();
        mySet.add('test1');
        mySet.add('test2');

        for (var word of mySet) {
            console.log(word);
        }

结果：

test1
test2

for-of Map遍历

  test8(){

        var myMap = new Map();
        myMap.set('key1', 'value1');
        myMap.set('key2', 'value2');

        for (var [key, value] of myMap){
            console.log(key + ':'  + value);
        }

    }

结果：

key1:value1
key2:value2

解构（destructuring）

内建的Object.keys()

  test9(){
        var myObj = {
          key1: 'value1',
          key2: 'value2'
        };

        for (var key of Object.keys(myObj)){
            console.log(key);
        }

    }

结果：

key1
key2

迭代器

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

只要实现了迭代器的对象都可以使用for-of进行迭代，任何对象都可以实现自己的迭代器。

TODO 迭代器

参考

ES6 In Depth: Iterators and the for-of loop