JavaScript 多维数组

摘要：在本教程中，您将学习如何使用 JavaScript 多维数组并有效地操作其元素。

JavaScript 多维数组简介

JavaScript 本身并不提供多维数组。但是，您可以通过定义一个包含元素的 数组 来创建一个多维数组，其中每个元素也是另一个数组。

因此，可以说 JavaScript 多维数组是数组的数组。定义多维数组的最简单方法是使用数组字面量表示法。

要声明一个空的多维数组，您使用与声明一维数组相同的语法。

let activities = [];Code language: JavaScript (javascript)

以下示例定义了一个名为 activities 的二维数组。

let activities = [
    ['Work', 9],
    ['Eat', 1],
    ['Commute', 2],
    ['Play Game', 1],
    ['Sleep', 7]
];Code language: JavaScript (javascript)

在 activities 数组中，第一维表示活动，第二维表示每天花费在每个活动上的时间数。

要将 activities 数组显示在控制台中，您可以使用以下方法使用 console.table() 方法。

console.table(activities);Code language: JavaScript (javascript)

以下是输出示例。

┌─────────┬─────────────┬───┐
│ (index) │      0      │ 1 │
├─────────┼─────────────┼───┤
│    0    │   'Work'    │ 9 │
│    1    │    'Eat'    │ 1 │
│    2    │  'Commute'  │ 2 │
│    3    │ 'Play Game' │ 1 │
│    4    │   'Sleep'   │ 7 │
└─────────┴─────────────┴───┘Code language: plaintext (plaintext)

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

要访问多维数组中的元素，您首先使用方括号访问外部数组的元素，它返回一个内部数组；然后使用另一个方括号访问内部数组的元素。

以下示例返回上面 activities 数组中第一个内部数组的第二个元素。

console.log(activities[0][1]); // 9Code language: JavaScript (javascript)

向 JavaScript 多维数组添加元素

您可以使用 push() 和 splice() 等数组方法来操作多维数组中的元素。

例如，要在多维数组的末尾添加一个新元素，您可以使用以下方法使用 push() 方法。

activities.push(['Study',2]);

console.table(activities);Code language: CSS (css)

┌─────────┬─────────────┬───┐
│ (index) │      0      │ 1 │
├─────────┼─────────────┼───┤
│    0    │   'Work'    │ 9 │
│    1    │    'Eat'    │ 1 │
│    2    │  'Commute'  │ 2 │
│    3    │ 'Play Game' │ 1 │
│    4    │   'Sleep'   │ 7 │
│    5    │   'Study'   │ 2 │
└─────────┴─────────────┴───┘Code language: plaintext (plaintext)

要在数组中间插入一个元素，您可以使用 splice() 方法。以下示例在 activities 数组的第二个位置插入一个元素。

activities.splice(1, 0, ['Programming', 2]);

console.table(activities);Code language: CSS (css)

以下是输出。

┌─────────┬───────────────┬───┐
│ (index) │       0       │ 1 │
├─────────┼───────────────┼───┤
│    0    │    'Work'     │ 9 │
│    1    │ 'Programming' │ 2 │
│    2    │     'Eat'     │ 1 │
│    3    │   'Commute'   │ 2 │
│    4    │  'Play Game'  │ 1 │
│    5    │    'Sleep'    │ 7 │
│    6    │    'Study'    │ 2 │
└─────────┴───────────────┴───┘Code language: plaintext (plaintext)

此示例计算每个活动花费时间的百分比并将百分比追加到内部数组。

activities.forEach(activity => {
    let percentage = ((activity[1] / 24) * 100).toFixed();
    activity[2] = percentage + '%';
});

console.table(activities);Code language: JavaScript (javascript)

以下显示控制台中的输出。

┌─────────┬───────────────┬───┬───────┐
│ (index) │       0       │ 1 │   2   │
├─────────┼───────────────┼───┼───────┤
│    0    │    'Work'     │ 9 │ '38%' │
│    1    │ 'Programming' │ 2 │ '8%'  │
│    2    │     'Eat'     │ 1 │ '4%'  │
│    3    │   'Commute'   │ 2 │ '8%'  │
│    4    │  'Play Game'  │ 1 │ '4%'  │
│    5    │    'Sleep'    │ 7 │ '29%' │
│    6    │    'Study'    │ 2 │ '8%'  │
└─────────┴───────────────┴───┴───────┘Code language: plaintext (plaintext)

从 JavaScript 多维数组中删除元素

要从数组中删除元素，您可以使用 pop() 或 splice() 方法。

例如，以下语句删除了 activities 数组的最后一个元素。

activities.pop();

console.table(activities);Code language: CSS (css)

输出

┌─────────┬───────────────┬───┬───────┐
│ (index) │       0       │ 1 │   2   │
├─────────┼───────────────┼───┼───────┤
│    0    │    'Work'     │ 9 │ '38%' │
│    1    │ 'Programming' │ 2 │ '8%'  │
│    2    │     'Eat'     │ 1 │ '4%'  │
│    3    │   'Commute'   │ 2 │ '8%'  │
│    4    │  'Play Game'  │ 1 │ '4%'  │
│    5    │    'Sleep'    │ 7 │ '29%' │
└─────────┴───────────────┴───┴───────┘Code language: plaintext (plaintext)

类似地，您可以通过使用 pop() 方法从多维数组的内部数组中删除元素。以下示例从 activities 数组的内部数组中删除百分比元素。

activities.forEach((activity) => {
    activity.pop(2);
});

console.table(activities);Code language: JavaScript (javascript)

输出

┌─────────┬───────────────┬───┐
│ (index) │       0       │ 1 │
├─────────┼───────────────┼───┤
│    0    │    'Work'     │ 9 │
│    1    │ 'Programming' │ 2 │
│    2    │     'Eat'     │ 1 │
│    3    │   'Commute'   │ 2 │
│    4    │  'Play Game'  │ 1 │
│    5    │    'Sleep'    │ 7 │
└─────────┴───────────────┴───┘Code language: plaintext (plaintext)

迭代 JavaScript 多维数组中的元素

要迭代多维数组，您可以使用嵌套的 for 循环，如以下示例所示。

// loop the outer array
for (let i = 0; i < activities.length; i++) {
    // get the size of the inner array
    var innerArrayLength = activities[i].length;
    // loop the inner array
    for (let j = 0; j < innerArrayLength; j++) {
        console.log('[' + i + ',' + j + '] = ' + activities[i][j]);
    }
}Code language: JavaScript (javascript)

第一个循环迭代外部数组中的元素，嵌套循环迭代内部数组中的元素。

以下是脚本在控制台中的输出。

[0,0] = Work
[0,1] = 9
[1,0] = Eat
[1,1] = 1
[2,0] = Commute
[2,1] = 2
[3,0] = Play Game
[3,1] = 1
[4,0] = Sleep
[4,1] = 7
[5,0] = Study
[5,1] = 2

或者，您可以使用 forEach() 方法两次。

activities.forEach((activity) => {
    activity.forEach((data) => {
        console.log(data);
    });
});Code language: JavaScript (javascript)

输出

Work
9
Eat
1
Commute
2
Play Game
1
Sleep
7
Study
2Code language: plaintext (plaintext)

在本教程中，您学习了如何使用数组的数组来创建 JavaScript 多维数组。