18 对象与数组之数组中的方法

在本篇关于对象与数组之数组的方法的章节中，我们将深入探讨如何处理嵌套数组，通过实例来说明其常用方法。这个主题将帮助你更好地理解和使用 JavaScript 中的嵌套结构，尤其是在数据处理和DOM操作前的准备工作。

复习一下上篇内容

在上一篇中，我们讨论了对象和数组之数组的基本操作。我们学习了如何创建对象和数组，如何访问它们的成员，以及如何进行基本的增删改查操作。从而奠定了我们在本篇深入学习方法的基础。

现在，让我们开始探讨对象和数组之数组中的常用方法。

数组之数组简介

数组之数组，顾名思义，是指数组的元素也是数组。这是一种常见的数据结构，适用于表示二维矩阵、表格等。我们用一个简单的案例来说明：

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

上述代码定义了一个名为 matrix 的数组，其中包含了三个元素，每个元素都是一个数组。在matrix中，matrix[0]表示第一行数组[1, 2, 3]，matrix[1]表示第二行数组[4, 5, 6]，以此类推。

常用方法

1. forEach 方法

forEach 方法允许我们遍历数组中每一个元素，并对其执行特定操作，适用于处理数组之数组。

matrix.forEach(row => {
    row.forEach(value => {
        console.log(value);
    });
});

在上述示例中，我们使用了两个 forEach 方法来打印每个元素的值。

2. map 方法

map 方法用来创建一个新数组，数组中的元素为原数组调用函数处理后的值。这对于处理二维数组尤其有用。

const squares = matrix.map(row => row.map(value => value * value));
console.log(squares);  // [[1, 4, 9], [16, 25, 36], [49, 64, 81]]

在这个例子中，我们生成了一个新数组 squares，其中的每个元素都是原矩阵中对应元素的平方。

3. reduce 方法

reduce 方法可以将数组中的元素聚合成一个单一的输出值，非常适合用于计算总和或其它统计值。

const sum = matrix.reduce((accumulator, row) => {
    return accumulator + row.reduce((rowAcc, value) => rowAcc + value, 0);
}, 0);
console.log(sum);  // 45

这里我们使用了嵌套的 reduce 方法，先对每一行求和，然后将所有行的和相加，得到了矩阵中所有值的总和。

4. filter 方法

filter 方法用于根据条件过滤出新的数组。我们可以使用这个方法来从数组之数组中筛选值。

const evenNumbers = matrix.flatMap(row => row).filter(value => value % 2 === 0);
console.log(evenNumbers);  // [2, 4, 6, 8]

在此案例中，我们首先使用 flatMap 将二维数组展平成一维数组，然后过滤出所有的偶数。

5. flat 方法

flat 方法用于将嵌套的数组拉平，以便于我们更方便地处理数据。例如，将二维数组拉平为一维数组。

const flatArray = matrix.flat();
console.log(flatArray);  // [1, 2, 3, 4, 5, 6, 7, 8, 9]

结合案例

让我们结合一个综合案例，显示如何使用上述方法来处理一个学生成绩的数组之数组。

const studentsScores = [
    [85, 78, 92],
    [74, 88, 91],
    [88, 77, 85]
];

// 计算每个学生的平均分
const averageScores = studentsScores.map(row => {
    const total = row.reduce((acc, score) => acc + score, 0);
    return total / row.length;
});
console.log(averageScores);  // [85, 84.33, 83.33]

// 找到所有高于85分的成绩
const highScores = studentsScores.flatMap(row => row).filter(score => score > 85);
console.log(highScores);  // [92, 88, 91, 88, 86]

在这个例子中，我们计算了每个学生的平均分，并筛选出高于85的分数。

结论

在这一部分，我们学习了如何处理对象与数组之数组中的一些基本方法，以及如何结合实际案例应用这些方法。这些技巧不仅可以帮助你更好地处理复杂的数据结构，还为后续的 DOM 操作奠定了基础。

在下一篇中，我们将进入 DOM 操作的世界，学习什么是 DOM 以及如何操作它。希望你能通过这一系列教程，逐步掌握 Javascript 的核心概念与技能。