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 相关文章推荐
JS基础之undefined与null的区别分析
Aug 08 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
javascript操作ul中li的方法
May 14 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
让你30分钟快速掌握vue3教程
Oct 26 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
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
小谈php正则提取图片地址
2014/03/27 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
详解Python中的join()函数的用法
2015/04/07 Python
Python执行时间的计算方法小结
2017/03/17 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
Python API len函数操作过程解析
2020/03/05 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
pandas 数据类型转换的实现
2020/12/29 Python
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
会计助理岗位职责
2014/02/17 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
英文慰问信范文
2015/03/24 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python