JS怎么定义静态二维数组

图 0：静态二维数组的代码表现与坐标索引映射示意图

一、明确“静态二维数组”在 JS 中的本质

在许多静态类型语言（如 C/C++ 或 Java）中，静态二维数组通常拥有连续的内存布局并在编译期分配固定空间。然而，JavaScript 并没有提供名为 Matrix 的原生底层类型，其二维数组本质上是“数组的数组”（Array of Arrays），属于一种交错数组（Jagged Array）。

在实际的前端与 Node.js 业务中，当我们提到“静态二维数组”，通常包含两层工程诉求：

• 规格静态：数组在声明时就已经具有确定的行数（Row）与列数（Column），结构规整，不随业务逻辑随意 push 或 pop 动态扩容。
• 内容静态：作为常量配置、棋盘初始网格、查找表或预设矩阵使用，其元素值固定，禁止在运行时被意外重写。

图 1：JavaScript 二维数组在内存中的双层引用模型

二、方法一：字面量直接定义（已知数据的最佳实践）

当二维数组在编写代码时就已经确定所有元素的初始值（例如数学变换矩阵、游戏地图碰撞网格、星期与班次对照表等），使用嵌套数组字面量是最清晰、执行开销最低的方法。

// 定义一个 3x3 的静态单位矩阵
const IDENTITY_MATRIX = [
  [1, 0, 0],
  [0, 1, 0],
  [0, 0, 1]
];

// 访问元素：matrix[row][col]
console.log(IDENTITY_MATRIX[0][0]); // 示例输出: 1
console.log(IDENTITY_MATRIX[1][2]); // 示例输出: 0

特点与约束：这种方式可读性强，格式与数学二维表格完全一致。但必须注意，仅仅使用 const 声明并不能阻止代码修改数组内部的数据。例如执行 IDENTITY_MATRIX[0][0] = 9 仍然会修改成功。因此如果需要只读保障，必须配合下文的冻结技术。

三、方法二：动态初始化固定维度的静态数组（预设规格与初值）

当矩阵的规模较大（例如 100x100）或者只需要预填充默认占位符（如全部填充 0 或 null）时，手工书写字面量并不现实。此时需要通过代码构造一个固定长宽的二维数组。

1. 正确做法：使用 Array.from() 构建独立行

最标准且安全的工厂方法是结合 Array.from() 及其映射回调：

function createStatic2DArray(rows, cols, initialValue = 0) {
  // 外层生成 rows 个元素，每次迭代调用回调函数创建全新的内层数组
  return Array.from({ length: rows }, () => 
    new Array(cols).fill(initialValue)
  );
}

// 实例化一个 3 行 4 列全 0 矩阵
const grid = createStatic2DArray(3, 4, 0);
console.log(grid);
/* 示例输出:
[
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0]
]
*/

图 2：静态二维数组的定义与安全固化步骤

四、避坑关键：为什么不能用 new Array().fill(new Array())

初学者在定义静态二维数组时，最常见的一个严重陷阱是试图通过链式 fill() 快速初始化。请看以下代码：

// ⚠️ 危险写法：切勿在生产环境中使用！
const buggyMatrix = new Array(3).fill(new Array(3).fill(0));

// 试图修改第 0 行第 1 列的值
buggyMatrix[0][1] = 99;

console.log(buggyMatrix);
/* 意料之外的输出结果：所有的行第 1 列都变成了 99！
[
  [0, 99, 0],
  [0, 99, 0],
  [0, 99, 0]
]
*/

图 3：Array.prototype.fill 内存共享陷阱与正确隔离机制对比

五、方法三：利用 Object.freeze 强化为真正“只读”的静态数组

在严格的业务开发或库封装中，如果某个二维数组属于“配置常量”或“基准只读字典”，我们不仅希望其行列规整，更要求任何代码都无法向其添加新行、删除已有行或篡改内部数值。

需要注意，Object.freeze() 默认只是浅冻结（Shallow Freeze）。若仅对最外层数组调用 Object.freeze(matrix)，只能保证行数不被增删，但仍然可以执行 matrix[0][0] = 123。为了实现真正的静态二维数组，必须进行深度冻结。

/**
 * 递归深度冻结对象/二维数组
 */
function deepFreeze(object) {
  // 获取当前层级所有属性名
  const propNames = Reflect.ownKeys(object);

  // 递归冻结所有子属性/子数组
  for (const name of propNames) {
    const value = object[name];
    if ((typeof value === "object" && value !== null) || typeof value === "function") {
      deepFreeze(value);
    }
  }

  // 冻结自身
  return Object.freeze(object);
}

// 定义并深度冻结一个不可变二维数组
const IMMUTABLE_GRID = deepFreeze([
  [10, 20],
  [30, 40]
]);

// 尝试篡改（严格模式下直接抛出 TypeError 异常；非严格模式下静默失效）
try {
  IMMUTABLE_GRID[0][0] = 999;
} catch (err) {
  console.log("修改被拦截:", err.message);
  // 示例输出: 修改被拦截: Cannot assign to read only property '0' of object '[object Array]'
}

console.log(IMMUTABLE_GRID[0][0]); // 示例输出: 10（数值坚挺不变）

六、静态二维数组的遍历与越界防护

在访问静态二维数组时，必须遵循 JavaScript 数组特有的越界行为：如果行索引超出范围，matrix[outOfBoundRow] 将返回 undefined，紧随其后的 [col] 就会直接抛出经典的 TypeError: Cannot read properties of undefined。

1. 安全读取封装

function safeGet(matrix, row, col, fallback = undefined) {
  // 可选链?. 操作符优雅防止运行时异常崩溃
  return matrix?.[row]?.[col] ?? fallback;
}

const data = [[1, 2], [3, 4]];
console.log(safeGet(data, 5, 5, "无此坐标")); // 示例输出: "无此坐标"

2. 行优先遍历与列优先遍历

遍历静态二维数组最直观的写法是标准的双重嵌套循环。由于 JavaScript 数组在内存中是按行存储子数组引用，采用行优先遍历（Row-major order）符合引用局部性，性能更优：

const table = [
  ["A", "B"],
  ["C", "D"]
];

// 行优先遍历
for (let r = 0; r < table.length; r++) {
  for (let c = 0; c < table[r].length; c++) {
    console.log(`坐标 (${r}, ${c}) => ${table[r][c]}`);
  }
}

七、定义方式横向对比与技术选型

根据具体开发场景，选择最适合的静态二维数组定义手段至关重要：

图 4：JavaScript 静态二维数组全景知识与决策模型

八、总结

在 JavaScript 中定义静态二维数组，应当根据具体的数据来源与安全等级进行针对性选择。如果初始数据明确且规模较小，优先采用嵌套数组字面量直接声明；如果需要构建固定规格的默认网格，必须使用 Array.from({ length: rows }, () => new Array(cols).fill(initialValue))，确保每一行具有独立的内存堆地址；如果该矩阵作为全局常量或核心配置，则应当通过递归 Object.freeze() 实行深度冻结，从根本上防止运行时对维度与数据的意外篡改。