[JavaScript知识库]如果非要在forEach中修改原数组

简单说明

forEach作为数组的一个遍历方法，提供了数组的遍历和值的修改功能。

但是在修改原数组方面，有不少注意事项。

forEach有两个参数，

第一个参数是回调函数，第二个参数是用来改变this指向的。

第二个参数极少使用，本篇不做介绍。

回调函数可以写入3个参数，分别是：

1. item 数组的每个值
2. index 数组的下标
3. arr 数组

forEach没有返回值，或者说返回值是undefined

const arr = [1, 2, 3]
const arr1 = arr.forEach(item => {
	item += 1
})
console.log('arr1: ', arr1)
// arr1:  undefined

修改原数组？

这里举几个比较直观的例子，

示例1：

const arr = [1, 2, 3]
arr.forEach(item => {
	item += 1
})
console.log(arr) // [1, 2, 3]

示例二：

const arr = [1, 2, 3]
arr.forEach((item, index, arr) => {
	arr[index] = item + 1
})
console.log(arr) // [2, 3, 4]

示例三：

const arr = [
	{name: 'dilireba', age: 18}
]
arr.forEach(item => {
	item = {name: '张三', age: 20}
})
console.log(arr) // [{name: 'dilireba', age: 18}]

示例四：

const arr = [
	{name: 'dilireba', age: 18}
]
arr.forEach(item => {
	item.name = '张三'
	item.age = 20
})
console.log(arr) // [{name: '张三', age: 20}]

示例5：

const arr = [
	{name: 'dilireba', age: 18}
]
arr.forEach((item, index, arr) => {
	arr[index] = {name: '张三', age: 20}
})
console.log(arr) // [{name: '张三', age: 20}]

总结

如果实在想用forEach修改原数组值，不要直接在item上去改，

而是借助于回调函数的第三个参数去修改。

中断遍历

forEach无法中断遍历

const arr = [1, 2, 3]
arr.forEach(item => {
	if(item === 2) {
		return false
	}
	console.log(item)
})

// 1  3

在中间已经返回false的情况下，依然会继续遍历，知道遍历完所有的值。

如果非要中断，可以抛出错误，throw Error('不满足条件，中断遍历')

但是这种情况一般用array的every或者some方法。

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖