深入浅出ES6——迭代器的演变

在JavaScript刚刚开始萌生的时候，我们通常使用这种方式遍历数组

let arr1 = [1, 2, 3, 4];

for (let index = 0; index < arr1.length; index++) {
    const element = arr1[index];
    console.log(element); // 1 2 3 4
}

自从ES5 正式发布之后，我们可以使用 forEach 方法来遍历数组.

let arr2 = [1, 2, 3, 4];

arr2.forEach( item => {
    if (item === 3) return
    console.log(item); // 1 2 4
})

显然的，这段代码看起来更加简洁，但是并没有按照我们预期的进行终结遍历。
在文档中我们可以看到描述 forEach() 方法对数组的每个元素执行一次提供的函数。 意思就是即使你在某个函数中return了也只是终结了当次函数的执行。

那么，你一定想尝试一下 for-in 循环

let arr3 = [1, 2, 3, 4];

for (const index in arr3) {
    if (index === 3) break
    console.log(index);   // 0 1 2 3
    console.log(typeof index); // string
}

程序再次没有按照我们预期的运行:

在这段代码中，赋值给index的值并不是实际的数字，可以看到输出的是string '0' '1' '2' '3', 因此如果在这之前你并没深入理解，可能会掉进坑里，此时我们可以把 === 改成 == 即可
for...in 循环只遍历可枚举属性。像Array和Object使用内置构造函数所创建的对象都会继承自Object.prototype 和 String.prototype的不可枚举属性, 如果在原型上自定义了属性，那么稍微不注意将会导致如下错误:

let arr3 = [1, 2, 3, 4];

Array.prototype.name = '看看我被遍历了没';

for (const key in arr3) {

    // 将额外的遍历属性
    // const element = arr3[key];
    // console.log(element); // 1 2 3 4 '看看我被遍历没'

    // 正确做法
    if (arr3.hasOwnProperty(key)) {
        const element = arr3[key];
        console.log(element); // 1 2 3 4
    }
}

更加可怕的是，由于迭代的顺序是依赖于执行环境的，所以数组遍历不一定按次序访问元素。
简而言之, for-in 是为普通对象设计的，你可以遍历得到字符串类型的键，因此不适用于数组遍历。

更好的选择 for-of 循环

在ES6中增加了一种新的循环语法来解决目前的问题:

for (variable of iterable) {
    //statements
}

for...of 可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

这是最简洁、最直接的遍历数组元素的语法
这个方法避开了 for-in 循环的所有缺陷
与forEach不同的是，它可以正确响应 break、continue 和 return 语句
未来的 JS 可以使用一些新型的集合类，甚至会有更多的类型
陆续诞生，而 for-of 就是为遍历所有这些集合特别设计的循环语句
for-of 循环不支持普通对象，但如果你想迭代一个对象的属性，你可以用 for-in 循环（这也是它的本职工作）或内建的 Object.keys()方法：

// 向控制台输出对象的可枚举属性
for (var key of Object.keys(someObject)) {
    console.log(key + ": " + someObject[key]);
}

深入理解

“能工摹形，巧匠窃意.” -- 巴勃罗·毕加索

ES6始终坚信这样的宗旨: 凡是新加入的特性，势必已在其他语言中得到强有力的实用性证明。
举个例子，新加入的for-of 循环像极了C++、Java、C#以及Python中的循环语句。与他们一样，这里的 for-of 循环支持语言和标准库中提供的几种不同的数据结构，它同样也是这门语言中的一个扩展点。