JavaScript创建二维数组居然有这么多方法！！！

在看别人的代码的时候，看到了这样创建二维数组的代码：

// 创建了一个 m 行 n 列的二维数组
Array.from({length: m + 1}, () => Array(n + 1).fill(0))

顿时觉得很新奇，因为自己没有这样写过。于是便研究了一下有哪些创建二维数组的办法。下面我将列举6种常见的方法，并给出相应的示例代码。

使用嵌套数组字面量

这是最直接的方法，仅仅适合于创建已知大小的二维数组。

const array2D = [ [0, 0, 0], [0, 0, 0], [0, 0, 0] ];

使用循环

当需要根据某些条件动态生成二维数组时，可以使用循环来创建。

const rows = 3;
const cols = 3; 
const array2D = []; 
for (let i = 0; i < rows; i++) { 
    const row = [];
    for (let j = 0; j < cols; j++) { row.push(0); }
    array2D.push(row); 
}

使用 Array.from()

这种方法允许你创建一个指定长度的数组，并通过映射函数初始化每个元素。

const rows = 3;
const cols = 3;
const array2D = Array.from({ length: rows }, () => Array(cols).fill(0));

使用 Array.from() 和箭头函数

如果需要对每个元素执行复杂的操作，可以使用箭头函数进行初始化。

const rows = 3;
const cols = 3;
const array2D = Array.from({ length: rows }, (_, rowIndex) => 
    Array.from({ length: cols }, (_, colIndex) => rowIndex * cols + colIndex) 
);

使用 Array.map()

Array.map() 可以用来创建一个新数组，其结果是调用提供的函数处理原数组的每个元素。

const rows = 3; 
const cols = 3; 
const array2D = Array(rows).fill().map(() => Array(cols).fill(0));

使用 Array.of()

Array.of() 可以接受任意数量的参数，并返回一个包含这些参数的新数组。虽然它通常不直接用于创建二维数组，但可以通过循环和嵌套使用来实现。

const rows = 3;
const cols = 3; 
const array2D = [];
for (let i = 0; i < rows; i++) { 
    array2D.push(Array.of(...Array(cols).fill(0)));
}

示例汇总

下面我将上述的现实进行一个汇总，方便大家对照。

const rows = 3; 
const cols = 3; 

// 方法 1: 嵌套数组字面量 
const array2D1 = [ [0, 0, 0], [0, 0, 0], [0, 0, 0] ]; 

// 方法 2: 使用循环 
const array2D2 = []; 
for (let i = 0; i < rows; i++) { 
    const row = []; 
    for (let j = 0; j < cols; j++) { row.push(0); } 
    array2D2.push(row); 
} 

// 方法 3: 使用 Array.from() 
const array2D3 = Array.from({ length: rows }, () => Array(cols).fill(0)); 

// 方法 4: 使用 Array.from() 和箭头函数 
const array2D4 = Array.from({ length: rows }, (_, rowIndex) => 
    Array.from({ length: cols }, (_, colIndex) => rowIndex * cols + colIndex) 
); 

// 方法 5: 使用 Array.map() 
const array2D5 = Array(rows).fill().map(() => Array(cols).fill(0)); 

// 方法 6: 使用 Array.of() 
const array2D6 = []; for (let i = 0; i < rows; i++) { 
    array2D6.push(Array.of(...Array(cols).fill(0))); 
} 

// 输出结果 
console.log("array2D1:", array2D1); 
console.log("array2D2:", array2D2); 
console.log("array2D3:", array2D3); 
console.log("array2D4:", array2D4); 
console.log("array2D5:", array2D5); 
console.log("array2D6:", array2D6);

以下是上述代码的输出

array2D1: [ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ]
array2D2: [ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ]
array2D3: [ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ]
array2D4: [ [ 0, 1, 2 ], [ 3, 4, 5 ], [ 6, 7, 8 ] ]
array2D5: [ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ]
array2D6: [ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ]

总结

这些方法各有优缺点，你可以根据实际需求选择最适合的一种。