JS几种数组遍历方式详解

前言

在前端开发中循环是必不可少的,在很多情况下不知道该用哪种循环类型,真是让人头大 😵🐷,因此知道每种循环 ♻️ 的运行效率是武装我们自己最有效的方式。

一、循环的类型

在前端循环中,有大概八种:

第一种:普通 for 循环

for(j = 0; j < arr.length; j++) {

}

第二种:优化版 for 循环(性能最高的一种)

for(j = 0,len=arr.length; j < len; j++) {

}

第三种:弱化版 for 循环(性能要远远小于普通 for 循环)

for(j = 0; arr[j]!=null; j++) {

}

第四种:foreach 循环(性能比普通 for 循环弱)

arr.forEach(function(e){

});

第五种:foreach 变种(比普通 foreach 弱)

Array.prototype.forEach.call(arr,function(el){

});

第六种:forin 循环(效率是最低)

for(j in arr) {

}

第七种:map 遍历(实际效率还比不上 foreach)

arr.map(function(n){

});

第八种:forof 遍历(需要 ES6 支持)

for(let value of arr) {

});

二、循环的性能

三、循环的区别

一、for…in 和 for…of 的区别

  1. 推荐在循环对象属性的时候,使用for...in,在遍历数组的时候的时候使用for...of
  2. for...in循环出的是 key,for...of循环出的是 value
  3. 注意,for...of是 ES6 新引入的特性。修复了 ES5 引入的for...in的不足
  4. for...of不能循环普通的对象,需要通过和Object.keys()搭配使用

for…in 循环数组下面的对象时会把 key 也拿到[{id:123,name:”王五”}{id:234,name:”张三”}]遍历对象属性

for…of 循环数组下面的对象时会拿到 name[“张三”,”李四”]遍历对象元素

二、forEach()和 map()遍历的区别

相同点:

  1. 都是循环遍历数组中的每一项。
  2. forEach() 和 map() 里面每一次执行匿名函数都支持 3 个参数:数组中的当前项 item,当前项的索引 index,原始数组 input。
  3. 匿名函数中的 this 都是指 Window。
  4. 只能遍历数组。

不同点: 1.forEach()「没有返回值」

  • 参数:value 数组中的当前项, index 当前项的索引, array 原始数组;

  • 数组中有几项,那么传递进去的匿名回调函数就需要执行几次;

  • 理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改;但是可以自己通过数组的索引来修改原来的数组;

    2.map()「有返回值,可以 return」

  • 参数:value 数组中的当前项,index 当前项的索引,array 原始数组;

  • 区别:map 的回调函数中支持 return 返回值;return 的是啥,相当于把数组中的这一项变为啥(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了);

总结

循环方式对比是专门对比普通 for 循环和 foreach,以及其它遍历方式在大量运算后的结果,目前对比三大类型,for 循环,forin,foreac,以及 for 循环的几种不同运用,可以看到,不同的方式差距较大,在综合考虑性能和方便性和可靠性上还是多选用 for 吧,在循环数组的时候还是用 for 循环吧,而在循环对象的时候再用 for…in


文章作者: xkloveme
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 xkloveme !
评论
 上一篇
javascript逻辑运算符“||”和“&&”的简单梳理 javascript逻辑运算符“||”和“&&”的简单梳理
一道经典的前端面试题: alert(1 && 2) 得到的结果是什么? A:true B:false C:1 D:2 请带着你的回答,往下看…… 那么 alert(1||’’&&am
2018-05-31
下一篇 
超简单!Mac打造漂亮又好用的 zsh shell 环境 超简单!Mac打造漂亮又好用的 zsh shell 环境
身为开发者,很大一部分的时间是在用 command line 做事,如果能把 command line 调整成好用又酷炫的模样,不只是效率提升非常多,用起来爽度也比较高,上面放了一张我自己的 item,是不是觉得高大上了许多 本片文章适用
2018-05-17
  目录