JS中循环遍历数组的四种方式总结


Posted in Javascript onJanuary 23, 2021

本文比较并总结遍历数组的四种方式:

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循环遍历数组内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
javascript中this的四种用法
May 11 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 #Vue.js
原生js实现自定义难度的扫雷游戏
Jan 22 #Javascript
Element-ui upload上传文件限制的解决方法
Jan 22 #Javascript
js canvas实现五子棋小游戏
Jan 22 #Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 #Vue.js
element-ui 弹窗组件封装的步骤
Jan 22 #Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 #Javascript
You might like
使用dump函数,给php加断点测试
2013/06/25 PHP
php实现源代码加密的方法
2015/07/11 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
大专计算机个人求职的自我评价
2013/10/21 职场文书
房地产融资计划书
2014/01/10 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
同意报考公务员证明
2015/06/17 职场文书
服装店员工管理制度
2015/08/07 职场文书
个人道歉信大全
2019/04/11 职场文书
python入门学习关于for else的特殊特性讲解
2021/11/20 Python