JS数组的遍历方法汇总及区别

总的遍历方法：
1、经典遍历方法：for语句、forEach语句、for-in语句、for-of语句
2、其它循环方法：map(映射)方法、filter(过滤)方法、every方法、some方法、reduce方法(reduceRight)
3、不常用的方法：find方法、findIndex方法
4、ES6提供的三个新方法：keys方法、values方法、entries方法

下面是各方法的用法和区别：

一、

1、for循环是最传统的语句，跟其它循环方法比较它的性能是最好的

    for(i = 0;i < arr.length;i++){
    }//普通版for循环
    console.log(typeof i);//number

    for(i = 0;len = arr.length;i++){
    }//优化版for循环

    for(i= 0;arr[i] != null;i++){
    }//弱化版for循环*/

2、forEach遍历为每个数组元素执行callback函数只可用于数组，那些已删除（使用delete方法等情况）或者未初始化的项将被跳过（但不包括那些值为 undefined 的项），不可链式调用，没有返回值，对原数组没有影响，不支持IE。

var eachArr = arr.forEach(function(item,index,arr){
        return item+'|'+index+'|'+arr;
    });
    /*
     1|0|1,2,3,4
     2|1|1,2,3,4
     3|2|1,2,3,4
     4|3|1,2,3,4
     */

3、for-in语句一般被用来遍历对象的可枚举属性的。包括非整数类型的名称和继承的那些原型链上面的属性也能被遍历。for-in会把继承链的对象属性都会遍历一遍,所以会更花时间,性能较差。

for(var key in obj){
        console.log(key+'='+obj[key]);
    };
    /*name=xiaoqian
      sex=girl
      age=21
    */

4、for-of语句是ES6专门引入用来遍历可迭代对象的数据。遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。它只循环集合本身的元素。
具有iterable类型的集合可以通过新的for … of循环来遍历。

    var nArr = [{name:'hq',sex:'girl'},1,2];
     for(var val of nArr){
         console.log(val);
     }
     /*
     {name: "hq", sex: "girl"}
     1
     2
     */

用for-of语句循环遍历集合如下：

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
    console.log(x);
}
for (var x of s) { // 遍历Set
    console.log(x);
}
for (var x of m) { // 遍历Map
    con

二、

下面每个方法都接收两个参数：要在每一项上运行的函数，运行该函数的作用域对象（可选的）。要运行的函数会接收三个参数：数组项的值(item)，该项在数组中的位置(index)和数组对象本身(array)。
filter(): 对数组中的每一项运行给定函数，返回由该函数会返回true的项组成的数组
map(): 对数组中的每一项运行给定函数，返回由每次函数调用得到的结果组成的数组
every(): 对数组中的每一项运行给定函数，如果该函数对每一项都返回true,则返回true
some(): 对数组中的每一项运行给定函数，只要该函数对任一项返回true则返回true
其中各方法中的callback 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。

三、

1、find() 方法返回数组中符合测试函数条件的第一个元素。否则返回undefined
2、 findIndex 对于数组中的每个元素，都会调用一次回调函数（采用升序索引顺序），直到有元素返回 true。只要有一个元素返回 true，findIndex 立即返回该返回 true 的元素的索引值。如果数组中没有任何元素返回 true，则 findIndex 返回 -1。

[1,2,3].findIndex(function(x) { x == 2; });
// Returns an index value of 1.

[1,2,3].findIndex(x => x == 4);
// Returns an index value of -1.

四、

ES6 提供三个新的方法 —— entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for…of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历

for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"

五、

遍历速度比较：
for > for-of > forEach > filter > map > for-in
every>some