本文介绍在 javascript 中构建可编程填充逻辑的二维数组，通过传入回调函数替代静态默认值，使每个元素能根据行列索引（x, y）动态生成，适用于地图生成、网格渲染等场景。
本文介绍在 javascript 中构建可编程填充逻辑的二维数组，通过传入回调函数替代静态默认值，使每个元素能根据行列索引（x, y）动态生成，适用于地图生成、网格渲染等场景。
在构建程序化地图（如 32×32 游戏网格）时，静态填充（如全部设为 "✔️"）往往不够灵活——我们常需按坐标规则设置地形：例如中心留出 3×3 可通行空白区、边缘设为障碍物、或实现棋盘格/对角线/环形等模式。此时，将 defaultValue 升级为 defaultFunc 是关键解法。
核心思路是：利用 Array.from() 的第二个参数（映射函数）自动接收当前索引。原版 Array.from({ length: n }, () => value) 中的箭头函数不带参数，只能返回固定值；而改用 Array.from({ length: n }, (_, i) => fn(i)) 后，即可将行号 row 和列号 col 透传给自定义逻辑：
function createAndFillTwoDArray({ rows, columns, defaultFunc }) {
return Array.from(
{ length: rows },
(_, row) => Array.from(
{ length: columns },
(_, col) => defaultFunc(row, col)
)
);
}该函数支持任意基于坐标的判断逻辑。例如：
-
✅ 创建主对角线为空、其余为 "✔️" 的地图：
const values = createAndFillTwoDArray({ rows: 32, columns: 32, defaultFunc: (x, y) => x === y ? "" : "✔️" }); -
✅ 保证中心 3×3 区域恒为可通行（""），其余随机混合 "✔️" 与 "❌"：
const values = createAndFillTwoDArray({ rows: 32, columns: 32, defaultFunc: (x, y) => { const centerX = 15, centerY = 15; // 32×32 的近似中心 if (Math.abs(x - centerX) <= 1 && Math.abs(y - centerY) <= 1) { return ""; // 3×3 空白区 } return Math.random() > 0.7 ? "❌" : "✔️"; // 其余区域随机 } });
⚠️ 注意事项：
- 避免在 defaultFunc 中直接修改外部数组（如 arr[i][j] = ...），因其在构造阶段不可访问——所有逻辑应通过返回值声明式表达；
- 若需复用复杂条件，建议将 defaultFunc 提取为独立函数，提升可读性与可测试性；
- Array.from 的映射函数中，第一个参数是当前项（此处忽略用 _），第二个才是索引，务必确认参数顺序；
- 对于超大网格（如 1000×1000），注意浏览器性能，可考虑分块渲染或 Web Worker。
最终，该二维数组可无缝对接 DOM 渲染（如示例中的
