掌握JavaScript：多种方法生成二维数组

原文网址：http://yanhaijing.com/javascript/2024/04/01/js-2d-array/

本文已收录到《面试知识系列》

我经常在面试中问候：你能用 JavaScript 生成一个二维数组吗？这个问题看似简单，实际上却能揭示出面试者对 JavaScript 的熟练程度。就像茴字有多种写法一样，生成二维数组也有多种方法。今天，就让我们一起来探索这个问题背后的答案，揭开生成二维数组的多种秘密。

掌握不同的方法不仅能让我们在面对不同的场景时更加得心应手，还能在面试中展示我们对 JavaScript 的深入理解。毕竟，在编程世界里，灵活多变往往比死记硬背更为重要。

建议大家在阅读文章时，对于每个方法先不要看答案，而是先自己思考如何实现，这样会更有收获。

创建一维数组

在生成二维数组之前，我们先来学习如何创建一维数组。创建一维数组的方法有多种，以下是一些常见的方法：

1. 数组字面量

这是创建数组的最简单方法，直接使用方括号[]来定义数组。

let arr = [1, 2, 3];

2. 使用 Array 构造函数

上面的数组也可以使用 Array 构造函数来创建。

let arr = new Array(1, 2, 3);

但当使用 Array 构造函数时，需要注意，如果只传入一个参数，则表示数组的长度。如果想要创建包含单个元素的数组，除了使用上面的方法外，还可以使用 Array.of() 方法。当有多个参数时，Array.of 和 Array 构造函数的效果是一样的。

let arr = Array.of(2);
console.log(arr); // [2]

可以使用这种 Array 构造函数来创建一个指定长度的数组。但需要注意的是，这种方法创建的数组元素是空位，并不是 undefined。

let arr = new Array(3);
console.log(arr); // [empty × 3]

为了避免空位的问题，可以结合使用 Array.fill() 方法来填充数组：

let arr = new Array(3).fill(0);
console.log(arr); // [0, 0, 0]

3. 使用 Array.from()

Array.from() 方法可以从一个类数组或可迭代对象创建一个新的数组实例。它还可以接受一个映射函数作为第二个参数，用于初始化数组元素。

let arr = Array.from({ length: 3 }, () => 0);
console.log(arr); // [0, 0, 0]

4. 使用展开运算符和 Array()

可以结合使用展开运算符（…）和 Array() 构造函数来创建并初始化数组。

let arr = [...Array(3)].map(() => 0);
console.log(arr); // [0, 0, 0]

掌握这些创建一维数组的方法可以帮助我们更灵活地处理各种编程场景。在接下来的部分，我们将探讨如何扩展这些方法来创建二维数组。

二维数组简介

二维数组，顾名思义，就是数组的数组。在 JavaScript 中，它可以用来表示矩阵、网格或任何需要行和列的数据结构。想象一下一个棋盘，每一行都是一个数组，整个棋盘就是一个二维数组。

二维数组在编程面试中经常出现，尤其是在处理矩阵相关的问题时。例如：

矩阵相关：给定一个 n x n 的二维矩阵，要求原地旋转 90 度。
岛屿数量：给定一个由’1’（陆地）和’0’（水）组成的二维网格，计算岛屿的数量。
动态规划：求解最大子数组和问题。

掌握二维数组的操作对于解决这些问题至关重要，因此了解如何在 JavaScript 中有效地生成和操作二维数组是非常有用的。

生成二维数组的方法有很多，今天我们将探讨以下几种，并分析其优缺点：

使用嵌套循环
使用 Array.from()
使用 Array.fill() 和 map()
使用展开运算符和 map()

1. 使用嵌套循环

这是最直接的方法。先创建一个外层数组，然后在每个位置上创建一个内层数组。

function create2DArray(m, n) {
  let arr = new Array(m);
  for (let i = 0; i < m; i++) {
    arr[i] = new Array(n);
    for (let j = 0; j < n; j++) {
      arr[i][j] = 0; // 或其他初始值
    }
  }
  return arr;
}

优点：直观易懂。
缺点：代码稍显冗长。

2. 使用 Array.from()

Array.from() 可以根据给定的参数创建一个新数组，而 map() 则可以对数组的每个元素进行处理。

function create2DArray(m, n) {
  return Array.from({ length: m }, () => Array.from({ length: n }, () => 0));
}

优点：代码更简洁。
缺点：对于初学者来说，可能需要一些时间来理解这种写法。

3. 使用 Array.fill() 和 map()

类似于上一个方法，但是使用了 Array.fill() 来创建初始数组。

function create2DArray(m, n) {
  return Array(m)
    .fill()
    .map(() => Array(n).fill(0));
}

优点：非常简洁。
缺点：与上一个方法相似，对初学者可能有一定难度。

4. 使用展开运算符和 map()

展开运算符（…）可以用来展开数组，与 map() 结合使用可以创建二维数组。

function create2DArray(m, n) {
  return [...Array(m)].map(() => Array(n).fill(0));
}

优点：代码简洁，易于理解。
缺点：性能可能略逊于其他方法。

总结

每种方法都有其优缺点，选择哪一种取决于你的具体需求和个人喜好。如果你追求代码的简洁性，那么使用 Array.from() 可能是一个不错的选择。如果你更倾向于易于理解和维护的代码，那么使用嵌套循环可能更适合你。

掌握生成二维数组的多种方法是每个 JavaScript 开发者的必备技能。通过这些方法，我们可以灵活地处理各种数据结构和算法问题。希望这篇文章能帮助你更好地理解和使用这些技巧。下次面试的时候，当这个问题再次出现时，你将满怀信心地给出答案。

我的推荐写法

在所有方法中，我个人偏好使用 Array.from() 的方法，因为它非常强大。当然 Array.fill 方法也非常不错，其优点是语义化，代码更易读。

function create2DArray(m, n) {
  return Array.from({ length: m }, () => Array.from({ length: n }, () => 0));
}
function create2DArray(m, n) {
  return Array(m)
    .fill()
    .map(() => Array(n).fill(0));
}