最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

记录--你不知道的forEach函数

来源:博客园

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

老实说我不喜欢用forEach,因为它导致的一些bug总是这么不经意,盘点我不喜欢的原因

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

先看一个例子:


【资料图】

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()我们期望的结果是:32 1end但是实际上会输出:end123

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

替代forEach的方式

1.方式一

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

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

const arr = [1, 2, 3, 4, 5];async function asyncFunction(num) {  return new Promise((resolve, reject) => {    setTimeout(() => {      resolve(num * 2);    }, 1000);  });}const promises = arr.map(async (num) => {  const result = await asyncFunction(num);  return result;});Promise.all(promises).then((results) => {  console.log(results); // [2, 4, 6, 8, 10]});

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

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

const arr = [1, 2, 3, 4, 5];async function asyncFunction(num) {  return new Promise((resolve, reject) => {    setTimeout(() => {      resolve(num * 2);    }, 1000);  });}async function processArray() {  const results = [];  for (let i = 0; i < arr.length; i++) {    const result = await asyncFunction(arr[i]);    results.push(result);  }  console.log(results); // [2, 4, 6, 8, 10]}processArray();

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

如果异步函数在执行时抛出错误,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 Bobundefined is friends with Charlieundefined 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循环低

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

原因七:会跳过已删除或者未初始化的项

// 跳过未初始化的值const array = [1, 2, /* empty */, 4];let num = 0;array.forEach((ele) => {  console.log(ele);  num++;});console.log("num:",num);//  1//  2 //  4 // num: 3// 跳过已删除的值const words = ["one", "two", "three", "four"];words.forEach((word) => {  console.log(word);  if (word === "two") {  // 当到达包含值`two`的项时,整个数组的第一个项被移除了  // 这导致所有剩下的项上移一个位置。因为元素`four`正位于在数组更前的位置,所以`three`会被跳过。    words.shift(); //"one" 将从数组中删除  }}); // one // two // fourconsole.log(words); // ["two", "three", "four"]

原因八:forEach使用不会改变原数组

forEach()被调用时,不会改变原数组,也就是调用它的数组。但是那个对象可能会被传入的回调函数改变

// 例子一const array = [1, 2, 3, 4]; array.forEach(ele => { ele = ele * 3 }) console.log(array); // [1,2,3,4]// 解决方式,改变原数组const numArr = [33,4,55];numArr.forEach((ele, index, arr) => {    if (ele === 33) {        arr[index] = 999    }})console.log(numArr);  // [999, 4, 55]// 例子二const changeItemArr = [{    name: "wxw",    age: 22}, {    name: "wxw2",    age: 33}]changeItemArr.forEach(ele => {    if (ele.name === "wxw2") {        ele = {            name: "change",            age: 77        }    }})console.log(changeItemArr); // [{name: "wxw", age: 22},{name: "wxw2", age: 33}]// 解决方式const allChangeArr = [{    name: "wxw",    age: 22}, {    name: "wxw2",    age: 33}]allChangeArr.forEach((ele, index, arr) => {    if (ele.name === "wxw2") {        arr[index] = {            name: "change",            age: 77        }    }})console.log(allChangeArr); // // [{name: "wxw", age: 22},{name: "change", age: 77}]

好了,我还是使用for...of去替代forEach

本文转载于:

https://juejin.cn/post/7207411012487381051

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

关键词: