【零基础学JS - 23 】JavaScript 中的多维数组

👨‍💻 作者简介：程序员半夏 , 一名全栈程序员，擅长使用各种编程语言和框架，如JavaScript、React、Node.js、Java、Python、Django、MySQL等.专注于大前端与后端的硬核干货分享,同时是一个随缘更新的UP主. 你可以在各个平台找到我!
🏆 本文收录于专栏: 零基础学JavaScript,包含JavaScript 基础知识,DOM相关知识,高级知识点,最新ES特性
————————————————————————
🔥 热门专栏:

🥇 学透CSS: 全网阅读超百万,CSDN最强CSS专栏,精通CSS全属性，不做切图仔，从订阅本专栏开始!

🥇 SprinbBoot + Vue3 项目实战: 新鲜出炉的2023实战系列博客,配套视频,用心打磨,篇篇精品.持续更新,值得订阅!

多维数组是包含另一个数组的数组。例如，

// 多维数组
const data = [[1, 2, 3], [1, 3, 4], [4, 5, 6]];

创建多维数组

以下是如何在 JavaScript 中创建多维数组的方法。

示例 1

let studentsData = [['Jack', 24], ['Sara', 23], ['Peter', 24]];

示例 2

let student1 = ['Jack', 24];
let student2 = ['Sara', 23];
let student3 = ['Peter', 24];

// 多维数组
let studentsData = [student1, student2, student3];

在这里，示例 1 和示例 2 使用相同的数据创建了一个多维数组。

访问数组元素

你可以使用索引（0、1、2…）访问多维数组的元素。例如，

let x = [
    ['Jack', 24],
    ['Sara', 23], 
    ['Peter', 24]
];

// 访问第一个项
console.log(x[0]); // ["Jack", 24]

// 访问第一个内部数组的第一个项
console.log(x[0][0]); // Jack

// 访问第三个内部数组的第二个项
console.log(x[2][1]); // 24

你可以将多维数组（在本例中为 x）视为一个具有 3 行 2 列的表格。

添加元素到多维数组

你可以使用数组的 push() 方法或索引表示法将元素添加到多维数组中。

let studentsData = [['Jack', 24], ['Sara', 23]];
studentsData.push(['Peter', 24]);

console.log(studentsData); // [["Jack", 24], ["Sara", 23], ["Peter", 24]]

添加元素到内部数组

使用索引表示法

let studentsData = [['Jack', 24], ['Sara', 23]];
studentsData[1][2] = 'hello';

console.log(studentsData); // [["Jack", 24], ["Sara", 23, "hello"]]

使用 push()

let studentsData = [['Jack', 24], ['Sara', 23]];
studentsData[1].push('hello');

console.log(studentsData); // [["Jack", 24], ["Sara", 23, "hello"]]

使用 splice()

你还可以使用数组的 splice() 方法在指定的索引处添加元素。例如，

let studentsData = [['Jack', 24], ['Sara', 23]];

// 在索引 1 处添加元素
studentsData.splice(1, 0, ['Peter', 24]);

console.log(studentsData); // [["Jack", 24], ["Peter", 24], ["Sara", 23]]

从多维数组中删除元素

你可以使用数组的 pop() 方法从多维数组中删除元素。例如，

从外部数组中删除元素

let studentsData = [['Jack', 24], ['Sara', 23]];
studentsData.pop();

console.log(studentsData); // [["Jack", 24]]

从内部数组中删除元素

let studentsData = [['Jack', 24], ['Sara', 23]];
studentsData[1].pop();

console.log(studentsData); // [["Jack", 24], ["Sara"]]

你还可以使用 splice() 方法在指定的索引处删除元素。例如，

let studentsData = [['Jack', 24], ['Sara', 23]];

// 删除索引为 1 的数组项
studentsData.splice(1,1);
console.log(studentsData); // [["Jack", 24]]

遍历多维数组

你可以使用数组的 forEach() 方法遍历多维数组。例如，

let studentsData = [['Jack', 24], ['Sara', 23]];

// 遍历 studentsData
studentsData.forEach((student) => {
    student.forEach((data) => {
        console.log(data);
    });
});

输出结果

Jack
24
Sara
23

第一个 forEach() 方法用于遍历外部数组元素，第二个 forEach() 方法用于遍历内部数组元素。

你还可以使用 for…of 循环遍历多维数组。例如，

let studentsData = [['Jack', 24], ['Sara', 23]];

for (let i of studentsData) {
  for (let j of i) {
    console.log(j);
  }
}

你还可以使用 for 循环遍历多维数组。例如，

let studentsData = [['Jack', 24], ['Sara', 23]];

// 遍历外部数组元素
for(let i = 0; i < studentsData.length; i++){

    // 获取内部数组元素的长度
    let innerArrayLength = studentsData[i].length;
    
    // 遍历内部数组元素
    for(let j = 0; j < innerArrayLength; j++) {
        console.log(studentsData[i][j]);
    }
}