JS怎么定义不规则的锯齿状二维数组

一、理解核心原理：为什么 JS 天然支持锯齿数组？

在 C 或 Java 等强类型语言中，二维数组通常要求严格的矩阵形态（如 int[3][4]），所有行在初始化时就必须具备相同的列数。而在 JavaScript 中，数组属于动态对象。多维数组并没有专用的内建类型，而是通过将一个 Array 实例作为另一个 Array 实例的元素来实现。

这意味着外层数组的每一个槽位，存放的只是指向堆内存中独立子数组的引用地址。因为各个子数组是各自独立分配的，它们的长度（length 属性）互不干涉，不需要保持对齐。这种特性使得 JavaScript 天然就支持不规则的锯齿状结构，无论是阶梯型、倒金字塔型，还是根据业务动态伸缩的分组，都能自然表达。

二、方法一：字面量直接定义（适用已知固定数据）

当数据在编码阶段就已经明确且不需要动态计算时，使用数组字面量 [] 是最直接、最易读的定义方式。外层中括号包裹多个由逗号分隔的内层中括号，每个内层数组写入对应数量的元素即可。

// 定义一个典型的阶梯状锯齿数组（例如杨辉三角的前 4 行）
const jaggedArray = [
  [1],             // 第 0 行：长度为 1
  [1, 1],          // 第 1 行：长度为 2
  [1, 2, 1],       // 第 2 行：长度为 3
  [1, 3, 3, 1]     // 第 3 行：长度为 4
];

// 查看各行实际长度
console.log(jaggedArray[0].length); // 输出: 1
console.log(jaggedArray[1].length); // 输出: 2
console.log(jaggedArray[3].length); // 输出: 4

// 读取特定元素：语法与常规矩阵相同
console.log(jaggedArray[2][1]); // 输出: 2
console.log(jaggedArray[3][2]); // 输出: 3

在字面量定义中，每一行的元素类型甚至不需要一致。例如第 0 行存放数字，第 1 行存放字符串。不过在生产代码中，为了保持数据处理逻辑的稳定性，建议同一数组内保持数据类型的契约一致。

三、方法二：动态构建锯齿数组的标准步骤

实际开发中，锯齿数组往往依赖外部数据或算法动态生成（例如根据用户权限划分的动态菜单、图论算法中的邻接表、按日期聚合的任务列表等）。动态构建需要遵循以下规范流程：

1. 经典 for 循环递增构建

先声明一个空的外层数组，在遍历行索引时，为每一行独立创建一个长度不同的子数组，再将其推入（push）外层数组或通过索引赋值：

function createJaggedArray(rowCount) {
  const result = [];

  for (let i = 0; i < rowCount; i++) {
    // 规定当前行的长度（例如第 0 行长 1，第 1 行长 3，第 2 行长 2...）
    const rowLength = (i * 2 + 1); // 示例：奇数长度阶梯
    
    // 关键：为当前行实例化一个全新的独立数组
    result[i] = new Array(rowLength);

    // 填充当前行元素
    for (let j = 0; j < rowLength; j++) {
      result[i][j] = `行${i}-列${j}`;
    }
  }

  return result;
}

const myJagged = createJaggedArray(3);
// 打印各行长度：[1, 3, 5]
console.log(myJagged.map(row => row.length));

2. 使用 Array.from 声明式一行生成

现代 JavaScript（ES6+）推荐使用 Array.from() 配合映射函数，代码更加精炼且不容易出错：

// 动态生成一个 4 行、每行长度等于 (i + 1) 的阶梯锯齿数组，默认填充 0
const stepArray = Array.from({ length: 4 }, (_, rowIndex) => {
  const length = rowIndex + 1;
  return new Array(length).fill(0);
});

// 结果：[[0], [0, 0], [0, 0, 0], [0, 0, 0, 0]]
console.log(stepArray);

四、避坑指南：千万不要使用 new Array(n).fill([])

这是初学者在定义锯齿或二维数组时极容易遭遇的“隐蔽陷阱”。很多开发者会写出下面这种代码试图初始化空二维数组：

// ❌ 极度危险的错误写法！
const badMatrix = new Array(3).fill([]);

// 此时表面上看是 [[], [], []]
// 现在尝试向第 0 行添加一个数据：
badMatrix[0].push(99);

// 打印整个数组：
console.log(badMatrix);
// 实际输出: [ [99], [99], [99] ]  <-- 所有行都被同步修改了！

正确替代方案：必须确保每次循环或映射都调用一次构造器，生成崭新的数组对象：

// ✔ 正确方案 1：Array.from 第二个参数作为生成器，每次返回全新 []
const safeJagged1 = Array.from({ length: 3 }, () => []);

// ✔ 正确方案 2：使用 map 之前用 fill(null) 占位
const safeJagged2 = new Array(3).fill(null).map(() => []);

safeJagged1[0].push(99);
console.log(safeJagged1); // 输出: [ [99], [], [] ]，互不干扰！

五、锯齿数组的安全遍历与边界防范

由于各行长度参差不齐，处理锯齿数组时绝不能使用固定的列数常量进行循环，否则会导致空指针异常或读取到 undefined。

1. 双重传统 for 循环：内层必须绑定当前行的 length

const jagged = [
  ["A", "B"],
  ["C"],
  ["D", "E", "F"]
];

for (let i = 0; i < jagged.length; i++) {
  // 必须使用 jagged[i].length，动态适应当前行
  for (let j = 0; j < jagged[i].length; j++) {
    console.log(`[${i}][${j}] = ${jagged[i][j]}`);
  }
}

2. 现代 for...of 与 forEach 迭代

如果不需要关心数字下标，直接使用 for...of 是最安全且优雅的选择，天然免疫越界问题：

for (const row of jagged) {
  for (const item of row) {
    // 逐项处理，长行多循环，短行少循环
    process(item);
  }
}

3. 可选链操作符（?.）防范意外越界

在业务查询中，如果不确定目标行是否存在、或者目标列是否超出行长，使用可选链 ?. 可以避免程序抛出 TypeError: Cannot read properties of undefined：

// 假设要读取第 1 行第 5 列（超出该行边界）以及第 9 行（超出总行数）
const value1 = jagged[1]?.[5]; // 安全返回 undefined，不报错
const value2 = jagged[9]?.[0]; // 安全返回 undefined，不报错

// 配合空值合并运算符（??）设置默认回退值
const finalVal = jagged[1]?.[5] ?? "默认占位符";
console.log(finalVal); // 输出: "默认占位符"

六、经典实战场景与选型总结

不规则锯齿数组在算法与实际工程中有着明确的适用场景：

• 图论算法的邻接表（Adjacency List）：在一个稀疏图中，每个顶点的出度（连接的邻居数量）完全不同。如果用 $N imes N$ 的常规矩阵存储会浪费大量空间，使用锯齿数组只需为各节点分配实际邻居个数的内存。
• 分组聚合统计（Bucket Grouping）：例如将商品按照评分星级（1星至5星）归类，每个星级的商品数量各异，用锯齿数组分组非常自然。
• 下三角/上三角矩阵计算：例如距离矩阵对称计算、动态规划中的阶梯状态转移，仅需分配有效的一半空间。

总结而言，在 JavaScript 中定义不规则锯齿状二维数组并没有特殊阻碍，核心是牢记“数组的数组”这一本质。只要在动态分配时避开 fill([]) 的对象引用陷阱，并在遍历与访问时始终以 current_row.length 或可选链为准，就能在各种复杂业务场景中稳健、高效地运用锯齿数组。