Jupyter AI

17 JavaScript 基础教程:仅生成对象与数组之数组的基本操作

📅 发表日期: 2024年8月10日

分类: 🟨JavaScript 入门

👁️阅读: --

在之前的章节中,我们学习了对象与数组的字面量形式。接下来,我们将深入探讨“数组之数组”的基本操作。我们将会认识到什么是“数组之数组”,如何创建它们,以及我们可以对它们进行的基本操作。

什么是数组之数组?

在 JavaScript 中,一个“数组之数组”是一种数组,里面的每个元素都是一个数组。这样的结构在处理表格数据或多维数据时特别有用。

例如,以下是一个简单的“数组之数组”示例:

let arrayOfArrays = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

这里的 arrayOfArrays 是一个包含三个数组的数组。每个内部数组也称为子数组。

创建数组之数组

你可以使用基本的数组字面量语法来创建一个“数组之数组”。以下是一个示例:

let fruits = [
    ["apple", "banana"],
    ["orange", "grape"],
    ["mango", "pineapple"]
];

在这个示例中,fruits 是一个包含三个子数组的数组,每个子数组内都是水果名称。

访问数组之数组的元素

要访问“数组之数组”中的元素,我们可以通过多重索引实现。格式如下:

let item = arrayOfArrays[rowIndex][columnIndex];

例如,如果我们想要获取 fruits 中第二个子数组的第一个元素,我们可以这么做:

let secondFruit = fruits[1][0]; // "orange"

修改数组之数组的元素

同样,我们可以使用多重索引来修改数组中的元素。例如,假如我们想将 fruits 中的“banana”改为“kiwi”,我们可以这样做:

fruits[0][1] = "kiwi"; // 将 "banana" 修改为 "kiwi"

此时,fruits 将变为:

[
    ["apple", "kiwi"],
    ["orange", "grape"],
    ["mango", "pineapple"]
]

添加与删除元素

添加子数组

我们可以使用 push 方法向“数组之数组”添加新的子数组。例如,添加一个新的子数组 ["strawberry", "blueberry"]

fruits.push(["strawberry", "blueberry"]);

现在,fruits 将变为:

[
    ["apple", "kiwi"],
    ["orange", "grape"],
    ["mango", "pineapple"],
    ["strawberry", "blueberry"]
]

删除子数组

想要移除“数组之数组”中的某个子数组,可以使用 splice 方法。例如,要删除 fruits 中的第三个子数组:

fruits.splice(2, 1); // 删除索引为2的子数组

经过此操作后,fruits 变为:

[
    ["apple", "kiwi"],
    ["orange", "grape"],
    ["strawberry", "blueberry"]
]

添加元素到子数组

你也可以向子数组添加元素。例如,向 fruits 的第一个子数组添加“grapefruit”:

fruits[0].push("grapefruit");

现在 fruits 为:

[
    ["apple", "kiwi", "grapefruit"],
    ["orange", "grape"],
    ["strawberry", "blueberry"]
]

删除元素从子数组

使用 pop 方法可以删除子数组中的最后一个元素。例如,从第一个子数组中删除:

fruits[0].pop(); // 会删除 "grapefruit"

此时 fruits 再次更新:

[
    ["apple", "kiwi"],
    ["orange", "grape"],
    ["strawberry", "blueberry"]
]

总结

在这一篇教程中,我们详细了解了“数组之数组”的创建、访问、修改、添加和删除操作。通过实际案例,我们可以看到如何有效地利用这种数据结构。

在下一篇教程中,我们将深入研究“数组之数组”中常用的方法,包括 mapfilterreduce 等函数。继续关注,学习更多 JavaScript 相关知识!