关键词:
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
老实说我不喜欢用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() 我们期望的结果是: 3 2 1 end 但是实际上会输出: end 1 2 3
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()
方法不支持使用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
关键字作用域问题的例子:
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循环低
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 // four console.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
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
你不知道的foreach(javascript)(代码片段)
...间传达一种可落地的编程思想或解决方案。Array.prototype.forEach(callbackfn[,thisArg])规范地址(下述引用文,均源自该规范):https://tc39.es/ecma262/#sec-array.prototype.foreach跳过不存在的元素c 查看详情
你不知道的foreach(javascript)(代码片段)
...间传达一种可落地的编程思想或解决方案。Array.prototype.forEach(callbackfn[,thisArg])规范地址(下述引用文,均源自该规范):https://tc39.es/ecma262/#sec-array.prototype.foreach跳过不存在的元素callbackfn只对数组中实际存在的元... 查看详情
你不知道的js系列(39)-对象遍历(代码片段)
...console.log(myArray[i])//123ES5增加了数组的辅助迭代器,包括forEach(...)、every(...)、some(...)forEach(...)会遍历数组中的所有值并忽略回调函数的返回值every(...)会一直运行直到回调返 查看详情
你不知道的js(代码片段)
1、作用域 块级作用域let只在函数内部自己的作用域内有效 全局作用域var 函数作用域 找不到作用域抛出ReferenceError变量有了则抛出TypeError 先声明后赋值 函数提升变量提升函数优先,函数声明提升在普通变量之前 函数表达... 查看详情
《你不知道的js(上卷)》作用域闭包(代码片段)
五、作用域闭包:? 闭包不是神奇的魔法,它只是遵循我们前几章一直介绍的词法作用域书写代码的自然结果。? 闭包是由函数以及声明该函数的词法环境组合而成的。该环境包含了这个闭包创建时作用域内的任何局部变量。一... 查看详情
《你不知道的js》提升(代码片段)
四、提升:一)、声明与赋值:? 在JS引擎中,我们一般认为的变量或函数声明,实际上分为两个部分。声明赋值//变量提升a=2;vara;console.log(a);//函数提升foo();functionfoo() console.log(1);? vara=2;? 这句声明实际上会被看为vara;a=2;两个部分... 查看详情
《你不知道的javascript》整理——this
...下“this”。当一个函数被调用时,会创建一个活动记录(执行上下文)。这个记录会包含函数在哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在函数执行的过程中用到。th... 查看详情
你不知道的js系列(22)-thisnew绑定(代码片段)
在传统的面向类的语言中,“构造函数“是类中的一些特殊方法,使用new初始化类时会调用类中的构造函数。通常的形式是这样的something=newMyClass(..);然而JavaScript中new的机制实际上和面向类的语言不同。它们只是被new操作... 查看详情
作用域闭包《你不知道的javascript(上)》(代码片段)
当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是当前词法作用域之外执行。 functionfoo()vara=2;functionbar()console.log(a);//2bar();foo();functionfoo()vara=2;functionbar()console.log(a);returnbar;varbaz=foo();baz();// 查看详情
作用域闭包《你不知道的javascript(上)》(代码片段)
当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是当前词法作用域之外执行。 functionfoo()vara=2;functionbar()console.log(a);//2bar();foo();functionfoo()vara=2;functionbar()console.log(a);returnbar;varbaz=foo();baz();// 查看详情
你不知道的js系列(19)-this调用位置(代码片段)
我们排除了一些对于this对错误理解并且明白了每个函数的this是在调用时被绑定的,完全取决于函数的调用位置。寻找调用位置就是寻找“函数被调用的位置”,但是做起来并没有这么简单,因为某些编程模式可能会隐藏... 查看详情
你不知道的js系列(13)-什么是闭包(代码片段)
当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行functionfoo() vara=2; functionbar() console.log(a); returnbarvarbaz=foo();baz();//2——朋友,这就是闭包的效果在foo... 查看详情
mysql系列你不知道的视图触发器存储过程函数事务索引语句(代码片段)
转自:http://www.cnblogs.com/suoning/p/5744849.html本章内容:视图、增/删/改/查触发器、增/删/改/查存储过程、增/删/改/查存储过程三种传参,pymysql怎么用?函数、增/删/改/查/return值内置函数事务索引!一、视图视图是查询命令结果构... 查看详情
你不知道的css---position小技巧(代码片段)
...y与fixed的组合。但他的细节和妙用,未必人人皆知。所以记录下我这一周的学习总结,供大家参考使用。回顾positionvaluesposition中目前有五个值分别是static、relative、absolute、fixed、sticky。使用场景分别如下:static:此值为默认值,... 查看详情
js你不知道的javascript笔记-this-四种绑定规则-绑定优先级-绑定例外-箭头函数(代码片段)
文章目录1.为什么要用`this`2.关于`this`的误解2.1`this`不是指向函数自身2.2`this`不指向函数的词法作用域3.什么是调用栈与调用位置4.`this`的绑定规则4.1默认绑定`fun()`4.2隐式绑定`obj.fun()`隐... 查看详情
你不知道的js系列(14)-闭包无处不在(代码片段)
上一节的闭包是为了解释如何使用闭包而人为地在结构上进行修饰,在昨天的闭包基础上,我们可以更加灵活的使用闭包functionwait(message) setTimeout(functiontimer() console.log(message) ,1000)wait(‘hello,consure‘);内部函数timer... 查看详情
javascript中的this—你不知道的javascript上卷读书笔记
...函数的调用方式。当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在函数执行的... 查看详情
问题记录(代码片段)
迭代变量为什么foreach迭代变量不能修改值?我知道是在实现IEnumerator枚举器的时候Current属性设置为只读,但是问题是为什么将其设置为只读属性呢?而且在自定义实现该枚举器的时候,将其设置为读写的,还是会提示迭代变量... 查看详情