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

xfee 发布于2019-08-23 15:14 / 2287人阅读

摘要：场景检查数组中是否含有某个东西和是对立的案例案例是否包含为对象循环遍历效率对比参考参考原生实现等方法其他参考

1 遍历数组的方法

1-1、for / while

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

1-2、for in

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

var arr = ["red", "green", "blue"];
var obj = {
    name:"张三",
    age:20
}
 

for(k in obj){
    console.log(k); //name  ， age 
    console.log(obj[k]);  // 张三 ， 20
}
 

for(k in arr){
    console.log(k);   // 0   , 1   ,2  
    console.log(arr[k]); // red, green ,blue
}

1-3、for of es6语法

ie不兼容【for-of 语句只遍历可迭代对象的数据。】原生具备 Iterator 接口的数据结构如下。ArrayMapSetStringTypedArray函数的 arguments 对象NodeList 对象更多迭代器阅读：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...）

2-1、Array.prototype.every()

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

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

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属性
案例：

var arr = [
    {id:1,name:"zhangsan1"},
];
 
var arr1 = arr.map(function(el,index,arr){
    var newObj = {};
    newObj.id = el.id;
    newObj.selected = false;
    return newObj;
});
 
console.log(arr);  // [{id:1,name:"zhangsan1"}]
console.log(arr1);  // [{id:1,selected:false}]

案例2: es6写法

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

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

var kvArray = [{key: 1, value: 10}, 
               {key: 2, value: 20}, 
               {key: 3, value: 30}];
 
var reformattedArray = kvArray.map(function(obj) { 
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
 
// reformattedArray 数组为： [{1: 10}, {2: 20}, {3: 30}],

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 对象

var arr = [
    {id:1,name:"zhangsan1"},
    {id:2,name:"zhangsan2"},
];
 
 
var flag = arr.some(function(element, index, array){
    console.log(element.id)
    return element.id == 1;
});  
 
console.log(flag)

3、循环/遍历效率对比

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

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

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

http://www.jb51.net/article/6...

5、其他参考

https://juejin.im/post/5a3a59...

云服务器 GPU云服务器 python循环遍历二维数组循环遍历字典 python遍历循环 php表单循环遍历

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101739.html

JS 数组循环遍历方法的对比

摘要：循环方法方法不改变原数组方法会给原数组中的每个元素都按顺序调用一次函数。筛选出过滤出数组中符合条件的项组成新数组代码方法方法为数组中的每个元素执行一次函数，直到它找到一个使返回表示可转换为布尔值的值的元素。 showImg(https://segmentfault.com/img/bV2QTD?w=1600&h=500); 前言 JavaScript 发展至今已经发展出多种数组的循环遍...

BlackFlagBin 2019-08-26 11:31 评论0 收藏0
JavaScript 循环

摘要：所以结果的不同就是后者能将循环内容至少执行一次。当此语句省略时，表示不进行条件判断，循环将一直执行，只有在循环中使用来跳出循环。支持对数组和类数组对象进行循环，不支持普通对象的循环。支持对字符串进行循环遍历。 JavaScript中直接提供的循环，主要有以下几种 while 循环和其他语言一样，JavaScript中的while循环有两种形式: while (condition) {...

gitmilk 2019-08-20 15:20 评论0 收藏0
JS中可能用得到的全部的排序算法

本篇有7k+字, 系统梳理了js中常见的12种排序算法。除了基本排序算法，文章还包含了希尔排序、堆排序、桶排序等较为复杂的排序实现，如果喜欢请点赞支持~谢谢. 原文: http://louiszhai.github.io/20... 导读排序算法可以称得上是我的盲点, 曾几何时当我知道Chrome的Array.prototype.sort使用了快速排序时, 我的内心是奔溃的(啥是快排, 我只知道...

verano 2019-08-20 15:08 评论0 收藏0
java知识体系梳理-->数组

摘要：知识体系梳理流程图一维数组数组概述数组是指一组数据的集合，数组中的每个数据被称作元素。定义打印数组元素方法按照给定的格式打印题目分析通过观察发现，要实现按照指定格式，打印数组元素操作。按照这种方式，数组循环多圈以后，就完成了数组元素的排序。知识体系梳理流程图 showImg(https://segmentfault.com/img/bVXwAi?w=902&h=652); 一维数组 ...

james 2019-08-15 12:23 评论0 收藏0
Week 2 - Java 容器 - 详细剖析 List 之 ArrayList, Vector,

摘要：底层使用的是双向链表数据结构之前为循环链表，取消了循环。快速随机访问就是通过元素的序号快速获取元素对象对应于方法。而接口就是用来标识该类支持快速随机访问。仅仅是起标识作用。，中文名为双端队列。不同的是，是线程安全的，内部使用了进行同步。前言学习情况记录时间：week 2 SMART子目标：Java 容器记录在学习Java容器知识点中，关于List的需要重点记录的知识点。...

MartinDai 2019-08-16 18:35 评论0 收藏0