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

红太狼 2022-02-02 20:37 187阅读 0赞

总的遍历方法：  
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**