0
点赞
收藏
分享

微信扫一扫

#yyds干货盘点#聊一聊forEach函数

前端循环中会用到forEach,其实forEach有很多问题:

forEach无法终止或者跳出循环

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

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关键字作用域问题的例子:

const obj = {
  name: "Alice",
  friends: ["Bob", "Charlie", "Dave"],
  printFriends: function () {
    this.friends.forEach(function (friend) {
      console.log(this.name + " is friends with " + friend);
    });
  },
};
obj.printFriends();

在这个例子中,我们定义了一个名为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()方法解决问题的代码示例:

const obj = {
  name: "Alice",
  friends: ["Bob", "Charlie", "Dave"],
  printFriends: function () {
    this.friends.forEach(
      function (friend) {
        console.log(this.name + " is friends with " + friend);
      }.bind(this) // 使用bind()方法绑定函数的作用域
    );
  },
};
obj.printFriends();

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

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

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

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

forEach性能不及for

foreach相对于for循环,代码减少了,但是foreach依赖IEnumerable。在运行的时候效率低于for循环。当然了,在处理不确定循环次数的循环,或者循环次数需要计算的情况下。使用foreach比较方便。而且foreach的代码经过编译系统的代码优化后,和for循环的循环类似。

可以说,foreach语句是for语句的特殊简化版本,在遍历数组、集合方面,foreach为开发人员提供了极大的方便。在复杂的循环设计时,还是应该使用for循环更加的灵活。



举报

相关推荐

0 条评论