最近在写javaScript代码时,有个问题一直困恼着我
var arr1 = [{name: '小明'},{name: '李雷'}, {name: '陈多'}];
//var arr2 = arr1.map((person) => person)
var arr2 = [...arr1]
arr2[0].name = '大明'
console.log(arr1) //1、[ { name: '大明' }, { name: '李雷' }, { name: '陈多' } ]
arr2[1] = {age: 23}
console.log(arr1) //2、[ { name: '大明' }, { name: '李雷' }, { name: '陈多' } ]
console.log(arr2) //3、[ { name: '大明' }, { age: 23 }, { name: '陈多' } ]
arr2不是通过'...'或者map函数重新生成的一个数组对象吗?为什么改变新数组中的对象的属性,原始数组中的对象的属性也会改变呢?
通过画堆栈图,我发现原因只有一个:我们在对数组使用'...'或者map、filter来生成新数组时,虽然js在内存中新建了一个数组,但是数组中的元素的地址指向并没有变化。
下面是堆栈图,有助于理解:
另一种情况是不生成新数组,直接赋值的方式,堆栈图如下:
关于javaScript值传递还是引用传递的问题可以看这篇文章:
JavaScript值传递 or 引用传递?