js array 遍历、js遍历数组对象获取值 收藏 0

JS几种数组遍历方式以及性能分析对比

作者：Lichun Dai

来源：https://dailc.github.io/

前言

这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列，本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比

在上一次分析了JS几种常用变量交换方式以及各自性能后，觉得这种方式挺好的，于是抽取了核心逻辑，封装成了模板，打算拓展成一个系列，本文则是系列中的第二篇，JS数组遍历方式的分析对比

JS数组遍历，基本就是for,forin,foreach,forof,map等等一些方法，以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比

代码如下:

简要说明: 最简单的一种，也是使用频率最高的一种，虽然性能不弱，但仍有优化空间

代码如下:

简要说明: 使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。

这种方法基本上是所有循环遍历方法中性能最高的一种

代码如下:

简要说明: 这种方法其实严格上也属于for循环，只不过是没有使用length判断，而使用变量本身判断

实际上，这种方法的性能要远远小于普通for循环

代码如下:

简要说明: 数组自带的foreach循环，使用频率较高，实际上性能比普通for循环弱

代码如下:

简要说明: 由于foreach是Array型自带的，对于一些非这种类型的，无法直接使用(如NodeList)，所以才有了这个变种，使用这个变种可以让类似的数组拥有foreach功能。

实际性能要比普通foreach弱

代码如下:

简要说明: 这个循环很多人爱用，但实际上，经分析测试，在众多的循环遍历方式中

它的效率是最低的

代码如下:

简要说明: 这种方式也是用的比较广泛的，虽然用起来比较优雅，但实际效率还比不上foreach

代码如下:

简要说明: 这种方式是es6里面用到的，性能要好于forin，但仍然比不上普通for循环

上述列举了几种方式都有一一做过对比分析，基本上可以得出的结论是:

普通for循环才是最优雅的

(PS:以上所有的代码都只是进行空的循环，没有再循环内部执行代码，仅仅是分析各自循环的时间而已)

以下截图中的数据是，在chrome (支持es6)中运行了100次后得出的结论(每次运行10次,一共10个循环，得到的分析结果)

可以看出,forin循环最慢。优化后的普通for循环最快

以下截图数据是，在chrome (支持es6)中运行了1000次后得出的结论(每次运行100次,一共10个循环，得到的分析结果)

JavaScript数组遍历大作战：七种武器，各显神通

最近在做前端开发时，你是否也遇到过这样的场景：需要对一个数组的每一项进行处理，却不知道应该选择哪种遍历方法？for循环看起来很经典，但是总觉得有点繁琐；forEach用起来好像很优雅，但是又担心它的性能问题。今天我们就一起来深入剖析JavaScript中七种常用的数组遍历方法，看看它们各自的特点和适用场景。

首先，我们来看一下最经典的for循环。它是我们最早接触的遍历方法，也是很多开发者最熟悉的方式。

优点：

• 灵活度高，可以控制循环的起始位置、步长等。
• 可以使用 break 和 continue 语句来中断或跳过循环。
• 性能相对较好，尤其是在大型数组的遍历中。

缺点：

• 代码略显冗长，需要手动维护索引变量。
• 容易出现边界错误，例如索引超出数组范围。

for…in 循环主要用于遍历对象的属性，但也可以用于遍历数组。但需要注意的是，for…in遍历的是数组的索引，而不是数组的值。

优点：- 语法简洁，不需要维护索引变量。

缺点：

• 遍历的是索引，需要通过索引来访问值。
• 会遍历数组原型链上的属性，可能导致意外的结果。
• 遍历的顺序是不确定的，不应该用于需要保证顺序的场景。
• 不建议用于遍历数组，尤其是在现代JavaScript开发中。

while循环是一种更通用的循环结构，它会在条件为真的情况下重复执行代码块。

优点：

• 灵活性高，可以用于各种循环场景。

缺点：- 需要手动维护索引变量和循环条件。- 容易出现死循环，需要特别注意循环条件的设置。

do…while 循环与 while 循环类似，但它会先执行一次代码块，然后再检查条件。

优点：- 至少会执行一次代码块。

缺点：- 同样需要手动维护循环变量和条件。- 使用场景相对较少。

for…of 循环是ES6引入的一种新的循环语法，专门用于遍历可迭代对象，如数组、字符串、Map、Set等。

优点：

• 语法简洁，可以直接获取数组的值。
• 可以遍历任何可迭代对象。
• 避免了 for…in 的一些问题，不会遍历原型链上的属性。

缺点：- 无法直接获取索引。

forEach() 方法是数组的一个内置方法，用于遍历数组的每一项，并执行指定的回调函数。

优点：- 语法简洁，代码可读性高。- 不需要手动维护索引。

缺点：- 无法使用 break 和 continue 中断循环。- 无法链式调用，例如与其他数组方法组合使用。

map() 方法也是数组的一个内置方法，它会遍历数组的每一项，并根据回调函数的返回值创建一个新的数组。

优点：

• 可以用于转换数组，生成新的数组。
• 可以链式调用，与其他数组方法组合使用。

缺点：- 主要用于生成新数组，如果只是想遍历数组，并不推荐使用。

那么，在实际开发中我们应该如何选择合适的遍历方法呢？

• 需要灵活性和控制：使用for循环，可以控制起始位置、步长等，并可以使用 break 和 continue 语句。
• 遍历可迭代对象：使用 for…of 循环，可以直接获取值，避免 for…in 的问题。
• 简单遍历数组: forEach() 方法，代码简洁，可读性高。
• 转换数组：使用 map() 方法，可以方便地生成新的数组。
• 避免 for…in：尽可能避免使用 for…in 遍历数组，因为它的行为不符合预期，而且性能较差。

总而言之，根据实际需求选择最适合的方法，能够提高代码的可读性和效率。

今天我们一起深入了解了JavaScript中七种常用的数组遍历方法，每种方法都有其独特的特点和适用场景。掌握这些方法，能够帮助我们更好地处理数组数据，提升开发效率和代码质量。在日常开发中，我们应该根据具体需求选择合适的遍历方式，从而写出更加简洁、高效、可读的代码。

希望今天的文章能够帮助你解决在JavaScript数组遍历中遇到的困惑。如果你有其他关于前端开发的问题，欢迎在评论区留言，我们一起学习进步！

「Excel-VBA」专项-数组-02-数组遍历

• 系统环境：Windows 10
• Excel：2016版本

本系列讲讲数组功能

今天说说如何获取数组的每一个元素

• 依然针对1维和2维数组进行讲解，示例结构如下

1. 数组1：1维数组，包含3个元素
2. 数组2：2维数组，包含6个元素

• 目标在于打印输出数组中的每一个元素，下文提供了两种方法

1. For Each…
2. For i = 0 to …

图1 1维数组

图2 二维数组

图3 运行结果

1. 对于1维数组，For Each循环会对每个元素进行遍历，返回的是每个单个元素
2. 对于2维数组，For Each只是对某一个维度进行遍历，遍历顺序是优先按照行进行遍历，返回的是一个1维数组，再对1维数组进行遍历，回到1维数组的方法

图4 运行结果

1. 1维数组，UBound(arr1)获取数组的索引号最大值，默认从0开始。即含有3个元素的数组，返回2
2. 2维数组，UBound(arr2)获取数组的行号最大值，默认从0开始
3. 2维数组，UBound(arr2(1))，获取2维数组第2行数组索引号最大值，默认从0开始，即列数-1
4. 1维数组，ele = arr1(i)，通过元素位置访问元素
5. 2维数组，arr2(i)(j)，通过元素位置访问元素，i表示行号，j表示列号，有点像Excel单元格中的Cells(行号,列号)用法，只不过Cells中行号列号是从1开始的
6. 注意，如果，数组采用Dim arr(1 To 3, 1 To 2)这种指定索引号的方式，那么按照指定的索引号来，不再是从0开始

以上，为本次的介绍内容，下回见。

本文首发于微信公众号：Excel高效办公之VBA。排版和细节略作修改，发于头条

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com