怎样用 Array.prototype.fill 快速初始化一个带默认占位符的网格数据结构

Array.prototype.fill 不能直接创建二维数组，但可高效填充已存在的嵌套数组；需配合 Array.from 避免浅拷贝陷阱，正确初始化网格并支持局部填充、动态占位符及边界控制。

Array.prototype.fill 本身不能直接创建二维数组，但它非常适合在已存在的数组（尤其是嵌套数组）上批量填充默认值，配合 Array.from 或 Array(n).fill().map() 使用，就能高效初始化带占位符的网格。

先创建空网格，再用 fill 填充行或单元格

常见误区是直接对二维数组调用 fill——这会导致所有行引用同一子数组。正确做法是：先生成独立的行数组，再对每行单独 fill，或对每个单元格赋值。

• 生成 3×4 网格（3 行、4 列），每格初始为 null：
  const grid = Array.from({ length: 3 }, () => Array(4).fill(null));
• 如果想用 fill 替换某一行全部值（比如第 1 行设为 'X'）：
  grid[1].fill('X');
• 若需整张网格统一填某个值（如 0），仍要避免浅拷贝陷阱：
  const grid = Array.from({ length: 3 }, () => Array(4).fill(0)); ✅
  Array(3).fill(Array(4).fill(0)) ❌（三行共用一个数组）

用 fill 配合 map 实现带逻辑的占位符

当占位符需要按位置动态生成（如坐标字符串 'r0c0'），可在 map 中结合 fill 或直接构造：

• 生成带行列索引的网格：
  const grid = Array.from({ length: 2 }, (_, i) =>
    Array.from({ length: 3 }, (_, j) => `r${i}c${j}`)
  );
  // → [['r0c0','r0c1','r0c2'], ['r1c0','r1c1','r1c2']]
• 若先建空网格，再按需 fill 某些区域（如第一列全设为 'header'）：
  grid.forEach(row => row[0] = 'header');（非 fill，但更精准）
  或批量 fill 多列：
  grid.forEach(row => row.fill('default', 1, 3)); // 第1~2列填'default'

注意 fill 的参数边界与不可变性

fill(value, start, end) 的 end 是**不包含**的，且索引从 0 开始；它修改原数组，不返回新数组。这对网格局部初始化很实用：

• 只填充第 0 行的前两个单元格：
  grid[0].fill('★', 0, 2);
• 清空中间一列（第 1 列）的所有值：
  grid.forEach(row => row.fill(undefined, 1, 2));
• fill 不会触发 setter，也不影响数组长度，适合轻量重置。

替代方案对比：何时不用 fill

如果网格结构复杂（如每行长度不同）、需深度克隆，或占位符依赖异步数据，fill 就不够用。此时优先用 Array.from + 回调，或封装初始化函数：

• 不规则网格（每行列数不同）：
  const jagged = [[1], [2,3], [4,5,6]].map(row => row.fill(0));
• 需要深拷贝默认对象时（避免引用共享）：
  const grid = Array.from({ length: 2 }, () =>
    Array.from({ length: 2 }, () => ({ id: Date.now(), active: false }))
  );（不用 fill，改用 map 构造新对象）