当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript生成二维数组的几种方法

JavaScript生成二维数组的几种方法

2025-10-17 20:34:37 0浏览收藏

在JavaScript中，二维数组是一种常见且强大的数据结构，常用于游戏开发、图像处理等多种场景。本文深入探讨了JavaScript生成二维数组的几种核心方法，包括使用嵌套循环、`Array.from`结合`map`以及`Array().fill().map()`。着重分析了每种方法的优缺点，特别是如何避免使用`Array.prototype.fill()`时可能出现的“引用陷阱”，确保数组的每一行都是独立的对象。此外，还详细讲解了二维数组的遍历技巧，以及如何进行元素的读取、修改、插入和删除等操作，助你轻松驾驭JavaScript中的二维数据结构，提升代码效率和质量。

JavaScript中生成二维数组的常用方法有：1. 嵌套循环，通过双重for循环逐行构建，逻辑清晰且避免引用陷阱；2. 使用Array.from结合map，以函数式编程风格简洁地创建新数组实例，每行独立；3. 使用Array().fill().map()，利用map回调确保每次生成新数组，避免共享引用。避免引用陷阱的关键是确保每一行都是独立对象，不可直接使用Array(rows).fill(Array(cols).fill(value))，否则所有行将共享同一引用，导致修改一处影响全局。二维数组广泛应用于游戏开发、图像处理、电子表格、矩阵运算和路径查找等场景。遍历可采用嵌套for循环、for...of或forEach方法，操作包括通过索引读取和修改元素，使用push或splice插入/删除行，以及遍历每行使用splice插入或删除列。掌握这些方法和陷阱规避策略，能有效处理各类二维数据结构问题。

javascript怎么生成二维数组

在JavaScript中生成二维数组，我们通常会利用几种核心机制：最直接的方式是使用嵌套循环逐层构建，或者更现代、函数式的方法，结合Array.from或fill与map来高效初始化。选择哪种方式，往往取决于你对代码可读性、初始化逻辑以及潜在性能考量的偏好。

解决方案

生成二维数组，我个人比较常用的有以下几种：

1. 嵌套循环：最直观也最基础的方法

这种方式非常直接，就像我们手写一个表格一样，一层一层地去填充。它清晰地展现了数组的构建过程，对于初学者来说也很好理解。

function create2DArrayNestedLoop(rows, cols, defaultValue = 0) {
    const arr = [];
    for (let i = 0; i < rows; i++) {
        const row = [];
        for (let j = 0; j < cols; j++) {
            row.push(defaultValue);
        }
        arr.push(row);
    }
    return arr;
}

// 示例：生成一个3行4列，默认值为0的二维数组
const matrix1 = create2DArrayNestedLoop(3, 4);
// console.log(matrix1);
/*
[
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0]
]
*/

// 示例：生成一个2行3列，默认值为'x'的二维数组
const matrix2 = create2DArrayNestedLoop(2, 3, 'x');
// console.log(matrix2);
/*
[
  ['x', 'x', 'x'],
  ['x', 'x', 'x']
]
*/

这种方法虽然有点“老派”，但在很多场景下，它的执行效率并不低，而且逻辑路径非常明确，调试起来也方便。

2. 使用 Array.from 和 map：更函数式的初始化

这是我个人在项目里更倾向使用的方式，因为它写起来更简洁，也更符合现代JavaScript的函数式编程风格。Array.from可以根据一个类数组对象或可迭代对象创建一个新的、浅拷贝的数组实例。当我们给它第二个参数，一个映射函数时，它就能在创建新数组的同时对每个元素进行处理。

function create2DArrayFunctional(rows, cols, defaultValue = 0) {
    // Array.from({ length: rows }) 创建一个长度为rows的数组，其元素为undefined
    // 然后通过map函数，对每个undefined元素进行处理，返回一个新的数组（行）
    // 这个新的数组（行）又是通过 Array(cols).fill(defaultValue) 创建的
    return Array.from({ length: rows }, () => Array(cols).fill(defaultValue));
}

// 示例：生成一个4行2列，默认值为null的二维数组
const matrix3 = create2DArrayFunctional(4, 2, null);
// console.log(matrix3);
/*
[
  [null, null],
  [null, null],
  [null, null],
  [null, null]
]
*/

// 示例：生成一个3行3列，默认值为随机数的二维数组
// 注意：如果 defaultValue 是一个函数，每次都会调用它生成新的值
function create2DArrayWithRandom(rows, cols) {
    return Array.from({ length: rows }, () => 
        Array.from({ length: cols }, () => Math.floor(Math.random() * 100))
    );
}
const matrix4 = create2DArrayWithRandom(3, 3);
// console.log(matrix4); // 每次运行结果不同
/* 类似这样:
[
  [12, 56, 89],
  [3, 77, 45],
  [91, 23, 67]
]
*/

这种方式的巧妙之处在于，map函数为每一行都生成了一个全新的数组实例，这避免了后面会提到的“引用陷阱”。

3. 使用 Array.prototype.map 和 Array.prototype.fill (需谨慎)

这种方式看起来很简洁，但如果不理解其背后的引用机制，很容易踩坑。

// 这种方式需要非常小心，因为它可能导致“引用陷阱”
// 只有当你确定每一行的数组元素都是独立的，且后续不会修改内部数组时才考虑
function create2DArrayFillMap(rows, cols, defaultValue = 0) {
    // Array(rows).fill(0) 创建一个长度为rows的数组，所有元素都是0 (或任何值)
    // 关键在于后面的 .map()，它会遍历这个数组，对每个元素执行一个函数
    // 这里的函数返回一个新的 Array(cols).fill(defaultValue)
    // 这样就保证了每一行都是一个新的数组实例
    return Array(rows).fill(0).map(() => Array(cols).fill(defaultValue));
}

// 示例：生成一个2行2列，默认值为false的二维数组
const matrix5 = create2DArrayFillMap(2, 2, false);
// console.log(matrix5);
/*
[
  [false, false],
  [false, false]
]
*/

这里的关键在于 map 的使用。如果没有 map，直接 Array(rows).fill(Array(cols).fill(defaultValue)) 会导致所有行都引用同一个内部数组，这是个经典陷阱。

JavaScript中二维数组的常见用途有哪些？

二维数组在编程中无处不在，尤其是在需要表示网格、表格或矩阵数据时。我经常在这些场景下用到它：

游戏开发： 想象一个棋盘游戏，比如国际象棋、跳棋或者简单的井字棋。每个格子都可以用二维数组的一个元素来表示，存储棋子类型、颜色或状态。比如 board[row][col] 就能直接定位到某个位置。
图像处理： 虽然现代图像库通常有更高级的数据结构，但从底层原理来说，一张图片可以被看作是像素点的二维网格。每个像素点可能由RGB值组成，那么一个二维数组的每个元素可能就是一个包含三个数字（红、绿、蓝）的数组。
电子表格或表格数据： Excel或Google Sheets的底层逻辑，就是行和列构成的二维数据结构。你可以用二维数组来模拟一个简单的电子表格，进行数据的存储、读取和修改。
矩阵运算： 在线性代数中，矩阵就是二维数组。进行矩阵的加法、乘法、转置等操作，二维数组是其天然的表示形式。
路径查找算法： 比如迷宫游戏或寻路算法（如Dijkstra或A*），地图通常可以抽象为一个二维网格，每个单元格表示可通行、障碍物或起点终点，二维数组是理想的数据结构。
数据可视化： 当你需要绘制热力图或者某些统计图表时，原始数据可能就是以二维形式组织的。

这些用途都充分利用了二维数组按行、按列访问数据的便利性。

如何避免JavaScript二维数组的引用陷阱？

这是个非常经典的“坑”，我见过不少初学者甚至是有经验的开发者都曾不小心踩进去。引用陷阱主要发生在当你尝试用Array.prototype.fill()来初始化一个包含数组的数组时，如果填充的值本身是一个数组字面量或对象，那么所有被填充的位置都会指向同一个引用。

陷阱示例：

const rows = 3;
const cols = 4;

// 错误的方式：所有内部数组都指向同一个引用
const badMatrix = Array(rows).fill(Array(cols).fill(0)); 
// console.log(badMatrix);
/*
[
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0]
]
*/

// 尝试修改其中一个元素
badMatrix[0][0] = 99;

// 结果是：所有行的第一个元素都被修改了！
// console.log(badMatrix);
/*
[
  [99, 0, 0, 0],
  [99, 0, 0, 0],
  [99, 0, 0, 0]
]
*/
// 这是因为 Array(cols).fill(0) 只创建了一个内部数组 [0,0,0,0]，
// 然后 Array(rows).fill() 把这个同一个数组的引用复制了3次。
// 所以修改其中一个“行”，实际上修改的是那个唯一的内部数组。

避免方法：

核心原则是确保每一行（或每一个内部数组）都是一个全新的独立实例。

使用 map 函数创建新实例： 这是最推荐和最常用的方法，无论结合 Array.from 还是 Array(rows).fill(someValue)。map 的回调函数会在每次迭代时被调用，从而每次都生成一个新的数组。

// 方法一：Array.from + map (推荐)
const correctMatrix1 = Array.from({ length: rows }, () => Array(cols).fill(0));
correctMatrix1[0][0] = 99;
// console.log(correctMatrix1);
/*
[
  [99, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0]
]
*/
// 只有第一行被修改，其他行保持不变，这才是我们想要的结果。

// 方法二：Array().fill().map() (同样推荐)
const correctMatrix2 = Array(rows).fill(0).map(() => Array(cols).fill(0));
correctMatrix2[0][0] = 88;
// console.log(correctMatrix2);
/*
[
  [88, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0]
]
*/

嵌套循环： 虽然可能写起来代码量稍多，但它天然地避免了引用陷阱，因为你每次循环都会显式地创建并push一个新的数组。

const correctMatrix3 = [];
for (let i = 0; i < rows; i++) {
    const row = []; // 每次循环都创建新的行数组
    for (let j = 0; j < cols; j++) {
        row.push(0);
    }
    correctMatrix3.push(row);
}
correctMatrix3[0][0] = 77;
// console.log(correctMatrix3);
/*
[
  [77, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0]
]
*/

理解引用类型在JavaScript中的工作方式是避免这类错误的根本。只要记住，当你需要一个独立的新实例时，就必须通过某种方式（如map、new Array()、[]字面量、slice()等）来明确地创建它，而不是简单地复制引用。

JavaScript二维数组的遍历与操作技巧？

处理二维数组，无非就是遍历、读取、修改、插入或删除。掌握这些基本操作，能让你在各种场景下游刃有余。

1. 遍历二维数组：

最常见也是最基础的方式是使用嵌套循环。

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

// 使用传统的 for 循环
console.log("--- 传统 for 循环遍历 ---");
for (let i = 0; i < matrix.length; i++) { // 遍历行
    for (let j = 0; j < matrix[i].length; j++) { // 遍历列
        console.log(`matrix[${i}][${j}] = ${matrix[i][j]}`);
    }
}

// 使用 for...of 循环 (更现代、简洁)
console.log("--- for...of 循环遍历 ---");
let rowIndex = 0;
for (const row of matrix) { // 遍历每一行数组
    let colIndex = 0;
    for (const element of row) { // 遍历行中的每一个元素
        console.log(`matrix[${rowIndex}][${colIndex}] = ${element}`);
        colIndex++;
    }
    rowIndex++;
}

// 使用 forEach (函数式风格)
console.log("--- forEach 遍历 ---");
matrix.forEach((row, i) => {
    row.forEach((element, j) => {
        console.log(`matrix[${i}][${j}] = ${element}`);
    });
});

选择哪种遍历方式，通常取决于个人喜好和代码上下文。for...of和forEach在可读性上往往优于传统的for循环，尤其是在不需要索引的情况下。

2. 读取与修改元素：

这非常直接，通过行索引和列索引即可。

const data = [
    ['Name', 'Age', 'City'],
    ['Alice', 30, 'New York'],
    ['Bob', 24, 'London']
];

// 读取特定元素
console.log(data[1][0]); // 输出 'Alice'
console.log(data[2][2]); // 输出 'London'

// 修改特定元素
data[1][1] = 31; // Alice的年龄改为31
console.log(data[1]); // 输出 ['Alice', 31, 'New York']

// 插入新行
data.push(['Charlie', 28, 'Paris']);
// console.log(data);
/*
[
    ['Name', 'Age', 'City'],
    ['Alice', 31, 'New York'],
    ['Bob', 24, 'London'],
    ['Charlie', 28, 'Paris']
]
*/

// 删除一行 (例如删除Bob那一行)
data.splice(2, 1); // 从索引2开始删除1个元素
// console.log(data);
/*
[
    ['Name', 'Age', 'City'],
    ['Alice', 31, 'New York'],
    ['Charlie', 28, 'Paris']
]
*/

3. 插入/删除列：

这比行操作稍微复杂一点，因为你需要遍历每一行来修改。

const products = [
    ['ID', 'Name', 'Price'],
    [1, 'Laptop', 1200],
    [2, 'Mouse', 25]
];

// 插入新列 (例如在'Name'和'Price'之间插入'Quantity')
const insertColIndex = 2; // 插入到第2列 (索引从0开始)
products.forEach(row => {
    // 根据需要插入默认值或特定值
    row.splice(insertColIndex, 0, 0); // 在指定位置插入0
});
products[0][insertColIndex] = 'Quantity'; // 设置表头
// console.log(products);
/*
[
  ['ID', 'Name', 'Quantity', 'Price'],
  [1, 'Laptop', 0, 1200],
  [2, 'Mouse', 0, 25]
]
*/

// 删除列 (例如删除'Quantity'列)
const deleteColIndex = 2; // 删除索引为2的列
products.forEach(row => {
    row.splice(deleteColIndex, 1); // 从指定位置删除1个元素
});
// console.log(products);
/*
[
  ['ID', 'Name', 'Price'],
  [1, 'Laptop', 1200],
  [2, 'Mouse', 25]
]
*/

这些技巧覆盖了二维数组的日常使用，从简单的遍历到复杂的结构调整，理解它们能让你更灵活地处理网格状数据。

理论要掌握，实操不能落！以上关于《JavaScript生成二维数组的几种方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！