如何在 JavaScript 中声明二维空数组：从基础到进阶的完整指南

在 JavaScript 的开发旅程中，我们经常需要处理复杂的数据结构。其中，二维数组（2D Array）是一个非常强大的工具，它可以用来表示矩阵、网格数据，甚至是游戏中的地图状态。然而，与 C++ 或 Java 等语言不同，JavaScript 并没有原生的“二维数组”数据类型。这就引出了一个初学者乃至有经验的开发者都会遇到的问题：我们如何在 JavaScript 中正确、高效地声明并初始化一个二维空数组？

在本文中，我们将深入探讨这一主题。你将不仅学到基础的声明方法，还会了解其中的“陷阱”以及如何利用现代 JavaScript 特性写出更优雅的代码。我们将从循环这种最原始但也最直观的方法开始，逐步过渡到函数式编程的技巧，最后讨论性能优化和最佳实践。

为什么这比看起来要难？

在你急于写代码之前，我们需要先理解一个核心概念。在 JavaScript 中，二维数组实际上是“数组的数组”。这意味着我们有一个外层数组，其中的每一个元素本身又是一个数组。

如果你习惯于直接声明一个“空”的二维容器，你可能会遇到引用复制的问题。别担心，我们稍后会详细解决这个问题。现在，让我们从最基础的方法开始探索。

方法 1：使用传统循环（最直观的方法）

这是我们大多数人学习数组时最先接触的方法。它的逻辑非常清晰：我们需要创建一个外层循环来控制“行”，然后为每一行创建一个内层数组，如果需要预填充数据，再用内层循环控制“列”。

基础实现

假设我们需要一个 3行 4列 的空数组，我们可以这样做：

/**
 * 使用循环创建一个指定行数和列数的二维数组
 * @param {number} rows - 行数
 * @param {number} cols - 列数
 * @returns {Array[]} 二维数组
 */
function create2DArray(rows, cols) {
    const array = []; // 初始化外层数组
    
    // 遍历行
    for (let i = 0; i < rows; i++) {
        array[i] = []; // 为当前行创建一个空数组
        
        // 遍历列（如果我们想要预填充值，比如 null）
        for (let j = 0; j < cols; j++) {
            array[i][j] = null; // 将每个单元格初始化为 null
        }
    }
    
    return array;
}

const arr1 = create2DArray(3, 4);
console.log(arr1);

输出结果：

[
  [ null, null, null, null ],
  [ null, null, null, null ],
  [ null, null, null, null ]
]

代码深度解析

这种方法的核心在于 array[i] = []。这一步确保了每一行都是内存中一个独立的数组对象。如果你省略内层循环，你将得到一个“稀疏数组”或者仅仅是一个包含空数组的数组，具体取决于实现。

#### 实际应用场景：创建井字棋盘

让我们看一个更实际的例子。假设你正在开发一个简单的井字棋游戏，需要一个 3×3 的棋盘，初始状态下所有格子都应该是空的（用 null 表示）。

const BOARD_SIZE = 3;
let gameBoard = [];

for (let r = 0; r < BOARD_SIZE; r++) {
    gameBoard[r] = [];
    for (let c = 0; c < BOARD_SIZE; c++) {
        gameBoard[r][c] = null; // null 代表此处尚未落子
    }
}

// 模拟玩家 1 在中间位置落子 'X'
gameBoard[1][1] = 'X';

console.log(gameBoard);

输出：

[
  [ null, null, null ],
  [ null, ‘X‘,   null ],
  [ null, null, null ]
]

这种方法虽然代码量稍多，但它赋予了我们对每一个单元格的完全控制权，逻辑非常清晰，非常适合初学者理解数据结构。

方法 2：使用 Array() 构造函数与 Array.from（现代写法）

随着 ES6 (ECMAScript 2015) 的普及，我们可以使用更简洁、函数式的语法来达到同样的目的。这种方法利用了 Array.from 方法和数组映射的概念。

理解 Array.from

Array.from 允许我们从一个类似数组的对象或可迭代对象创建一个新的数组实例。它的强大之处在于，我们可以传入一个映射函数作为第二个参数，这就像是在创建数组的同时对每个元素进行初始化。

基础实现

我们可以创建一个长度为 INLINECODE3746aefd 的数组，并将每个元素映射为一个长度为 INLINECODEb34867b5 的新数组。

/**
 * 使用 Array.from 创建二维数组
 * 这种方法更简洁，利用了箭头函数的特性
 */
function createModern2DArray(rows, cols) {
    // 创建一个有 ‘rows‘ 个元素的数组
    // 每个元素都是一个新创建的长度为 ‘cols‘ 的数组，并填充 null
    return Array.from({ length: rows }, () => Array(cols).fill(null));
}

const arr2 = createModern2DArray(3, 5);
console.log(arr2);

输出结果：

[
  [ null, null, null, null, null ],
  [ null, null, null, null, null ],
  [ null, null, null, null, null ]
]

关键技术点：箭头函数的妙用

请注意代码中的 () => ... 部分。这是一个箭头函数。这是一个非常关键的细节。

• 正确做法：() => Array(cols).fill(null)
• 错误做法：Array(cols).fill(null) (直接传入)

如果你直接传入一个数组引用而不是一个函数，你创建的所有行将指向内存中同一个数组。这意味着，当你修改第一行第一列的数据时，最后一行第一列的数据也会跟着改变！这是一个经典的 JavaScript 陷阱。通过使用箭头函数 () => ...，我们确保了每次迭代都会重新执行函数体，从而在内存中为每一行创建一个全新的、独立的数组对象。

#### 进阶示例：初始化带有坐标信息的网格

有时候，我们不仅需要一个空数组，还希望在初始化时就知道每个格子的坐标 (x, y)。Array.from 的映射函数非常适合做这件事。

const rows = 3;
const cols = 3;

// 不仅仅填充 null，而是填充包含坐标信息的对象
const grid = Array.from({ length: rows }, (_, rowIndex) => {
    return Array.from({ length: cols }, (_, colIndex) => {
        return {
            r: rowIndex,
            c: colIndex,
            value: 0 // 初始值为 0
        };
    });
});

console.log(grid[1][2]); // 输出第 2 行第 3 列的对象

输出：

{ r: 1, c: 2, value: 0 }

这种方法展示了 Array.from 在处理更复杂的初始化逻辑时的灵活性。

方法 3：使用 Array.fill 的链式调用（极简写法）

除了上述方法，我们还可以结合使用 INLINECODE448f429f 构造函数和 INLINECODE0537879b 方法。这是一种非常简练的写法，常见于现代 JavaScript 代码库中。

基础实现

我们可以先创建一个指定长度的外层数组，将其“填充”为一个空数组（或者是创建数组的函数），然后对每一行再进行填充。不过，为了安全起见，我们通常会结合 map 使用，或者小心处理引用问题。

让我们看一种安全且简洁的实现方式，非常适合创建值为 INLINECODE4a171013 或 INLINECODE8e2ff750 的基础网格。

let rows = 3;
let cols = 4;
let initialValue = undefined;

// 这里再次使用 Array.from，因为它是处理二维结构最安全的现代方式
// .fill(initialValue) 用于填充内层数组的具体值
let arr = Array.from({ length: rows }, () => Array(cols).fill(initialValue));

console.log(arr);

输出结果：

[
  [ undefined, undefined, undefined, undefined ],
  [ undefined, undefined, undefined, undefined ],
  [ undefined, undefined, undefined, undefined ]
]

填充默认值的不同场景

你可以灵活地改变 initialValue。比如，如果你正在做一个图像处理应用，可能需要初始化一个像素矩阵（全0），或者一个逻辑矩阵（全 false）。

// 初始化一个 5x5 的全 0 矩阵（模拟黑色图片）
const pixelMatrix = Array.from({ length: 5 }, () => Array(5).fill(0));

// 初始化一个 4x4 的布尔值矩阵
const boolMatrix = Array.from({ length: 4 }, () => Array(4).fill(true));

console.log("像素矩阵第一行:", pixelMatrix[0]);
console.log("布尔矩阵第一行:", boolMatrix[0]);

常见陷阱与解决方案（避坑指南）

既然我们已经学习了不同的方法，现在让我们来谈谈最容易犯的错误。即使是有经验的开发者，如果不够细心，也会掉进这个坑里。

引用复制的陷阱

正如我们在方法 2 中提到的，这是最大的陷阱。让我们演示一下错误的做法会发生什么。

// ❌ 错误的示范：直接使用 fill 填充同一个数组对象
const rows = 3;
const cols = 4;

// 这里的 new Array(cols) 只在内存中创建了一次！
const badArray = Array(rows).fill(new Array(cols)); 

// 修改第一行第一列
badArray[0][0] = "修改了这里";

// 检查第二行第一列
console.log(badArray[1][0]); 
// 输出: "修改了这里" -> 糟糕！所有行都被同步修改了！

为什么会这样？

当你使用 .fill() 并传入一个对象（数组也是对象）时，JavaScript 是按引用传递的。它并不会复制那个对象，而是让每一个位置都指向内存中那个唯一的对象地址。当你修改其中一个时，由于它们指向同一个地址，所有的看起来都被修改了。

解决方案：永远使用 INLINECODE28dddb79 配合箭头函数，或者显式地在循环中使用 INLINECODE17734e35，以确保每一行都是 new 出来的。

性能优化与最佳实践

在处理大型数据集（例如 1000×1000 的矩阵）时，初始化的性能就变得至关重要了。

• 预分配内存：虽然 JavaScript 引擎（如 V8）非常聪明，能够自动优化数组的扩容，但在已知维度的情况下，直接指定长度通常比动态 push 更快。上述方法（循环、Array.from）都做到了这一点。

• 避免过度嵌套：如果你的数组维度超过 2 维（例如 3D 或 4D），请务必小心。深层数组的初始化和访问成本会显著增加。在极端性能敏感的场景下，考虑使用一维数组配合数学计算来模拟多维数组（例如 index = y * width + x）。

• 代码可读性 > 微小的性能差异：在现代 JS 引擎下，INLINECODEd1423679 循环和 INLINECODE832d3ecb 的性能差异通常可以忽略不计，除非你在处理每秒数百万次的操作。选择最易读、最易维护的方法。

总结：你应该选择哪种方法？

让我们回顾一下我们在文章中学到的内容。我们探讨了三种主要方法：

• 循环嵌套法：最基础，最通用，兼容性最好，逻辑最清晰。适合初学者或需要复杂初始化逻辑的场景。
• Array.from()：现代，简洁，优雅。利用箭头函数避免了引用陷阱，是目前推荐的写法。
• 构造函数与 fill：极简，但如果不小心容易出错。通常建议与方法 2 结合使用。

现在，当你需要在项目中声明一个二维空数组时，你可以根据项目的技术栈和你的个人偏好做出明智的选择。对于大多数现代 Web 开发场景，我强烈推荐你使用 方法 2，因为它既简洁又安全。

希望这篇指南能帮助你更好地掌握 JavaScript 数组操作。继续编码，继续探索！

实用代码片段速查表

最后，这里有一个你可以直接复制粘贴的工具函数库，涵盖了我们在讨论中提到的常见需求：

const Array2D = {
    // 创建一个二维空数组（填充 null）
    create: (rows, cols) => Array.from({ length: rows }, () => Array(cols).fill(null)),

    // 创建一个二维数组，填充随机值
    random: (rows, cols, max = 100) => Array.from({ length: rows }, 
        () => Array.from({ length: cols }, () => Math.floor(Math.random() * max))
    ),

    // 创建一个二维数组，填充 0
    zeros: (rows, cols) => Array.from({ length: rows }, () => Array(cols).fill(0))
};

// 使用示例
console.log(Array2D.create(2, 2));
console.log(Array2D.random(2, 2));
console.log(Array2D.zeros(2, 2));