JavaScript 2D Array – JS 中的二维数组

JavaScript 2D Array – JS 中的二维数组

在 JavaScript 编程中，我们都习惯于创建和使用一维数组。这些是包含元素（相似数据类型或多种数据类型的元素）的数组。

但知道 JS 中存在二维数组（2D array）也很好。

在本文中，您将了解什么是二维数组以及它们在 JavaScript 中的工作原理。它与其他编程语言有很大不同，因为从技术上讲，JavaScript 中不存在二维数组。

什么是二维数组？

二维数组，也称为 2D 数组，是以行和列的网格状结构排列的数据元素的集合。数组中的每个元素称为一个单元格，可以通过其行和列索引/索引进行访问。

[ a1, a2, a3, ..., an,

b1, b2, b3, ..., bn,

c1, c2, c3, ..., cn,

.

.

.

z1, z2, z3, ..., zn ]

在 JavaScript 中，没有像 C、C++ 和 Java 等其他常用编程语言那样用于创建 2D 数组的直接语法。

您可以在 JavaScript 中通过锯齿状数组（数组的数组）创建二维数组。例如，下面是锯齿状数组的样子：

let twoDimensionalArr = [ [ a1, a2, a3, ..., an ],

[ b1, b2, b3, ..., bn ],

[ c1, c2, c3, ..., cn ],

.

.

.

[ z1, z2, z3, ..., zn ] ];

但有一个限制。需要注意的是，二维数组具有固定的大小。这意味着一旦创建它们，行数和列数就应该是固定的。此外，每行应具有相似数量的元素（列）。

例如，下面的数组有三行和四个元素：

let myArray = [

[0, 1, 2, 3],

[4, 5, 6, 7],

[8, 9, 0, 0]

];

限制是，对于锯齿状数组，您无法指定固定的行和列。这意味着锯齿状数组可以有 m 行，每行具有不同数量的元素。

let myArray = [

[0, 1, 2, 3],

[4, 5, 6, 7],

[8, 9]

];

为什么在 JavaScript 中使用二维数组？

此时，您可能会问自己二维数组的重要性，特别是如果这是您第一次阅读有关二维数组的内容。

在 JavaScript 中，我们使用二维数组（也称为矩阵）以结构化和有组织的方式存储和操作数据。

它们允许高效存储和操作大量数据，例如图像或视频处理、科学模拟和电子表格应用程序。

二维数组还可以使用矩阵运算，例如矩阵乘法和转置，可以简化复杂的计算并使代码更具可读性。

二维数组可以表示线性代数中的数学矩阵和各种数据，例如图形、地图和表格。

二维数组常用于涉及数据表、图像处理和游戏开发的应用中。

如何访问 JavaScript 二维数组中的元素

在学习如何在 JavaScript 中创建 2D 数组之前，我们首先学习如何访问 2D 数组中的元素。

您可以使用两个索引访问二维数组的元素，一个用于行，一个用于列。假设您有以下二维数组：

let MathScore = [

['John Doe', 20, 60, 'A'],

['Jane Doe', 10, 52, 'B'],

['Petr Chess', 5, 24, 'F'],

['Ling Jess', 28, 43, 'A'],

['Ben Liard', 16, 51, 'B']

];

上面是一个锯齿状数组，其中每个元素保存学生的姓名、考试成绩、考试成绩和成绩。您可以使用行索引和列索引访问特定元素，如以下语法所示：

arrayName[rowIndex][columnIndex]

为了更好地理解这一点，让我们使用 将上面的二维数组转换为表格console.table(arrayName)。

注意：确保替换arrayName为二维数组的名称。就我而言，是的MathScore。

您将得到这样的输出，显示行索引和列索引。请记住，数组是零索引的，这意味着项目是从 0 而不是 1 引用的。

请注意，(index)列和行用于说明，指示内部数组的索引/索引。

您可以使用两个方括号来访问二维或多维数组的元素。第一个访问行，而第二个访问指定行中的元素。

console.log(MathScore[4][0]); // returns 'Ben Liard'

console.log(MathScore[2][1]); // returns 5

console.log(MathScore[1][3]); // returns 'B'

console.log(MathScore[2][2]); // returns 24

如何访问二维数组的第一个和最后一个元素

有时您可能需要查找二维数组的第一个和最后一个元素。您可以使用行和列的第一个和最后一个索引来执行此操作。

第一个元素的行索引和列索引始终为 0，这意味着您将使用arrayName[0][0],.

然而，最后一个元素的索引可能很棘手。例如，在上面的示例中，第一个元素是“John Doe”，最后一个元素是“B”：

console.log(MathScore[0][0]); // returns 'John Doe'

console.log(MathScore[MathScore.length-1][(MathScore[MathScore.length -1]).length - 1]); // returns 'B'

如何添加二维数组的所有元素

在某些情况下，二维数组的所有元素都可以是数字，因此您可能需要将它们加在一起并得到一位数字。您可以使用嵌套循环来完成此操作。您将首先循环遍历行，然后，对于每一行，循环遍历其元素。

let numberArr = [

[10, 20, 60],

[8, 10, 52],

[15, 5, 24],

[26, 28, 43],

[12, 16, 51]

];

var sum = 0;

numberArr.forEach((row) => {

row.forEach((element) => {

sum += element;

});

});

console.log("The sum of all elements in the array is:" + sum); // returns "The sum of all elements in the array is: 380"

如何在 JavaScript 中操作二维数组

您可以使用通用数组方法（如 pop、push、splice 等）像操作一维数组一样操作 2D 数组。

让我们首先学习如何向二维数组添加/插入新行和元素。

如何将元素插入二维数组

您可以使用 push() 和 unshift() 方法向二维数组添加一个或多个元素。

Push() 方法将元素添加到 2D 数组的末尾，而 unshift() 方法将元素添加到 2D 数组的开头。

let MathScore = [

["John Doe", 20, 60, "A"],

["Jane Doe", 10, 52, "B"],

["Petr Chess", 5, 24, "F"],

["Ling Jess", 28, 43, "A"],

["Ben Liard", 16, 51, "B"]

];

MathScore.push(["Tom Right", 30, 32, "B"]);

MathScore.unshift(["Alice George", 28, 62, "A"]);

当您console.log()或console.table()数组时，您将看到新行已添加：

[

["Alice George", 28, 62, "A"],

["John Doe", 20, 60, "A"],

["Jane Doe", 10, 52, "B"],

["Petr Chess", 5, 24, "F"],

["Ling Jess", 28, 43, "A"],

["Ben Liard", 16, 51, "B"],

["Tom Right", 30, 32, "B"]

]

您还可以向内部数组添加元素，但只推送到一个内部数组而不影响所有数组元素是错误的。这是因为二维数组的每个元素数组具有相同数量的元素。

MathScore[0].push("B");

您可以一次向所有元素数组添加元素，而不是影响一个数组元素：

let MathScore = [

["John Doe", 20, 60, "A"],

["Jane Doe", 10, 52, "B"],

["Petr Chess", 5, 24, "F"],

["Ling Jess", 28, 43, "A"],

["Ben Liard", 16, 51, "B"]

];

MathScore.forEach((score) => {

let totalScore = score[1] + score[2];

score.push(totalScore);

});

console.log(MathScore);

这将返回：

[

["John Doe", 20, 60, "A", 80],

["Jane Doe", 10, 52, "B", 62],

["Petr Chess", 5, 24, "F", 29],

["Ling Jess", 28, 43, "A", 71],

["Ben Liard", 16, 51, "B", 67]

]

您还可以使用unshift()在开头插入元素的方法和splice()在数组中间插入元素的方法：

let MathScore = [

["John Doe", 20, 60, "A"],

["Jane Doe", 10, 52, "B"],

["Petr Chess", 5, 24, "F"],

["Ling Jess", 28, 43, "A"],

["Ben Liard", 16, 51, "B"]

];

MathScore.splice(2, 0, ["Alice George", 28, 62, "A"]);

在上面，1是您想要插入新数组的位置（记住它是零索引），0因此它不会删除任何元素，然后第三个参数是要添加的数组。

这是输出：

[

["John Doe", 20, 60, "A"],

["Jane Doe", 10, 52, "B"],

["Alice George", 28, 62, "A"],

["Petr Chess", 5, 24, "F"],

["Ling Jess", 28, 43, "A"],

["Ben Liard", 16, 51, "B"]

]

如何从二维数组中删除元素

pop()您还可以使用和方法从二维数组的开头和结尾删除元素shift()。push()这与和方法的工作方式类似unshift()，但这次您没有向方法添加任何参数。

let MathScore = [

["John Doe", 20, 60, "A"],

["Jane Doe", 10, 52, "B"],

["Petr Chess", 5, 24, "F"],

["Ling Jess", 28, 43, "A"],

["Ben Liard", 16, 51, "B"]

];

MathScore.pop();

MathScore.shift();

当您console.log()或console.table()数组时，您将看到第一个和最后一个数组元素已被删除：

[

["Jane Doe", 10, 52, "B"],

["Petr Chess", 5, 24, "F"],

["Ling Jess", 28, 43, "A"],

]

您还可以从每个数组元素中删除元素：

let MathScore = [

["John Doe", 20, 60, "A"],

["Jane Doe", 10, 52, "B"],

["Petr Chess", 5, 24, "F"],

["Ling Jess", 28, 43, "A"],

["Ben Liard", 16, 51, "B"]

];

MathScore.forEach((score) => {

score.pop();

});

console.log(MathScore);

这将返回：

[

["John Doe", 20, 60],

["Jane Doe", 10, 52],

["Petr Chess", 5, 24],

["Ling Jess", 28, 43],

["Ben Liard", 16, 51]

]

您还可以使用shift()方法删除开头的元素和splice()方法从特定位置删除数组元素：

let MathScore = [

["John Doe", 20, 60, "A"],

["Jane Doe", 10, 52, "B"],

["Petr Chess", 5, 24, "F"],

["Ling Jess", 28, 43, "A"],

["Ben Liard", 16, 51, "B"]

];

MathScore.splice(2, 1);

在上面的代码中，您从二维数组2的位置索引中删除了一项。MathScore这将输出：

[

["John Doe", 20, 60, "A"],

["Jane Doe", 10, 52, "B"],

["Ling Jess", 28, 43, "A"],

["Ben Liard", 16, 51, "B"]

]

注意：所有 JavaScript 数组方法都将对 2D 数组进行操作，因为它是数组的数组。您只需在调整 elements 数组中的各个元素时要小心即可。即使 JavaScript 中的二维数组并不严格，您也可以通过循环对所有元素进行类似的更改。

如何在 JavaScript 中创建二维数组

创建多维数组有两种选择。您可以使用数组文字表示法手动创建数组，该表示法使用方括号[]括起以逗号分隔的元素列表。您还可以使用嵌套循环。

如何使用数组文字创建二维数组

这就像我们一直在考虑使用以下语法的示例：

let arrayName = [

[ elements ],

[ elements ],

[ elements ], ... ];

例如，下面是一个二维数组，其中保存有关每个学生的数学分数和年级的信息：

let MathScore = [

["John Doe", 20, 60, "A"],

["Jane Doe", 10, 52, "B"],

["Petr Chess", 5, 24, "F"],

["Ling Jess", 28, 43, "A"],

["Ben Liard", 16, 51, "B"]

];

如何使用嵌套 for 循环创建二维数组

有很多方法可以做到这一点。但通常，您创建一个嵌套循环，其中第一个循环将循环遍历行，而第二个循环将循环遍历内部数组（列）中的元素：

let arr = [];

let rows = 4;

let columns = 3;

// creating two-dimensional array

for (let i = 0; i < rows; i++) {

arr[i] = [];

for (let j = 0; j < columns; j++) {

arr[i][j] = j;

}

}

console.log(arr);

在上面的代码中，您将首先循环遍历行。对于每一行，它将在声明并存储在变量中的原始数组中创建一个空数组arr。然后，您将创建一个嵌套循环来遍历列并添加单个元素。

在此示例中，使用了索引j并将输出：

[

[0, 1, 2],

[0, 1, 2],

[0, 1, 2],

[0, 1, 2]

]

您可以决定创建一个数字，用 0 初始化，然后在循环时增加，这样所有元素就不会具有相同的数字：

let arr = [];

let rows = 4;

let columns = 3;

let value = 0;

// creating two-dimensional array

for (let i = 0; i < rows; i++) {

arr[i] = [];

for (let j = 0; j < columns; j++) {

arr[i][j] = value++;

}

}

console.log(arr);

这将返回：

[

[0, 1, 2],

[3, 4, 5],

[6, 7, 8],

[9, 10, 11]

]

您还可以决定创建一个接受这些值作为参数的函数：

const create2Darr = (rows, columns) => {

let arr = [];

let value = 0;

// creating two-dimensional array

for (let i = 0; i < rows; i++) {

arr[i] = [];

for (let j = 0; j < columns; j++) {

arr[i][j] = value++;

}

}

console.log(arr);

};

let rows = 4;

let columns = 3;

create2Darr(rows, columns);

如何在 JavaScript 中更新二维数组中的元素

这与一维数组的处理方式非常相似，您可以通过使用索引分配另一个值来更新数组的值。

let array = [1, 2, 3];

array[1] = 5;

console.log(array); // returns [1, 5, 3]

您可以使用相同的方法来更改整行甚至单个元素：

let MathScore = [

["John Doe", 20, 60, "A"],

["Jane Doe", 10, 52, "B"],

["Petr Chess", 5, 24, "F"],

["Ling Jess", 28, 43, "A"],

["Ben Liard", 16, 51, "B"]

];

MathScore[1] = ["Alice George", 28, 62, "A"];

console.log(MathScore);

1这将用这个新数组替换索引的值：

[

["John Doe", 20, 60, "A"],

["Alice George", 28, 62, "A"],

["Petr Chess", 5, 24, "F"],

["Ling Jess", 28, 43, "A"],

["Ben Liard", 16, 51, "B"]

]

您可以通过跟踪行索引和列索引并更新它们的值来更新单个元素：

let MathScore = [

["John Doe", 20, 60, "A"],

["Jane Doe", 10, 52, "B"],

["Petr Chess", 5, 24, "F"],

["Ling Jess", 28, 43, "A"],

["Ben Liard", 16, 51, "B"]

];

MathScore[2][0] = "Jack Jim";

console.log(MathScore);

这会将索引行上的名称更改2为“Jack Jim”，如下所示：

[

["John Doe", 20, 60, "A"],

["Jane Doe", 10, 52, "B"],

["Jack Jim", 5, 24, "F"],

["Ling Jess", 28, 43, "A"],

["Ben Liard", 16, 51, "B"]

]

在本文中，您了解了二维数组是什么以及它们在 JavaScript 中的工作原理。重要的是要知道 JavaScript 中的二维数组的工作方式仍然与一维数组非常相似，因此请随意使用JavaScript 方法调整和操作它们。