关于 JavaScript 中的 forEach 循环你不知道的 8 件事

太过爱你忘了你带给我的痛 2023-10-08 22:39 18阅读 0赞

![6e31f61219ebd9f06b0a827205f13175.jpeg][]

在深入学习 JavaScript 之后，很快就能意识到两者之间存在差异。本文就来介绍一下关于 forEach 循环不知道的 8 个知识点。

#### 1、不支持处理异步函数 ####

从这段代码看，期望的输出为：

3
    2 
    1
    ===> 结束

实际代码运行的输出如下：

===> 结束
    1
    2
    3

JavaScript 中的 `forEach()` 方法是一个同步方法，不支持处理异步函数。如果在 `forEach()` 中执行异步函数，`forEach()` 无法等待异步函数完成，它将继续执行下一个项目。这意味着，如果在 `forEach()` 中使用异步函数，则无法保证异步任务的执行顺序。

> 如果要在循环中处理异步函数，则可以使用 `map()`、`filter()`、`reduce()` 和 `for`

`map()`、`filter()`、`reduce()` 三个方法支持在函数中返回 `Promise`，并会等待所有 `Promise` 完成。下面使用 `map()` 和`Promise.all()` 处理异步函数的示例代码如下：

上面的代码片段在 `async` 函数中使用了 `await` 关键字，`map()` 方法会等待 `async` 函数完成并返回结果，以便正确处理 `async` 函数。

下面再用 `for` 来实现，可以达到预期效果：

#### 2、无法捕获异步函数中的错误 ####

如果异步函数在执行时抛出错误，使用 `forEach()` 是无法捕获该错误。这意味着即使 `async` 函数发生错误，`forEach()` 也会继续执行。

#### 3、除了抛出异常之外，没有办法中止或跳出 forEach() 循环 ####

`forEach()` 方法不支持使用 `break` 或 `continue` 语句来中断循环或跳过项目。如果需要跳出循环或跳过某个项目，则应使用 `for` 循环或其他支持 `break` 或 `continue` 语句的方法。

下面是通过抛出异常方式退出循环：

#### 4、forEach 删除自己的元素，索引无法重置 ####

在 `forEach()` 中，无法控制 `index` 的值，它会无意识地增加，直到大于数组长度，跳出循环。因此，也不可能通过删除自身来重置索引。来看一个简单的例子：

let arrayNumbers = [1, 2, 3, 4];
    arrayNumbers.forEach((item, index) => {
        console.log(item); // 1 2 3 4
        index++;
    });

#### 5、this 指向问题 ####

在 `forEach()` 方法中，`this` 关键字指向调用该方法的对象。然而，当使用普通函数或箭头函数作为参数时，`this` 关键字的作用域可能会导致问题。在箭头函数中，`this` 关键字指向定义函数的对象。在普通函数中，`this` 关键字指向调用函数的对象。如果需要确保 `this` 关键字的作用域是正确的，可以使用 `bind()` 方法来绑定函数的作用域。下面是 `forEach()` 方法中 `this` 关键字作用域的问题示例：

在这个例子中，定义了一个名为 `obj` 的对象，它有一个 `printFriends()` 方法。在 `printFriends()` 方法中，使用 `forEach()` 方法遍历 `friends` 数组，并使用普通函数打印每个朋友的名字和 `obj` 对象的 `name` 属性。运行代码输出如下：

undefined是Doman的朋友
    undefined是Raymon的朋友
    undefined是Dave的朋友

这是因为，在 `forEach()` 方法中使用普通函数时，函数的作用域不是调用 `printFriends()`方法的对象，而是全局作用域。因此，无法在该函数中访问 `obj` 对象的属性。

要解决这个问题，可以使用 `bind()` 方法绑定函数作用域，或者使用箭头函数定义回调函数。

下面将使用箭头函数定义回调函数，则运行就达到预期了，如下：

代码输出结果如下：

QuintionTang是Doman的朋友
    QuintionTang是Raymon的朋友
    QuintionTang是Dave的朋友

还可以使用 `bind()` 方法解决问题的代码示例：

上面的代码通过使用 `bind()` 方法绑定函数作用域，可以正确访问 `obj` 对象的属性。

#### 6、forEach 的性能低于 for 循环 ####

*  `for`：`for` 循环没有额外的函数调用栈和上下文，所以它的实现是最简单的。
 *  `forEach()`：对于 `forEach`，其函数签名包含参数和上下文，因此性能会低于 `for` 循环。
 *  `for...of`：支持循环体中的各种控制流，如 `continue`、`break`、`yield` 和 `await`。在效率上，`for...of` 比 `forEach()` 快。

#### 7、将跳过已删除或未初始化的项目 ####

#### 8、使用 forEach 不会改变原来的数组 ####

调用 `forEach()` 时，它不会更改原始数组，即调用它的数组。但是那个对象可能会被传入的回调函数改变：

[6e31f61219ebd9f06b0a827205f13175.jpeg]: https://img-blog.csdnimg.cn/img_convert/6e31f61219ebd9f06b0a827205f13175.jpeg