记录JS数组的fill()方法使用导致的问题

[Lirx-Xin]

问题描述

使用如下代码创建二维数组时，修改某个位置的值后，导致该值所在行的值全部变化

let arr = new Array(3).fill(new Array(3));
arr[0][0] = true;
// arr[1][0]、arr[2][0]的值都等于true

问题原因

可查看到MDN中对fill方法value参数的描述：

用来填充数组元素的值。注意所有数组中的元素都将是这个确定的值：如果 value 是个对象，那么数组的每一项都会引用这个元素。

总结

使用JS数组的fill方法对数组赋值引用对象时，注意引用对象可能对结果的影响，并进行调整，可使用如下方法：

let arr = new Array(3).fill(false).map(() => (new Array(false)))