ES5和ES6数组遍历方法详解

ES5和ES6数组遍历方法详解

在ES5中常用的10种数组遍历方法:

1、原始的for循环语句
2、Array.prototype.forEach数组对象内置方法
3、Array.prototype.map数组对象内置方法
4、Array.prototype.filter数组对象内置方法
5、Array.prototype.reduce数组对象内置方法
6、Array.prototype.some数组对象内置方法
7、Array.prototype.every数组对象内置方法
8、Array.prototype.indexOf数组对象内置方法
9、Array.prototype.lastIndexOf数组对象内置方法
10、for...in循环语句

ES6中新增加了一种：

1.for...of循环语句

ES5三种数组循环示例如下：

原始for循环语句

Example1

var a = [1,2,3];
for(var i=0;i<a.length;i++){
    console.log(a[i]);  //结果依次为1，2，3
}

代码解读：原始for循环的优点在于大家都比较熟悉，容易理解，劣势是写起来比较繁琐，需要定义额外更多的变量，所以一下是针对于原始for循环的改良的两种写法：
Example1：写法改良版

var a = [1,2,3];
for(var i=a.length;i--;){
    console.log(a[i]);  //结果依次为3，2，1
}

Example2：性能改良版

var a = [1,2,3];
for(var i = 0,len=a.length; i < len; i++) {
   console.log(a[i]);  //结果依次为1，2，3
}

注意:以上代码可以写成这样呢，如果懵逼了的话接着看原始for循环的解读,我们都知道for循环包含三个语句块——>for(语句1；语句2；语句3）{被执行的代码}，其中，语句1一般为变量定义语句（不仅可以只定义一个变量哦），在循环开始前执行，而且只执行一次；语句2定义循环的是否继续执行的条件，同样也是在循环开始前执行，语句1之后执行，每次重新开始循环都会再次执行；语句3则在循环结束之后执行，并且每次结束的时候都会再次执行，这里要注意的是如果被执行的代码中途return出来了那是不会再执行一次语句3的，所以以上代码解释如下：因为i--这个语句在每次循环开始前都会再次先用 i 是true和false来判断是否继续执行，这里同样要注意的是由于i--和--i的区别，这里由于是i--所以会先判断i的值再去做‘减减’的操作，所以这里最后如果打印 i 的值，会发现其实是-1。

数组内置方法Array.prototype.forEach

Example

var a = [1,2,3];
a.forEach(function(value,key,arr){
  console.log(value)    // 结果依次为1，2，3
  console.log(key)      // 结尾依次为0，1，2
  console.log(arr)      // 三次结果都为[1,2,3]，该参数貌似没什么用
})

代码解读：forEach方法最大的好处就是便于使用，而且不用定义额外的参数变量，但是从效率以及性能角度来说它是劣于原始for循环的，而且也不能强制return结束循环，原因如下：

**forEach循环**一看就是通过**回调函数**来提供参数的，而回调函数在JS中是**闭包**的一种，闭包的作用是用来生成**私有作用域**的，所以，每一个回调函数都是一个**独立的作用域**，都拥有自己独立的存储空间，互不影响，而且内部变量还不及时释放，这也就是为什么在能不用闭包的情况下就不要用闭包的原因，而在闭包中return的话，也只是在当前回调函数中返回了，可是forEach中的其他的回调函数（闭包）仍然存在，所以，导致return是没办法结束循环的。下面写一个forEach循环实现例子供大家参考理解：

Example

Array.prototype.forEachCopy = function(callback){
    var arr =  this;
    for(var i=0;i<arr.length;i++){
        callback(arr[i],i,this);
    }
}
var a = [1,2,3];
a.forEachCopy(function(value,key,arr){
    console.log(value)    // 结果依次为1，2，3
    console.log(key)      // 结尾依次为0，1，2
    console.log(arr)      // 三次结果都为[1,2,3]
})

数组内置方法Array.prototype.map

Example

var a = [1,2,3];
var b = a.map(function(value,key,arr){
    console.log(value)    // 结果依次为1，2，3
    console.log(key)      // 结尾依次为0，1，2
    console.log(arr)      // 三次结果都为[1,2,3]
    return value+1;
})
console.log(a); // 结果为[ 1, 2, 3 ]
console.log(b); // 结果为[ 2, 3, 4 ]

代码解读：map和forEach不同，在forEach中return语句是没有任何效果的，而map则可以改变当前循环的值，并且最终会返回一个新的被改变过值之后的数组（map如果不用return就和forEach一样了），由于这个特性，map一般用来处理需要修改某一个数组的值。map和forEach在其他的方面都是一样的，也不能return结束循环等特性，下面写一个map循环实现的例子供大家参考理解：
Example

Array.prototype.mapCopy = function(callback){
    var arr =  this;
    var arrCopy = [];
    for(var i=0;i<arr.length;i++){
        var cbValue = callback(arr[i],i,this);
        arrCopy.push(cbValue);
    }
    return arrCopy;
}
var a = [1,2,3];
var b = a.mapCopy(function(value,key,arr){
    console.log(value)    // 结果依次为1，2，3
    console.log(key)      // 结尾依次为0，1，2
    console.log(arr)      // 三次结果都为[1,2,3]
    return value+1;
})
console.log(a); // 结果为[ 1, 2, 3 ]
console.log(b); // 结果为[ 2, 3, 4 ]

数组内置方法Array.prototype.filter

Example

var a = [1,2,3];
var b = a.filter(function(value,key,arr){
    console.log(value)    // 结果依次为1，2，3
    console.log(key)      // 结尾依次为0，1，2
    console.log(arr)      // 三次结果都为[1,2,3]
    if(value === 3){
      return false;
    }
    return true;
})
console.log(a); // 结果为[ 1, 2, 3 ]
console.log(b); // 结果为[ 1,2 ]

代码解读：filter和map不同，map目的是为了改变值，而filter目的是为了去掉不要的值，在循环的时候如果返回的是false那么就表示本次循环的不添加该值，返回true则相反是表示要添加到新建的数组中，下面写一个filter循环实现例子供大家参考：
Example

Array.prototype.filterCopy = function(callback){
    var arr =  this;
    var arrCopy = [];
    for(var i=0;i<arr.length;i++){
        var cbValue = callback(arr[i],i,this);
        if(cbValue){
          arrCopy.push(arr[i]);
        }
    }
    return arrCopy;
}
var a = [1,2,3];
var b = a.filterCopy(function(value,key,arr){
    console.log(value)    // 结果依次为1，2，3
    console.log(key)      // 结尾依次为0，1，2
    console.log(arr)      // 三次结果都为[1,2,3]
    if(value === 3){
      return false;
    }
    return true;
})
console.log(a); // 结果为[ 1, 2, 3 ]
console.log(b); // 结果为[ 1,2 ]

数组内置方法Array.prototype.reduce

Example

var a = [1,2,3];
var b = a.reduce(function (count, value,key,arry) {
  console.log(count);   // 结果依次为0，1，3
  console.log(value);   // 结果依次为1，2，3
  console.log(key);     // 结果依次为0，1，2
  console.log(arry)     // 三次结果都为[1,2,3]
  return count + value;
},0);
console.log(a);         // 结果为[ 1, 2, 3 ]
console.log(b)          // 结果为6

代码解读：reduce的不同之处在于累加，和其他几个内置方法不同的地方，它的第二个参数不是this对象，而是初始累加值（如果不设置的话数组会乱掉），而且回调函数的的个数也不同，比其他的多了一个，而且还在在开始的多加了一个参数，第一个参数记录的是上一次循环的累加值，下面写一个reduce循环实现例子供大家参考：
Example

Array.prototype.reduceCopy = function(callback,countInit){
    var arr =  this;
    for(var i=0;i<arr.length;i++){
        var cbValue = callback(countInit,arr[i],i,this);
        countInit = cbValue;
    }
    return countInit;
}
var a = [1,2,3];
var b = a.reduceCopy(function (count, value,key,arry) {
  console.log(count);   // 结果依次为0，1，3
  console.log(value);   // 结果依次为1，2，3
  console.log(key);     // 结果依次为0，1，2
  console.log(arry)     // 三次结果都为[1,2,3]
  return count + value;
},0);
console.log(a);         // 结果为[ 1, 2, 3 ]
console.log(b)          // 结果为6

数组内置方法Array.prototype.some

Example

var a = [1,2,3];
var b = a.some(function(value,key,arry){
  console.log(value);   // 结果依次为1，2
  console.log(key);     // 结果依次为0，1
  console.log(arry);    // 两次次结果都为[1,2,3]
  return value===2;
})
console.log(a);         // 结果为[ 1, 2, 3 ]
console.log(b);         // 结果为true

代码解读：some的不同之处在它返回的布尔值，它的作用有点像filter，不过它的目的不是为了筛选返回数组，而是为了筛选该数组是否有满足你要的值，而且找到符合条件的值返回了一次true之后就不会再继续执行了，下面写一个some循环实现例子供大家参考：

Example

Array.prototype.someCopy = function(callback,countInit){
    var arr =  this;
    var isBool = false;
    for(var i=0;i<arr.length;i++){
        var cbValue = callback(arr[i],i,this);
        if(cbValue){
          isBool = true;
          return isBool
        }
    }
    return isBool;
}
var a = [1,2,3];
var b = a.someCopy(function(value,key,arry){
  console.log(value);   // 结果依次为1，2
  console.log(key);     // 结果依次为0，1
  console.log(arry);    // 两次次结果都为[1,2,3]
  return value===2;
})
console.log(a);         // 结果为[ 1, 2, 3 ]
console.log(b);         // 结果为true

数组内置方法Array.prototype.every

Example

var a = [1,2,3];
var b = a.every(function(value,key,arry){
  console.log(value);   // 结果依次为1，2
  console.log(key);     // 结果依次为0，1
  console.log(arry);    // 两次次结果都为[1,2,3]
  return value===2;
})
console.log(a);         // 结果为[ 1, 2, 3 ]
console.log(b);         // 结果为false

代码解读：其实从看例子可以看出来，some和every作用是一样的，只不过some当找到之后返回的是true，而every找到之后返回的是false而已,下面写一个every循环实现例子供大家参考：

Example

Array.prototype.everyCopy = function(callback){
    var arr =  this;
    var isBool = true;
    for(var i=0;i<arr.length;i++){
        var cbValue = callback(arr[i],i,this);
        if(cbValue){
          isBool = false;
          return isBool
        }
    }
    return isBool;
}
var a = [1,2,3];
var b = a.everyCopy(function(value,key,arry){
  console.log(value);   // 结果依次为1，2
  console.log(key);     // 结果依次为0，1
  console.log(arry);    // 两次次结果都为[1,2,3]
  return value===2;
})
console.log(a);         // 结果为[ 1, 2, 3 ]
console.log(b);         // 结果为false

数组内置方法Array.prototype.indexOf

Example

var a = [1,2,3];
var b = a.indexOf(2);
console.log(a);         // 结果为[ 1, 2, 3 ]
console.log(b);         // 结果为1

代码解读：对于indexOf方法来说，在数组循环过程中会和传入的参数比对，如果是比对成功，那么终止循环，返回对比成功的下标，下面写一个indexOf循环实现例子供大家参考：

Example

Array.prototype.indexOfCopy = function(value){
    var arr =  this;
    var index = -1;
    for(var i=0;i<arr.length;i++){
        if(arr[i] === value){
          index = i;
          return index
        }
    }
    return index;
}
var a = [1,2,3];
var b = a.indexOfCopy(2);
console.log(a);         // 结果为[ 1, 2, 3 ]
console.log(b);         // 结果为1

数组内置方法Array.prototype.lastIndexOf

Example

var a = [1,2,3,1];
var b = a.lastIndexOf(1);
console.log(a);         // 结果为[ 1, 2, 3, 1 ]
console.log(b);         // 结果为1

代码解读：lastIndexOf方法和indexOf作用一致，但查找方向不同，indexOf是正向查找，lastIndexOf是你像查找，找到之后返回成功的下标，下面写一个lastIndexOf循环实现例子供大家参考：

Example

Array.prototype.lastIndexOf = function(value){
    var arr =  this;
    var index = -1;
    for(var i=arr.length;i--;){
        if(arr[i] === value){
          index = i;
          return index
        }
    }
    return index;
}
var a = [1,2,3,1];
var b = a.lastIndexOf(1);
console.log(a);         // 结果为[ 1, 2, 3 , 1 ]
console.log(b);         // 结果为3

小结：对于以上8个数组的内置方法，forEach方法仅仅只是为了循环，并不可以帮你做额外的事情；map方法相当于在循环的时候你告诉数组当前遍历的这个值需要改成什么样，那么它就会最后给什么样的数组；filter方法相当于在循环的时候数组遍历一个个对象，并问你这个是不是你要找的值，如果你说是，他就会给你返回一个到新的数组中，不是他就会剔除；reduce方法相当于循环遍历对象做统计（累加或者累减之类的）;some和every方法相当于在遍历的时候拿着一个个对象问你这个是不是你找的，只要你说了一遍是，那么他就会给你分别返回的是true和false；indexOf和lastIndexOf方法相当于你告诉它你要找什么值，找到之后立马返回给你它的门牌号。

循环语句for...in

Example

var a = [1,2,3];
for(var key in a){
  console.log(key); //结果为依次为0，1，2
}
var b = {0:1,1:2,2:3};
for(var key in b){
  console.log(key); //结果为依次为0，1，2
}

代码解读：从结果得知,for...in遍历数组的时候是遍历数组的下标值，而在遍历对象的时候遍历的是key值，所以猜想，数组在JS中，本质上也是一个以键值对形式存在的对象，而为了证明这点，我们做如下一个例子的实验：

var a = [];
a['b'] = 2;
console.log(a);     //结果为[ b: 2 ]
console.log(a[0]);  //结果为undefined

我们发现数组的下标不在对应相应位置的值了，由此可以证明在JS中数组其实本质上就是一个以下标为key值的对象。
当然对于for...in循环语句本身而言，它是一个浅度遍历对象的循环语句，值遍历第一层节点（当然对象中设置不可枚举的属性的除外）。
Example

var a = {b:{c:2},d:{c:4}};
for(var key in a){
  console.log(key); //结果为依次为b,d
}

ES6循环for...of语句

Example

var a = [1,2,3];
for(var value of a){
  console.log(value)  // 结果依次为1，2，3
}

代码解读：for...of语句看着有点像for...in语句，但是和for...in语句不同的是它不可以循环对象，只能循环数组。