JS 中 forEach 究竟能不能改变数组的值?,让我们一探究竟。
1、基本数据类型 -> 死都改不动原数组!
const array = [1, 2, 3, 4]; array.forEach(ele => { ele = ele * 3 }) console.log(array); // [1,2,3,4]
2、引用类型 -> 类似对象数组可以改变
const objArr = [{ name: 'wxw', age: 22 }, { name: 'wxw2', age: 33 }] objArr.forEach(ele => { if (ele.name === 'wxw2') { ele.age = 88 } }) console.log(objArr); // [{name: "wxw", age: 22},{name: "wxw2", age: 88}]
3、那引用类型 -> 改变整个单次循环的 item? ->不行
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}]
4、终极方法!
// 基本类型 const numArr = [33,4,55]; numArr.forEach((ele, index, arr) => { if (ele === 33) { arr[index] = 999 } }) console.log(numArr); // [999, 4, 55] // 引用类型 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}]
总结
基本类型我们当次循环拿到的ele
,只是forEach
给我们在另一个地方复制创建新元素,是和原数组这个元素没有半毛钱联系的!所以,我们使命给循环拿到的ele
赋值都是无用功!
专业的概念说就是:JavaScript
是有基本数据类型与引用数据类型之分的。对于基本数据类型:number
,string
,Boolean
,null
,undefined
它们在栈内存中直接存储变量与值。而Object
对象的真正的数据是保存在堆内存,栈内只保存了对象的变量以及对应的堆的地址,所以操作Object
其实就是直接操作了原数组对象本身。
forEach
的基本原理也是for 循环
,使用arr[index]
的形式赋值改变,无论什么就都可以改变了。