JavaScript使用Array.fill填充数组为何得到6个长度为6的数组而非单元素数组？

核心bug出在数组初始化的fill()调用逻辑：

• fill()方法传入原始类型值（数字、字符串、布尔值等）时会直接拷贝值填充，但传入引用类型值（数组、对象等）时，只会填充该值的内存引用，不会创建独立副本。你写的Array(n + 1).fill([])执行后，外层数组的6个元素全部指向内存中同一个空数组，并非6个相互独立的空数组。
• 后续调用arr.map(transform)遍历时，每次回调拿到的el都是那个被共享的数组，6次push操作全部是往同一个数组里追加元素，遍历结束后这个共享数组里会存下[1, 2, 4, 8, 16, 32]共6个元素。由于外层数组所有位置都指向这同一个数组，最终打印结果就是6个长度为6的数组，和预期不符。

不要直接用fill()填充数组这类引用类型，初始化时为每个索引位置生成独立的空数组即可，两种可直接运行的实现：

• 保留原有push逻辑的兼容写法

let n = 5;
// fill不传参时填充undefined，再通过map为每个位置创建独立空数组
let arr = Array(n + 1).fill().map(() => []);
const transform = function (el, i) {
  el.push(2 ** i);
};
arr.map(transform);
console.log(arr); // 输出 [[1], [2], [4], [8], [16], [32]]

• 更简洁的直接生成写法，无需额外push操作

let n = 5;
const arr = Array.from({ length: n + 1 }, (_, i) => [2 ** i]);
console.log(arr); // 输出 [[1], [2], [4], [8], [16], [32]]

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