跳到主要内容

JavaScript 多维数组

提示
  1. 创建多维数组：JavaScript 中的多维数组是一个包含另一个数组的数组。可以通过数组字面量 [] 或使用索引符号创建多维数组。
  2. 访问和添加数组元素：通过索引访问多维数组的元素，并可使用 push() 或索引记法向多维数组添加元素。也可以使用 splice() 方法在特定索引处添加元素。
  3. 移除数组元素和遍历：使用 pop() 和 splice() 方法从多维数组中移除元素。可通过 forEach() 方法、for...of 循环或传统的 for 循环来遍历多维数组的元素。

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

// 多维数组
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()方法在指定索引处添加元素。例如，

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]]

迭代多维数组​

您可以使用 Array's 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]);
  }
}
最后于 更新