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); };输出：1234firstzoosecond

执行时按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 functionlet [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 1000if (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就是简单的遍历了。