如何利用 Array.prototype.fill() 配合 map() 创建一个填充了唯一对象引用的矩阵数组

如何利用 Array.prototype.fill() 配合 map() 创建一个填充了唯一对象引用的矩阵数组

直接使用 fill() 填充对象，再调用 map() 方法，往往无法得到我们预期的、包含独立对象引用的矩阵。原因在于，fill() 方法会将同一个对象引用复制到数组的每一个位置。要生成一个每个元素都是全新、独立对象的二维数组（也就是矩阵），关键操作必须在 map() 的回调函数内部完成——每次都创建一个新对象。

为什么 fill(obj).map(...) 不行？

来看一个典型的陷阱：Array(3).fill({x: 0})。这行代码确实创建了一个包含3个元素的数组，但所有元素都指向内存中同一个对象。这意味着，如果你后续修改其中任何一个元素（例如执行 arr[0].x = 1），所有其他位置的元素都会同步改变。这显然不是一个真正的矩阵，它只是同一个对象的多个别名而已。

正确做法：在 map 回调里构造新对象

正确的思路是，利用 Array(n) 创建指定长度的数组，然后通过 map() 进行遍历。关键在于，在 map() 的回调函数中，为每一项单独通过 new 关键字或对象字面量创建新对象，从而确保引用完全隔离。下面看几个具体例子：

• ✅ 基础二维矩阵（每个格子都是独立的空对象）：
  Array(3).fill().map(() => Array(4).fill().map(() => ({})))
• ✅ 带初始值的对象矩阵（例如包含行、列、ID信息）：
  Array(3).fill().map((_, i) => Array(4).fill().map((_, j) => ({ row: i, col: j, id: Symbol() })))
• ✅ 复用构造函数或工厂函数：
  

  const createCell = () => ({ value: null, dirty: false });
  Array(2).fill().map(() => Array(5).fill().map(createCell))

注意 fill() 的坑：不能省略 fill()

这里还有一个细节需要注意：Array(3).map(...) 这种写法，回调函数根本不会执行。为什么呢？因为 Array(n) 创建的是一个充满空位（empty slots）的数组，而不是填充了 undefined 元素的数组。而 map() 方法会跳过这些空位。因此，必须先用 fill()（哪怕只是填充 undefined）把这些空位“激活”成可遍历的实际元素，后续的 map() 才能正常生效。

替代写法：更直观的 Array.from

如果你觉得先 fill() 再 map() 的步骤有些繁琐，那么 Array.from 方法提供了一个更语义化、更直观的替代方案。它天生就能处理长度定义，无需预先填充：

• Array.from({length: 3}, () => Array.from({length: 4}, () => ({})))
• Array.from({length: 3}, (_, i) => Array.from({length: 4}, (_, j) => ({i, j})))

这种方法逻辑更清晰，一步到位，避免了因空位问题导致的意外行为，是实践中非常推荐的一种写法。