在 JavaScript 中使用二维数组

如果您已经了解 javascript 数组的基础知识，那么是时候通过更高级的主题将您的技能提升到一个新的水平。在本系列教程中，您将探索在 JavaScript 中使用数组进行编程的中级主题。

在 JavaScript 中使用二维数组第1张

在本教程中，您将学习如何在 javaScript 中使用二维数组。JavaScript 没有对二维数组的内置支持。这不是一个大问题，因为 JavaScript 中的数组可以包含其他数组作为它们的元素。这意味着我们可以通过创建数组的数组来在 JavaScript 中创建二维数组。

让我们回顾一些基础知识，例如 2D 数组初始化，然后实现其他功能，例如获取和设置 2D 数组中的元素值。

在 JavaScript 中创建二维数组

JavaScript 中的常规数组是一维的。我们通过使用文字符号或使用Array构造函数来创建常规数组，如下所示：

let numbers = [1, 2, 4, 59, 589, 126];
let names = new Array('Peter', 'Adam', 'Andy', 'Jake', 'Andrew');
console.log(numbers);
// Outputs: [ 1, 2, 4, 59, 589, 126 ] 
console.log(names);
// Outputs: [ 'Peter', 'Adam', 'Andy', 'Jake', 'Andrew' ]

我们可以用类似的方式创建二维数组。这是一个例子：

let matrix_a = [[1, 2, 4], [59, 589, 126], [34, 39, 27]];
let seating_arrangement = new Array(['Peter', 'Adam', 'Andy'], ['Jake', 'Andrew', 'Sam'], ['Jill', 'Jordan', 'Emma']);
console.log(matrix_a);
// Outputs: [ [ 1, 2, 4 ], [ 59, 589, 126 ], [ 34, 39, 27 ] ] 
console.log(seating_arrangement);
/* Outputs: 
[ 
[ 'Peter', 'Adam', 'Andy' ], 
[ 'Jake', 'Andrew', 'Sam' ], 
[ 'Jill', 'Jordan', 'Emma' ] 
] 
*/

重要的是要记住，与 C++ 等语言不同，JavaScript 中的二维数组没有固定数量的行和列。因此，如果我们希望我们的数组是一个矩形——即所有行和列的长度相同——我们必须确保子数组都具有相同的长度。

在上面的示例中，我们创建了matrix_a包含三个数组的数组。这为我们的二维数组提供了三行。现在每个数组都有自己的三个元素。这在我们的二维数组中产生了三列。我们可以将第三个数组限制为只有两个元素，并且matrix_a仍然是一个二维数组。但是，它将是一个锯齿状的二维数组。

对于本教程的其余部分，我们的重点将放在使用具有固定行数和列数的二维数组上。让我们在考虑这些约束的情况下定义一个数组初始化函数。

在 JavaScript 中初始化二维数组

我们知道二维数组由一组数组组成，这些数组构成了它的行和列。创建和初始化二维数组只是重复使用数组构造函数来填充主数组元素的问题。下面的函数为我们做了这个：

function create_2d_array(rows, columns, value = 0) {
  let array_2d = new Array(rows);
  
  for(let i = 0; i < rows; i++) {
    array_2d[i] = new Array(columns).fill(value);
  }
  
  return array_2d;
}
matrix_a = create_2d_array(3, 4, 1);
console.log(matrix_a);
// Outputs: [ [ 1, 1, 1, 1 ], [ 1, 1, 1, 1 ], [ 1, 1, 1, 1 ] ] 
matrix_b = create_2d_array(4, 3, "Pie");
console.log(matrix_b);
/* Outputs: 
[ 
[ 'Pie', 'Pie', 'Pie' ], 
[ 'Pie', 'Pie', 'Pie' ], 
[ 'Pie', 'Pie', 'Pie' ], 
[ 'Pie', 'Pie', 'Pie' ] 
] 
*/

我们的函数接受三个参数。第一个是行数，表示父数组应该包含多少个数组。第二个参数是列数，它指示每个数组中应该有多少个元素。最后，我们有第三个参数，这是我们要为二维数组中的每个元素设置的值。

在函数内部，我们创建了一个for循环，遍历所有行并用新数组填充父数组元素。我们在每个新数组上调用该fill()方法，以便用我们指定的值初始化它们。如果用户未提供任何值，则所有元素都设置为 0。

我们可以使用内置map()方法缩短我们的数组初始化函数。这是我们更新更短的函数的代码：

function create_2d_array_with_map(rows, columns, value = 0) {
  let array_2d = new Array(rows).fill(0);
  return array_2d.map(() => new Array(columns).fill(value));
}

正如您在上面看到的，这将为我们提供与原始函数相同的输出。这一次，我们像往常一样从行元素的父数组开始。但是，我们调用了fill()用零填充它的方法。之后，我们调用了map()这个数组的方法，它返回一个新数组，其中父数组的所有元素都填充了columns元素数量的数组。

你们中的一些人现在可能想知道我们是否可以通过两次使用该方法来缩短数组初始化函数fill()，而不是如下所示映射值：

function create_2d_array_wrong(rows, columns, value) {
  return new Array(rows).fill(new Array(columns).fill(value));
}

这将生成一个看起来与前面的相同的数组，但有一个微妙的问题。因为new Array(columns)构造函数只被调用一次，所以所有的列数组实际上都是对同一个数组的引用。

这意味着您将无法独立更新各个列。

获取和设置二维数组中的元素值

您可能已经知道我们可以使用索引值访问任何索引处的数组元素，并且索引是从零开始的。这是一个例子：

let names = new Array('Peter', 'Adam', 'Andy', 'Jake', 'Andrew');
console.log(names[3]);
// Outputs: Jake

我们通过使用索引值 3 获得了数组中的第四个元素。让我们尝试对二维数组进行类似的操作。

let matrix_a = [[1, 2, 4], [59, 589, 126], [34, 39, 27]];
let seating_arrangement = new Array(['Peter', 'Adam', 'Andy'], ['Jake', 'Andrew', 'Sam'], ['Jill', 'Jordan', 'Emma']);
console.log(matrix_a[1]);
// Outputs: [ 59, 589, 126 ] 
console.log(matrix_a[1][1]);
// Outputs: 589 
console.log(seating_arrangement[0]);
// Outputs: [ 'Peter', 'Adam', 'Andy' ] 
console.log(seating_arrangement[0][2]);
// Outputs: Andy

如您所见，使用单个索引值为我们提供了父数组的一个元素，而这个元素实际上是一个数组本身。我们必须提供另一个索引值才能从返回的数组中获取我们的元素。

基本上，第一个索引值给了我们数组，我们应该在其中查找元素。我们将调用第一个索引值row_index。第二个索引值为我们提供了我们在返回数组中寻找的元素。我们将调用第二个索引值col_index。我们可以使用以下语句访问二维数组中我们想要的任何元素。

my_2d_array [ row_idx ] [ col_idx ]

这将从以下代码片段中变得更加清楚：

let seating_arrangement = new Array(['Peter', 'Adam', 'Andy'], ['Jake', 'Andrew', 'Sam'], ['Jill', 'Jordan', 'Emma']);
console.table(seating_arrangement);
/* Outputs: 
┌─────────┬─────────┬──────────┬────────┐ 
│ (index) │ 0 │ 1 │ 2 │ 
├─────────┼─────────┼──────────┼────────┤ 
│ 0 │ 'Peter' │ 'Adam' │ 'Andy' │ 
│ 1 │ 'Jake' │ 'Andrew' │ 'Sam' │ 
│ 2 │ 'Jill' │ 'Jordan' │ 'Emma' │ 
└─────────┴─────────┴──────────┴────────┘ 
*/
console.log(seating_arrangement[0][2]);
// Outputs: Andy 
console.log(seating_arrangement[2][0]);
// Outputs: Jill

使用console.table()记录我们的二维数组使它们更容易理解。

在第一种情况下，我们从第一行（索引 0）和第三列（索引 2）获取元素。这给了我们Andy 的价值。同样，我们通过查看第三行和第一列得到了吉尔。

现在您知道了如何访问特定行或索引处的元素值，使用简单的赋值就可以很容易地为该元素设置一个值。这是一个例子：

let seating_arrangement = new Array(['Peter', 'Adam', 'Andy'], ['Jake', 'Andrew', 'Sam'], ['Jill', 'Jordan', 'Emma']);
console.table(seating_arrangement);
/* Outputs: 
┌─────────┬─────────┬──────────┬────────┐ 
│ (index) │ 0 │ 1 │ 2 │ 
├─────────┼─────────┼──────────┼────────┤ 
│ 0 │ 'Peter' │ 'Adam' │ 'Andy' │ 
│ 1 │ 'Jake' │ 'Andrew' │ 'Sam' │ 
│ 2 │ 'Jill' │ 'Jordan' │ 'Emma' │ 
└─────────┴─────────┴──────────┴────────┘ 
*/
seating_arrangement[0][2] = 'Olivia';
seating_arrangement[2][0] = 'Ava';
console.table(seating_arrangement);
/* Outputs: 
┌─────────┬─────────┬──────────┬──────────┐ 
│ (index) │ 0 │ 1 │ 2 │ 
├─────────┼─────────┼──────────┼──────────┤ 
│ 0 │ 'Peter' │ 'Adam' │ 'Olivia' │ 
│ 1 │ 'Jake' │ 'Andrew' │ 'Sam' │ 
│ 2 │ 'Ava' │ 'Jordan' │ 'Emma' │ 
└─────────┴─────────┴──────────┴──────────┘ 
*/

您还记得我之前提到过，通过两次连续调用该fill()方法创建二维数组会因为所有元素都引用同一对象而产生问题吗？您可以使用以下代码片段自行验证：

function create_2d_array_wrong(rows, columns, value) {
  return new Array(rows).fill(new Array(columns).fill(value));
}
matrix_a = create_2d_array_wrong(3, 4, 1);
console.log(matrix_a);
// Outputs: [ [ 1, 1, 1, 1 ], [ 1, 1, 1, 1 ], [ 1, 1, 1, 1 ] ] 
matrix_a[0][1] = 4;
console.log(matrix_a);
// Outputs: [ [ 1, 4, 1, 1 ], [ 1, 4, 1, 1 ], [ 1, 4, 1, 1 ] ]

我们只更改了第一行和第二列中元素的值。但是，第二列中的值针对所有行进行了更新。

设置整行或整列值

我们现在将学习如何替换二维数组中整行或整列的值。

替换行值很容易，因为整行基本上是一个单独的数组。我们将对这个替换施加的唯一限制是替换数组需要与我们的原始数组具有相同数量的元素。这是我们进行替换的函数：

function replace_row(array_2d, row_array, row_idx) {
  let array_2d_columns = array_2d[0].length;
  if(row_array.length == array_2d_columns) {
    array_2d[row_idx] = row_array;
  }
}
let seating_arrangement = new Array(['Peter', 'Adam', 'Andy'], ['Jake', 'Andrew', 'Sam'], ['Jill', 'Jordan', 'Emma']);
console.table(seating_arrangement);
/* Outputs: 
┌─────────┬─────────┬──────────┬────────┐ 
│ (index) │ 0 │ 1 │ 2 │ 
├─────────┼─────────┼──────────┼────────┤ 
│ 0 │ 'Peter' │ 'Adam' │ 'Andy' │ 
│ 1 │ 'Jake' │ 'Andrew' │ 'Sam' │ 
│ 2 │ 'Jill' │ 'Jordan' │ 'Emma' │ 
└─────────┴─────────┴──────────┴────────┘ 
*/
replace_row(seating_arrangement, ['Olivia', 'Ava', 'Sophia'], 1);
console.table(seating_arrangement;
/* Outputs: 
┌─────────┬──────────┬──────────┬──────────┐ 
│ (index) │ 0 │ 1 │ 2 │ 
├─────────┼──────────┼──────────┼──────────┤ 
│ 0 │ 'Peter' │ 'Adam' │ 'Andy' │ 
│ 1 │ 'Olivia' │ 'Ava' │ 'Sophia' │ 
│ 2 │ 'Jill' │ 'Jordan' │ 'Emma' │ 
└─────────┴──────────┴──────────┴──────────┘ 
*/

替换列值需要我们遍历所有行，因为列中的每个元素都来自不同的数组。我们还将包含一个条件，用于检查行数和替换列数组的长度是否匹配。这是我们函数的代码：

function replace_column(array_2d, column_array, col_idx) {
  if(column_array.length == array_2d.length) {
    for(let i = 0; i < column_array.length; i++) {
      array_2d[i][col_idx] = column_array[i];
    }
  }
}
let seating_arrangement = new Array(['Peter', 'Adam', 'Andy'], ['Jake', 'Andrew', 'Sam'], ['Jill', 'Jordan', 'Emma']);
console.table(seating_arrangement);
/* Outputs: 
┌─────────┬─────────┬──────────┬────────┐ 
│ (index) │ 0 │ 1 │ 2 │ 
├─────────┼─────────┼──────────┼────────┤ 
│ 0 │ 'Peter' │ 'Adam' │ 'Andy' │ 
│ 1 │ 'Jake' │ 'Andrew' │ 'Sam' │ 
│ 2 │ 'Jill' │ 'Jordan' │ 'Emma' │ 
└─────────┴─────────┴──────────┴────────┘ 
*/
replace_column(seating_arrangement, ['Olivia', 'Ava', 'Sophia'], 1);
console.table(seating_arrangement);
/* Outputs: 
┌─────────┬─────────┬──────────┬────────┐ 
│ (index) │ 0 │ 1 │ 2 │ 
├─────────┼─────────┼──────────┼────────┤ 
│ 0 │ 'Peter' │ 'Olivia' │ 'Andy' │ 
│ 1 │ 'Jake' │ 'Ava' │ 'Sam' │ 
│ 2 │ 'Jill' │ 'Sophia' │ 'Emma' │ 
└─────────┴─────────┴──────────┴────────┘ 
*/