javascript中遍历数组有哪几种方式？

Question

面试被问到，那时候完全不知道...现在学会了几种
先抛个砖

var arr = [1,2,2,3,4,5,6];
for(var i = 0; i<arr.length;i++){
  console.log(arr[i]);
}

还有没有其他方式呢，最好利弊也介绍下

Answer 1

可以使用map方法，在codewars上很多人使用这个方法遍历数组，但是在w3cschool上查询手册时没有查到

var arr = [1,2,2,3,4,5,6];
arr.map(function(n){ console.log(n); });

现在知道map方法是怎么回事了，从javascript 6开始，javascript引入了map方法，目前仅有chrome和firefox支持，其他浏览器可以使用以下扩展来实现：

Array.prototype.map = function(fn) {
    var a = [];
    for ( var i = 0; i < this.length; i++) {
        var value = fn(this[i], i);
        if (value == null) {
            continue;
        }
        a.push(value);
    }
    return a;
};

Answer 2

我知道的几种

• for(var i=0;arr[i];i++){console.log(arr[i])}及其他for相关变形
• i=arr.length;while(i--){console.log(arr[i])}及其他while相关变形
• arr.forEach(function(v,k){console.log(v)})
• for(var i in arr){console.log(arr[i])}
• 稍微偏一点的map/filter/reduce等系列：
  
  
  • arr.map(function(v){console.log(v);return v})
  • arr.filter(function(v){console.log(v);return true})
  • arr.reduce(function(a,b){console.log(b);a.push(b);return a},[])

for和while系列都差不多，简单有效。forEach在数据量大的时候会有效率问题，for(var i in arr)也是一样。偏一点的只是附带遍历效果，但是主要功能不是这个，所以肯定没有直接for效率高。

刚才在下面和 @StephenLee 讨论length问题的时候发现一个有趣的网站，可以拿来比较while和for的效率问题：http://jsperf.com/caching-array-length/4

Answer 3

没人写迭代么？

  var arr = [1,2,2,3,4,5,6];

    var i = 0;
    function echo(){
        if(i < arr.length -1)
        {
            console.log(arr[i]);
            i++;
            echo();
        }
    }

    echo();

Answer 4

因为数组也是一种对象，所以还可以使用 for in 来遍历数组：

var arr = [1,2,2,3,4,5,6];
for(var i in arr)  console.log(arr[i]);

但是由于该方法遍历原型链上所有可枚举的属性，因此在执行时，会过一遍所有原型链上的属性以判断它的枚举值，所以效率表现不佳。
使用普通的 for 循环是最佳的遍历数组方法，但是最好能缓存数组长度，这样可以避免每次遍历时计算数组长度的开销。

var arr = [1,2,2,3,4,5,6];
for(var i = 0, l = arr.length; i < l; i ++)  console.log(arr[i]);