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

news/2024/12/13 14:50:03

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 6var 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...


https://dhexx.cn/news/show-1420130.html

相关文章

过滤器,监听器,拦截器的区别

1.过滤器 Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的服务器端程序&#xff0c;主要的用途是过滤字符编码、做一些业务逻辑判断等。其工作原理是&#xff0c;只要你在web.xml文件配置好要拦截的客户端请求&#xff0c;它都会帮你拦截到请求&#xff0c;此时你…

Pystinger的使用

目录 Pystinger 实现多主机上线cs 目标主机执行 VPS执行 CS开启监听 生成木马

PHP 指定的 CGI 应用程序由于未返回完整的一组 HTTP 头而产生错误行为。

PHP 指定的 CGI 应用程序由于未返回完整的一组 HTTP 头而产生错误行为。 Security Alert! PHP CGI cannot be accessed directly. This PHP CGI binary was compiled with force-cgi-redirect enabled. This means that a page will only be served up if the REDIRECT_STATUS…

洛谷——P1010 幂次方

前言&#xff1a;只为转C刷水题. 题目描述 任何一个正整数都可以用2的幂次方表示。例如&#xff1a;1372^72^32^0 同时约定方次用括号来表示&#xff0c;即a^b 可表示为a(b)。 由此可知&#xff0c;137可表示为&#xff1a;2(7)2(3)2(0) 进一步&#xff1a;7 2^222^0 …

创业活动平台,2019路演活动报名网站

创业活动平台&#xff0c;2019路演活动报名网站创业项目想获得曝光量就好像一个新产品要进行产品发布会&#xff0c;要向市场宣告你的到来&#xff0c;这时候创业者就需要不断的进行路演&#xff0c;我们常见的有两种类型&#xff0c;一个是创业赛事形式&#xff0c;一个是各类…

django中的F和Q

F查询 Django 提供 F() 来做这样的比较。F() 的实例可以在查询中引用字段&#xff0c;来比较同一个 model 实例中两个不同字段的值。 查询书id大于\小于价格的书籍 1 models.Book.objects.filter(id__gtF("price")) 2 <QuerySet []> 3 4 models.Book.objects.…

Activiti框架学习笔记总结

本篇主要是Activiti工作流框架的学习记录&#xff0c;以及对于该框架的基本使用和一些浅显的理解&#xff1a; 1、工作流框架基本概念2、在eclipse中使用工作流框架3、创建工作框架4、使用框架提供API&#xff0c;操作框架实现业务逻辑 1、工作流框架基本概念&#xff08;摘自…

将python文件编译成可执行文件

以下方法Windows和Linux均适用! 将python文件编译成exe文件需要第三方库:pyinstaller ,执行命令:pip3 install pyinstaller 即可安装。 #指定国内源安装 pip3 install pyinstaller -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.com ​​​​​​​ 进…

厕所标语

厕所泛指由人类建造专供人类&#xff08;或其他特指生物&#xff0c;如家畜&#xff09;进行生理排泄和放置&#xff08;处理&#xff09;排泄物的地方。 人类使用的厕所大多有男厕女厕之分&#xff0c;不过随着科技的发展&#xff0c;男女共用的厕所&#xff0c;也问世了。厕所…

JarvisOJ Basic 握手包

得到的是一个.cap文件&#xff0c;我看着好像可以用wireshark打开&#xff0c;就试了一下 报错了&#xff0c;pcapfix上&#xff0c;得到了一个新的.cap文件&#xff0c;用wireshark打开&#xff0c;发现分析不出来 查了一下&#xff0c;有破解握手包的专业软件&#xff0c;kal…