JS中循环遍历数组的四种方式总结
本文比较并总结遍历数组的四种方式:
for 循环:
for (let index=0; index < someArray.length; index++) { const elem = someArray[index]; // ··· }
for-in 循环:
for (const key in someArray) { console.log(key); }
数组方法 .forEach():
someArray.forEach((elem, index) => { console.log(elem, index); });
for-of 循环:
for (const elem of someArray) { console.log(elem); }
for-of 通常是最佳选择。我们会明白原因。
for循环 [ES1]
JavaScript 中的 for 循环很古老,它在 ECMAScript 1 中就已经存在了。for 循环记录 arr 每个元素的索引和值:
const arr = ['a', 'b', 'c']; arr.prop = 'property value'; for (let index=0; index < arr.length; index++) { const elem = arr[index]; console.log(index, elem); } // Output: // 0, 'a' // 1, 'b' // 2, 'c'
for 循环的优缺点是什么?
- 它用途广泛,但是当我们要遍历数组时也很麻烦。
- 如果我们不想从第一个数组元素开始循环时它仍然很有用,用其他的循环机制很难做到这一点。
for-in循环 [ES1]
for-in 循环与 for 循环一样古老,同样在 ECMAScript 1中就存在了。下面的代码用 for-in 循环输出 arr 的 key:
const arr = ['a', 'b', 'c']; arr.prop = 'property value'; for (const key in arr) { console.log(key); } // Output: // '0' // '1' // '2' // 'prop'
for-in 不是循环遍历数组的好方法:
- 它访问的是属性键,而不是值。
- 作为属性键,数组元素的索引是字符串,而不是数字。
- 它访问的是所有可枚举的属性键(自己的和继承的),而不仅仅是 Array 元素的那些。
for-in 访问继承属性的实际用途是:遍历对象的所有可枚举属性。
数组方法.forEach()[ES5]
鉴于 for 和 for-in 都不特别适合在数组上循环,因此在 ECMAScript 5 中引入了一个辅助方法:Array.prototype.forEach():
const arr = ['a', 'b', 'c']; arr.prop = 'property value'; arr.forEach((elem, index) => { console.log(elem, index); }); // Output: // 'a', 0 // 'b', 1 // 'c', 2
这种方法确实很方便:它使我们无需执行大量操作就能够可访问数组元素和索引。如果用箭头函数(在ES6中引入)的话,在语法上会更加优雅。
.forEach() 的主要缺点是:
- 不能在它的循环体中使用 await。
- 不能提前退出 .forEach() 循环。而在 for 循环中可以使用 break。
中止 .forEach() 的解决方法
如果想要中止 .forEach() 之类的循环,有一种解决方法:.some() 还会循环遍历所有数组元素,并在其回调返回真值时停止。
const arr = ['red', 'green', 'blue']; arr.some((elem, index) => { if (index >= 2) { return true; // 中止循环 } console.log(elem); //此回调隐式返回 `undefined`,这 //是一个伪值。 因此,循环继续。 }); // Output: // 'red' // 'green'
可以说这是对 .some() 的滥用,与 for-of 和 break 比起来,要理解这段代码并不容易。
for-of循环 [ES6]
for-of 循环在 ECMAScript 6 开始支持:
const arr = ['a', 'b', 'c']; arr.prop = 'property value'; for (const elem of arr) { console.log(elem); } // Output: // 'a' // 'b' // 'c'
for-of 在循环遍历数组时非常有效:
用来遍历数组元素。
可以使用 await
- 如果有需要,可以轻松地迁移到 for-await-of。
甚至可以将 break 和 continue 用于外部作用域。
for-of 和可迭代对象
for-of 不仅可以遍历数组,还可以遍历可迭代对象,例如遍历 Map:
const myMap = new Map() .set(false, 'no') .set(true, 'yes') ; for (const [key, value] of myMap) { console.log(key, value); } // Output: // false, 'no' // true, 'yes'
遍历 myMap 会生成 [键,值] 对,可以通过对其进行解构来直接访问每一对数据。
for-of 和数组索引
数组方法 .entries() 返回一个可迭代的 [index,value] 对。如果使用 for-of 并使用此方法进行解构,可以很方便地访问数组索引:
const arr = ['chocolate', 'vanilla', 'strawberry']; for (const [index, elem] of arr.entries()) { console.log(index, elem); } // Output: // 0, 'chocolate' // 1, 'vanilla' // 2, 'strawberry'
总结
for-of 循环的的可用性比 for,for-in 和 .forEach() 更好。
通常四种循环机制之间的性能差异应该是无关紧要。如果你要做一些运算量很大的事,还是切换到 WebAssembly 更好一些。
到此这篇关于JS中循环遍历数组的四种方式总结的文章就介绍到这了,更多相关JS循环遍历数组内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 这篇文章主要介绍了Java8处理List的双层循环问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-19
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 下面小编就为大家带来一篇js遍历json的key和value的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-01-26
jquery中常用的SET和GET$(”#msg”).html循环介绍
复制代码 代码如下: $(”#msg”).html(); //返回id为msg的元素节点的html内容。 $(”#msg”).html(”new content“); //将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content $(”...2013-10-13- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
浅谈Java8 的foreach跳出循环break/return
这篇文章主要介绍了Java8 的foreach跳出循环break/return,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-07-28JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
下面小编就为大家带来一篇JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-05-20- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03