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中生成二维数组，我们通常会利用几种核心机制：最直接的方式是使用嵌套循环逐层构建，或者更现代、函数式的方法，结合
Array.from
或
fill
与
map
来高效初始化。选择哪种方式，往往取决于你对代码可读性、初始化逻辑以及潜在性能考量的偏好。
解决方案
生成二维数组，我个人比较常用的有以下几种：
1. 嵌套循环：最直观也最基础的方法
立即学习“Java免费学习笔记（深入）”；
这种方式非常直接，就像我们手写一个表格一样，一层一层地去填充。它清晰地展现了数组的构建过程，对于初学者来说也很好理解。
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 { 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的年龄改为31console.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怎么生成二维数组的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1513502.html
微信扫一扫 
支付宝扫一扫 
