js - 对forEach()函数的一些理解

在这里插入图片描述

1，定义和用法

定义：

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。注意: forEach() 对于空数组是不会执行回调函数的。

用法：

// 箭头函数
forEach((element) => { /* … */ })
forEach((element, index) => { /* … */ })
forEach((element, index, array) => { /* … */ })// 回调函数
forEach(callbackFn)
forEach(callbackFn, thisArg)// 内联回调函数
forEach(function(element) { /* … */ })
forEach(function(element, index) { /* … */ })
forEach(function(element, index, array){ /* … */ })
forEach(function(element, index, array) { /* … */ }, thisArg)片

2，forEach是否会改变原数组？

结论：对于简单数据类型是不会改变原数组的，对于复杂数据类型的直接赋值操作则是可以改变原数组的;

1，简单数据类型不会改变原数组

      const arrNumber = [1, 2, 3, 4];arrNumber.forEach((item,index)=>{item = item*2})console.log("arrNumber:",arrNumber); // [1, 2, 3, 4]

  const arrString = ['Eula','Kaya','Umbar']arrString.forEach((item,index)=>{item = item+'_'+index})console.log("arrString:",arrString);// ['Eula','Kaya','Umbar']

那我如果就是想要改变原数组，可以这样写：

   const arrNumber = [1, 2, 3, 4];arrNumber.forEach((item,index,arr)=>{if(item % 2 === 0){console.log("可以被2整除的需要重新赋值:",item);arr[index] = 100/}})console.log("arrNumber:",arrNumber);//[1, 100, 3, 100]

直接 arr[index] ；相当于你平常的数组名[第几项] = 值。这样自然是可以修改原数组的；

2，引用数据类型直接对其直接赋值能够改变原数组

const list = [{ name: "Kaya", age: 18 },{ name: "Eula", age: 19 },{ name: "Umbar", age: 20 }];// 直接进行赋值是可以改变原数组的 改变姓名list.forEach((item, index) => {if (item.name === "Eula") {item.name = "Xinjie";}});// 改变年龄list.forEach((item, index) => {item.age++;});console.log("list:", list);打印如下：0:{name: 'Kaya', age: 19}1: {name: 'Xinjie', age: 20}2: {name: 'Umbar', age: 21}

forEach() 相当于把原数组拷贝出来，对拷贝出来的数据进行操作，因为基本类型的数据相当于深拷贝，引用数据是浅拷贝，相当于只拷贝了指针地址，更改数据也会连带把原数组给改掉；

对于基本数据类型：number,string,Boolean,null,undefined它们在栈内存中直接存储变量与值。
而Object对象的真正的数据是保存在堆内存，栈内只保存了对象的变量以及对应的堆的地址，所以操作Object其实就是直接操作了原数组对象本身。

3，除了抛出异常以外，无法中止或跳出循环

forEach对数组进行遍历时，不能使用break或return等关键字跳出循环，使用return只能跳过本次循环，相当于continue。

1，使用return 跳出本次循环

  	  var arr = [1, 2, 3, 4, 5];arr.forEach(function (item) {// 只能跳出本次循环if (item === 3) {return;}console.log("item:",item); // 1 2  4 5});

2，抛出错误跳出终止整个循环（不推荐使用）

var arr = [1, 2, 3, 4, 5];try {arr.forEach(function (item) {// 只能跳出本次循环if (item === 3) {throw new Error("主动跳出循环");}console.log("item:", item); // 1 2 });} catch (error) {console.log("error:", error);}

注意：抛出异常虽然能够跳出整个循环体，但需要try catch函数来捕获此异常，否则控制台报错将会阻断代码的向下执行；

3，forEach()方法不支持使用break或continue语句来跳出循环或跳过某一项。

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

4，不能处理异步函数（async await）

1，先看下面这个案例：

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

2，针对上面问题可以有以下两种解决方案：

第一种：使用普通的for循环语法

 function mockSync(x) {return new Promise((resolve, reject) => {setTimeout(() => {resolve(x);}, 1000 * x);});}// 使用for循环async function test(){let arr = [3, 2, 1];for(let i=0;i<arr.length;i++){const res = await mockSync(arr[i]);console.log(res);}}test();// 3,2,1

现在执行顺序是正常的：等待3秒后打印3，然后等待2秒后打印2，最后等待1秒后打印1；

第二种：使用for of 循环来处理异步函数

   function mockSync(x) {return new Promise((resolve, reject) => {setTimeout(() => {resolve(x);}, 1000 * x);});}// 使用for of 循环async function test() {let arr = [3, 2, 1];for (const item of arr) {const res = await mockSync(item);console.log("res:",res);}}test();