数组常见的遍历循环方法、数组的循环遍历的效率对比

素颜马尾好姑娘i 2022-03-06 21:18 288阅读 0赞

## 1 遍历数组的方法 ##

> 1-1、for / while

最普通的循环 效率最高 兼容ie6  
tips:for循环更适用于循环的开始和结束已知，循环次数固定的场合；while循环更适合于条件不确定的场合

**1-2、for in**

兼容ie6，效率最差（效率可看最下面的对比） for in 会把继承链的对象属性都会遍历一遍,所以会更花时间.

**1-3、for of  es6语法**

ie不兼容  【for-of 语句只遍历可迭代对象的数据。】原生具备 Iterator 接口的数据结构如下。ArrayMapSetStringTypedArray函数的 arguments 对象NodeList 对象更多迭代器 阅读：[http://es6.ruanyifeng.com/\#do...][http_es6.ruanyifeng.com_do...]

var arr = ['red', 'green', 'blue'];
     
    for(var v of arr) {
        console.log(v); // red green blue
    }

区别：for of 和 for in的区别for-in 语句以原始插入顺序迭代对象的可枚举属性。for-in会把继承链的对象属性都会遍历一遍,所以会更花时间.

## 2、数组自带的循环方法： ##

every 、 filter、forEach、map、reduce、some 都是兼容ie9  
map，filter 是返回新的数组 （形象区分几个循环方法的区别参考：[https://www.zhihu.com/questio...][https_www.zhihu.com_questio...]）

**2-1、Array.prototype.every()**

方法说明：测试数组的所有元素是否都通过了指定函数的测试。 遇到有不满足的会提前终止整个循环  
场景：检测每一项的selected字段都是被选中为true  
案例：

**2-2、Array.prototype.filter()  **

方法说明: 将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回。true表示保留该元素（通过测试），false则不保留  
场景：在一个数组中筛选数字大于10的元素，组成一个新数组  
案例：

var arr = [
        10,20,30
    ];
     
    var arr1 = arr.filter(function(el,index,arr){
        return el > 10;
    });
     
    console.log(arr1);  // 20 30

**2-3、Array.prototype.forEach()**   
   
方法说明：方法对数组的每个元素执行一次提供的函数    没有办法中止或者跳出 forEach 循环，除了抛出一个异常。 如果您正在测试一个数组里的元素是否符合某条件，且需要返回一个布尔值，那么可使用 Array.every 或 Array.some。如果可用，新方法 find() 或者findIndex() 也可被用于真值测试的提早终止。  
场景： 普通遍历  
案例：

var arr = [
        {id:1,name:"zhangsan1",selected:false},
        {id:2,name:"zhangsan2",selected:false},
        {id:3,name:"zhangsan3",selected:true},
    ];
     
     
    arr.forEach(function(el,index,arr){
        console.log(el)
    });

**2-4、Array.prototype.map()**  
方法说明：方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。  
场景：异步得到数据后,需要新建一个数据根据id标识记录是否被选中的selected属性  
案例：

案例2: es6写法

var numbers = [1, 5, 10, 15];
    var doubles = numbers.map( x => x ** 2); //[2,10,20,30]

案例3：重格式化数组 //不改变原数组

**2-5、Array.prototype.reduce()**

方法说明：方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。  
场景：累加 、 合并多个数组  
案例：

var total = [0, 1, 2, 3].reduce(function(sum, value) {
      return sum + value;
    }, 0);
    // total is 6
     
    var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
      return a.concat(b);
    }, []); 
    // flattened is [0, 1, 2, 3, 4, 5]

**2-6、Array.prototype.some()**

方法说明：方法测试数组中的某些元素是否通过由提供的函数实现的测试。  
场景：检查数组中是否含有某个东西 （和every 是对立的）  
案例：

const isBiggerThan10 = (element, index, array) => {
      return element > 10;
    }
     
    [2, 5, 8, 1, 4].some(isBiggerThan10);  
    // false
     
    [12, 5, 8, 1, 4].some(isBiggerThan10); 
    // true

案例2： 是否包含id为1 对象

## 3、 循环/遍历效率对比 ##

for ~= do while < forEach ~= map ~= every < $.each < $(e).each < for in    
参考：[http://www.jb51.net/article/1...][http_www.jb51.net_article_1...]

for > for-of > forEach > filter > map > for-in  
参考：[https://dailc.github.io/2016/...][https_dailc.github.io_2016_...]

## 4、原生实现every 、 filter、forEach、map、reduce、some 等方法 ##

[http://www.jb51.net/article/6...][http_www.jb51.net_article_6...]

## 5、其他参考 ##

[https://juejin.im/post/5a3a59...][https_juejin.im_post_5a3a59...]

[http_es6.ruanyifeng.com_do...]: http://es6.ruanyifeng.com/#docs/iterator
[https_www.zhihu.com_questio...]: https://www.zhihu.com/question/24927450
[http_www.jb51.net_article_1...]: http://www.jb51.net/article/112064.htm
[https_dailc.github.io_2016_...]: https://dailc.github.io/2016/11/25/baseKnowlenge_javascript_jsarrayGoThrough
[http_www.jb51.net_article_6...]: http://www.jb51.net/article/60502.htm
[https_juejin.im_post_5a3a59...]: https://juejin.im/post/5a3a59e7518825698e72376b#heading-4