为何数组直接赋值与扩展运算符复制后Chrome控制台输出不同？

在Ubuntu 22.04.1 LTS（Gnome环境）的Chrome 104.0.5112.101中，执行两段数组赋值代码后出现的控制台显示差异，本质是赋值逻辑不同+Chrome DevTools的显示策略导致的：

两段代码的本质区别 #

第一段代码（引用赋值）：

let arrTest = [1,2,3,4]
let arr = arrTest
console.log(arr)

• arr只是arrTest的别名，二者指向内存中同一个数组对象，没有创建新的数组实例。

第二段代码（创建新数组）：

let arrTest = [1,2,3,4]
let arr = [...arrTest]
console.log(arr)

• 扩展运算符[...arrTest]会生成一个全新的数组对象，并将原数组的元素浅拷贝到新数组中，arr和arrTest是两个独立的对象。

Chrome DevTools的显示策略 #

Chrome控制台对数组的显示方式会根据实例的创建来源做区分：

• 对于直接引用原数组实例（未通过字面量、拷贝等方式生成新实例）的情况，控制台默认显示构造函数式的标识Array(4)，需要点击展开才能查看具体元素。
• 对于通过扩展运算符（等价于数组字面量[1,2,3,4]的创建逻辑）生成的新数组，控制台会直接展示数组的元素内容，同时标注数组长度(4)。

验证方法 #

你可以在控制台执行以下代码确认：

// 验证第一段代码的对象同一性
let arrTest1 = [1,2,3,4]
let arr1 = arrTest1
console.log(arr1 === arrTest1) // 输出true，说明是同一个对象

// 验证第二段代码的对象独立性
let arrTest2 = [1,2,3,4]
let arr2 = [...arrTest2]
console.log(arr2 === arrTest2) // 输出false，说明是不同对象

// 验证元素内容一致
console.log(arr1.toString()) // 输出"1,2,3,4"
console.log(arr2.toString()) // 输出"1,2,3,4"

内容的提问来源于stack exchange，提问作者WuzerHaun