如何根据特定条件动态填充一个二维数组的方法有哪些？

本文共计680个文字，预计阅读时间需要3分钟。

在JavaScript中，构建支持编程填充逻辑的二维数组可以通过以下步骤实现：

在构建程序化地图（如 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 渲染（如示例中的 <table> 插入逻辑），实现“数据驱动视图”的清晰分离。掌握此模式后，你不仅能生成随机地图，还能轻松扩展为迷宫生成、生命游戏、热力图等高级应用。