forEach、for … in 与 for … of

Array 在 Javascript 中是一个对象， Array 的索引是属性名。此处输出的索引值，即 “0″、 “1″、 “2″不是 Number 类型的，而是 String 类型的，因为其就是作为属性输出，而不是索引。

ES5 中，有三种 for 循环，分别是：for 、 for-in 、 forEach

在2015年6月份发布的ECMAScript6（简称 ES6）中，新增了一种循环，是：for-of

forEach

var arr = [1, 2, 3];
arr.forEach((data) => {
    console.log(data);
});
// 输出结果如下
// 1 , 2 , 3
复制代码

forEach 方法为数组中含有有效值的每一项执行一次 callback 函数，那些已删除（使用 delete 方法等）或者从未赋值的项将被跳过（不包括那些值为 undefined 或 null 的项）。 callback 函数会被依次传入三个参数：

• 数组当前项的值；
• 数组当前项的索引；
• 数组对象本身；

for-in

JavaScript原有的for...in循环，只能获得 对象的键名，不能直接获取键值。

var obj = { name:'张三' };
for (var i in obj){
    console.log(i)	// name
}
复制代码

for-of

ES6之前的 3 种 for 循环有什么缺陷：

• forEach 不能 break 和 return；
• for-in 缺点更加明显，它不仅遍历数组中的元素，还会遍历自定义的属性，甚至原型链上的属性都被访问到。而且，遍历数组元素的顺序可能是随机的。

ES6提供for...of循环，允许遍历获得键值。

var arr = ['a', 'b', 'c', 'd'];
for (let a in arr) {
  console.log(a); // 0 1 2 3
}

for (let a of arr) {
  console.log(a); // a b c d
}
复制代码

for...of循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性。

let arr = [3, 5, 7];
arr.foo = 'hello';

/**
    arr=[
        0: 3
        1: 5
        2: 7
        foo: "hello"
    ]	
*/
for (let i in arr) {
  console.log(i); // "0", "1", "2", "foo"
}

for (let i of arr) {
  console.log(i); //  "3", "5", "7"
}
复制代码