原文： JavaScript 2D Array – Two Dimensional Arrays in JS
在 JavaScript 编程中，我们都习惯于创建和处理一维数组。这些数组中包含具有类似的数据类型或多种数据类型的元素。
但是我们也可以了解一下 JS 中的二维数组。
在这篇文章中，你将了解什么是二维数组以及它们在 JavaScript 中是如何运行的。它与其他编程语言有很大的不同，因为从技术上讲，JavaScript 中没有二维数组。
什么是二维数组
二维数组是一个数据元素的集合，以行和列的网格状结构排列。数组中的每个元素都被称为单元，可以通过其行和列的索引进行访问。
[ a1, a2, a3, ..., an,
b1, b2, b3, ..., bn,
c1, c2, c3, ..., cn,
.
.
.
z1, z2, z3, ..., zn ]
在 JavaScript 中，没有像其他常用的编程语言如 C、C++ 和 Java 那样直接创建二维数组的语法。
你可以通过一个数组的数组在 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 中创建二维数组之前，我们首先要学习如何访问二维数组中的元素。
你可以使用两个索引来访问二维数组中的元素，一个是行的索引，一个是列的索引。假设你有下面这个二维数组：
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 等等。
让我们先来学习如何在二维数组中添加/插入一个新的行和元素。
如何在二维数组中插入一个元素
你可以用 push() 和 unshift() 方法向二维数组中添加一个或许多元素。
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.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);
在上面的代码中，你从 MathScore 二维数组的索引 2 的位置删除了一个项目。这将输出：
[
["John Doe", 20, 60, "A"],
["Jane Doe", 10, 52, "B"],
["Ling Jess", 28, 43, "A"],
["Ben Liard", 16, 51, "B"]
]
注意：所有的 JavaScript 数组方法都会对二维数组进行操作，因为它是一个数组的数组。你只有在调整元素数组中的单个元素时才需要注意。你通过遍历对所有元素进行类似的改变，尽管 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);
在这个例子中，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 方法来调整和操作它们。
祝你编码愉快！
你可以访问我的网站以阅读我的 150 多篇文章。你也可以使用搜索栏来查看我是否写过特定的文章。