都什么年代了，你还在使用forEach?

小咪咪 2023-09-24 22:23 56阅读 0赞

我为什么叫你不要再使用`forEach`了。

### 原因一：不支持处理异步函数 ###

先看一个例子：

async function test() {
        let arr = [3, 2, 1]
        arr.forEach(async item => {
            const res = await mockSync(item)
            console.log(res)
        })
        console.log('end')
    }
    
    function mockSync(x) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                    resolve(x)
            }, 1000 * x)
        })
    }
    test()
    我们期望的结果是:
    3
    2 
    1
    end
    
    但是实际上会输出:
    
    end
    1
    2
    3
    复制代码

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

#### 替代`forEach`的方式 ####

1.方式一

可以使用例如`map()`、`filter()`、`reduce()`等，它们支持在函数中返回`Promise`，并且会等待所有Promise完成。

使用`map()`和`Promise.all()`来处理异步函数的示例代码如下：

由于我们在异步函数中使用了`await`关键字，`map()`方法会等待异步函数完成并返回结果，因此我们可以正确地处理异步函数。

方式二 使用for循环来处理异步函数

### 原因二：无法捕获异步函数中的错误 ###

如果异步函数在执行时抛出错误，`forEach()`无法捕获该错误。这意味着即使在异步函数中出现错误，`forEach()`仍会继续执行。

### 原因三：除了抛出异常以外，没有办法中止或跳出 `forEach()` 循环 ###

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

### 原因四：forEach 删除自身元素，index不可被重置 ###

在`forEach`中我们无法控制 index 的值，它只会无脑的自增直至大于数组的 length 跳出循环。所以也无法删除自身进行index重置，先看一个简单例子：

let arr = [1,2,3,4]
    arr.forEach((item, index) => {
        console.log(item); // 1 2 3 4
        index++;
    });
    复制代码

### 原因五：this指向问题 ###

在`forEach()`方法中，`this`关键字引用的是调用该方法的对象。但是，在使用普通函数或箭头函数作为参数时，`this`关键字的作用域可能会出现问题。在箭头函数中，this关键字引用的是定义该函数时所在的对象。在普通函数中，this关键字引用的是调用该函数的对象。如果需要确保this关键字的作用域正确，可以使用bind()方法来绑定函数的作用域。以下是一个关于`forEach()`方法中`this`关键字作用域问题的例子：

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

undefined is friends with Bob
    undefined is friends with Charlie
    undefined is friends with Dave
    复制代码

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

为了解决这个问题，可以使用`bind()`方法来绑定函数的作用域，或使用箭头函数来定义回调函数。以下是使用`bind()`方法解决问题的代码示例：

在这个例子中，我们使用`bind()`方法来绑定函数的作用域，将该函数的作用域绑定到`obj`对象上。运行代码后，输出结果为：

Alice is friends with Bob 
    Alice is friends with Charlie 
    Alice is friends with Dave
    复制代码

通过使用`bind()`方法来绑定函数的作用域，我们可以正确地访问`obj`对象的属性。

另一种解决方法是使用箭头函数。由于箭头函数没有自己的`this`，它会继承它所在作用域的`this`。因此，在箭头函数中，`this`关键字引用的是定义该函数时所在的对象。代码略

### 原因六： forEach性能比for循环低 ###

`for`：for循环没有额外的函数调用栈和上下文，所以它的实现最为简单。  
`forEach`：对于forEach来说，它的函数签名中包含了参数和上下文，所以性能会低于 `for` 循环。

好了，我们还是使用`for...of`去替代`forEach`吧