Javascript 填充二维数组

在 Javascript 中，填充一个二维数组（也可称为矩阵或二维列表）是非常常见的任务。这个任务的实现有多种方式，以下是其中几种常见的方法。

方法一：使用循环嵌套

这是最基本、最直接的方法，也是最容易理解和使用的方法。我们可以使用双重循环遍历二维数组，利用 for 循环和数组下标来进行填充。

let arr = new Array(3);
for (let i = 0; i < arr.length; i++) {
  arr[i] = new Array(3);
  for (let j = 0; j < arr[i].length; j++) {
    arr[i][j] = i + j;
  }
}
console.log(arr); // [ [ 0, 1, 2 ], [ 1, 2, 3 ], [ 2, 3, 4 ] ]

代码解析：

• 首先用 new Array(3) 创建一个长度为 3 的一维数组 arr。
• 用一个外层循环来遍历一维数组 arr，在循环内部使用 new Array(3) 创建一个新的长度也为 3 的二维数组，并将它赋值给 arr[i]，也就是将其作为一维数组的一个元素。
• 接下来用一个内层循环来遍历二维数组 arr[i]，并将 i 和 j 相加的结果赋值给 arr[i][j]，也就是填充二维数组中的一个元素。
• 最后输出填充好的二维数组。

方法二：使用 fill() 方法

ES6 中的数组方法 fill() 可以用于填充一维数组，同样它也可以用于填充二维数组。我们先用 Array.from() 方法创建一个长度为 n 的一维数组，然后再用 fill() 方法填充二维数组每个元素。

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

代码解析：

• Array.from() 方法可以根据已有对象或类数组对象创建一个新的数组实例。这里我们使用 { length: 3 } 创建一个包含 3 个元素的对象，并通过第二个参数传入一个回调函数。这个回调函数将会针对每个元素执行 n 次，并返回一个值。
• 在回调函数中，我们通过 Array.from({ length: 3 }) 创建一个新的长度为 3 的一维数组，然后再调用 fill() 方法将其填充为 0。
• 最后将这个回调函数的返回值作为参数传入 Array.from() 方法中，表示创建一个长度为 n 的一维数组，并将每个元素都填充为一个长度为 3、且全部为 0 的一维数组。
• 最终输出一个填充好的二维数组。

方法三：使用 Array() + fill() + map()

这种方法的思路与方法二基本相同，不同之处在于使用了 Array() 构造函数以及 map() 方法和箭头函数来实现二维数组的填充。

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

代码解析：

• Array(3) 表示创建一个长度为 3 的一维数组。
• 调用 fill() 方法填充一维数组中的每个元素。
• 调用 map() 方法对一维数组的每个元素执行一个回调函数，并返回一个新的数组实例。
• 在回调函数中，利用 Arrow Function 创建一个长度为 3 并填充为 0 的一维数组。
• 最终输出一个填充好的二维数组。

方法四：使用 Array() + Array.from()

这种方法仍是利用 Array() 构造函数创建一维数组，不同之处在于使用 Array.from() 方法和箭头函数来实现二维数组的填充。

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

代码解析：

• Array(3) 表示创建一个长度为 3 的一维数组。
• Array.from() 方法接收一个类数组对象或可迭代对象，并返回一个数组实例。这里我们把长度为 3 的一维数组作为参数传入，表示创建一个包含 3 个元素的数组实例。
• 在 Array.from() 方法的第二个参数上，我们传入一个回调函数，在这个回调函数中利用 Arrow Function 创建一个长度为 3 并填充为 0 的一维数组。
• 最终输出一个填充好的二维数组。

总结

这篇文章介绍了四种常见的填充二维数组的方法，各个方法的实现原理和代码特点不同。开发者可以根据自己的需要和喜好来选择适合自己的方法。