JavaScript里的循环方法之forEach，for...in，for...of

JavaScript诞生已经有20多年了，我们一直使用的用来循环一个数组的方法是这样的：

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

一、 forEach

自从JavaScript5起，我们开始可以使用内置的forEach 方法：，forEach方法中的function回调有三个参数：第一个参数是遍历的数组内容，第二个参数是对应的数组索引，第三个参数是数组本身。比如如下例子：

var arr = [1,2,3,4];
arr.forEach(function(value,index,array){
    array[index] == value;    //结果为true
    sum+=value;  
    });
console.log(sum);    //结果为 8

myArray.forEach(function (value) {
console.log(value);
});

但是以上，代码在IE中却无法正常工作。因为IE的Array 没有这个方法。

alert(Array.prototype.forEach);  

执行以上这句得到的是 “undefined”， 也就是说在IE 中 Array 没有forEach的方法。

如果想要在IE中使用这个方法，就需要给它手动添加这个原型方法。

if (!Array.prototype.forEach) {  
    Array.prototype.forEach = function(callback, thisArg) {  
        var T, k;  
        if (this == null) {  
            throw new TypeError(" this is null or not defined");  
        }  
        var O = Object(this);  
        var len = O.length >>> 0; // Hack to convert O.length to a UInt32  
        if ({}.toString.call(callback) != "[object Function]") {  
            throw new TypeError(callback + " is not a function");  
        }  
        if (thisArg) {  
            T = thisArg;  
        }  
        k = 0;  
        while (k < len) {  
            var kValue;  
            if (k in O) {  
                kValue = O[k];  
                callback.call(T, kValue, k, O);  
            }  
            k++;  
        }  
    };  
}  

相比于传统的写法，forEach写法简单了许多，但也有短处：你不能中断循环(使用语句或使用语句。可以使用如下两种方式：

1. if 语句控制
2. return . (return true, false)

以下例子是取出数组中2的倍数和3的倍数的数：

arryAll.forEach(function(e){  
    if(e%2==0)  
    {  
        arrySpecial.push(e);  
        return;  
    }  
    if(e%3==0)  
    {      
        arrySpecial.push(e);  
        return;  
    }  
}) 

二、for…in

for-in循环实际是为循环”enumerable“对象而设计的。

var obj = {a:1, b:2, c:3};
for (var prop in obj) {
console.log("obj." + prop + " = " + obj[prop]);
}
// 输出:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

你也可以用它来循环一个数组：

for (var index in myArray) { // 不推荐这样
console.log(myArray[index]);
}

不推荐用for-in来循环一个数组，因为，不像对象，数组的 index 跟普通的对象属性不一样，是重要的数值序列指标。同时要注意，for in循环不会按照属性的下标来排列输出。

"first":"first",
   "zoo":"zoo",
  "2":"2",
  "34":"34",
  "1":"1",
  "second":"second"
};
for (var i in obj) { console.log(i); };
输出：
1
2
34
first
zoo
second

执行时按chrome执行，先把当中的非负整数键提出来，排序好输出，然后将剩下的定义时的顺序输出。由于这个奇葩的设定，让avalon的ms-with对象排序不按预期输出了。只能强制用户不要以纯数字定义键名。

for in 可以遍历到对象的原型方法method,如果不想遍历原型方法和属性的话，可以在循环内部判断一下,hasOwnPropery方法可以判断某属性是否是该对象的实例属性

for (var key in myObject) {
　　if（myObject.hasOwnProperty(key)){
　　　　console.log(key);
　　}
} 

for– in 是用来循环带有字符串key的对象的方法。

三、for…of

JavaScript6里引入了一种新的循环方法，它就是for-of循环，它既比传统的for循环简洁，同时弥补了forEach和for-in循环的短板。首先看一下它的for-of的语法：

for (var value of myArray) {
console.log(value);
}

for-of的语法看起来跟for-in很相似，但它的功能却丰富的多，它能循环很多东西。

for-of循环使用例子：

let iterable = [10, 20, 30];
for (let value of iterable) {
console.log(value);
}
// 10
// 20
// 30

我们可以使用来替代，这样它就变成了在循环里的不可修改的静态变量。

let iterable = [10, 20, 30];
for (const value of iterable) {
console.log(value);
}
// 10
// 20
// 30

循环一个生成器(generators)：

function* fibonacci() { // a generator function
let [prev, curr] = [0, 1];
while (true) {
[prev, curr] = [curr, prev + curr];
yield curr;
}
}
for (let n of fibonacci()) {
console.log(n);
// truncate the sequence at 1000
if (n >= 1000) {
break;
}

四、一个例子展示出for…in 、for…of区别

for in是遍历键名，for of是遍历键值。例如：

let arr = ["a","b"];
for (a in arr) {
    console.log(a);//0,1
}

for (a of arr) {
    console.log(a);//a,b
}

由于for of的这个特性，他还可以实现对iterator对象的遍历，而for in就是简单的遍历了。