js数组初始化时 fill 填充的小bug

最新推荐文章于 2024-04-11 14:33:32 发布

原创最新推荐文章于 2024-04-11 14:33:32 发布 · 960 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

Web 专栏收录该内容

6 篇文章

订阅专栏

本文通过一个JavaScript数组初始化的例子，揭示了使用new Array(n).fill([])与直接定义[[],[],[]]的区别，解释了前者会产生引用同一对象的问题及如何避免。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数组初始化代码如下：

const arr = new Array(3).fill([])
const arr2 = [[],[],[]]

console.log(JSON.stringify(arr)) //输出：[[],[],[]]
console.log(JSON.stringify(arr2)) //输出：[[],[],[]]
console.log(arr==arr2) //输出 false !! 明明stringify打印出来的内容都一样，为何这里却不等？

var arrIndex = 0
arr[arrIndex].push(123)
arr2[arrIndex].push(123)
console.log(JSON.stringify(arr)) //输出[[123],[123],[123]]，为什么每一个元素都添加了123？
console.log(JSON.stringify(arr2)) //输出[[123],[],[]]，这才是预期

console.log(arr) //输出[[123], [circular object Array], [circular object Array]]，这是什么？引起怀疑
console.log(arr2) //输出[[123], [], []]，这是预期

原本以为如下两种数组的初始化结果是相同的：

const arr = new Array(3).fill([])
const arr2 = [[],[],[]]

原来不是。第一种方式其实是：

const emptyArray = new Array([]) //这里只生成了一个对象
const arr = new Array(3).fill(emptyArray) //这里反复用同一个对象填充新生成数组的三个元素

实际结果：[emptyArray, emptyArray, emptyArray]

第二种方式是：

const arr2 = [emptyArray, emptyArray_2, emptyArray_3] //这才是我们原本期望的

结论和提醒：
[]也是一个对象
Stringify相同，并不能说明两个对象相同，有可能两个对象其实是一个