javaScript变量在内存中的存储问题

最近在写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在内存中新建了一个数组，但是数组中的元素的地址指向并没有变化。

下面是堆栈图，有助于理解：

生成新数组对象模式.png

另一种情况是不生成新数组，直接赋值的方式，堆栈图如下：

直接赋值-两个变量指向同一个数组对象.png

关于javaScript值传递还是引用传递的问题可以看这篇文章：
JavaScript值传递 or 引用传递？