在本篇关于对象与数组之数组的方法的章节中，我们将深入探讨如何处理嵌套数组，通过实例来说明其常用方法。这个主题将帮助你更好地理解和使用 JavaScript 中的嵌套结构，尤其是在数据处理和DOM操作前的准备工作。
复习一下上篇内容
在上一篇中，我们讨论了对象和数组之数组的基本操作。我们学习了如何创建对象和数组，如何访问它们的成员，以及如何进行基本的增删改查操作。从而奠定了我们在本篇深入学习方法的基础。
现在，让我们开始探讨对象和数组之数组中的常用方法。
数组之数组简介
数组之数组，顾名思义，是指数组的元素也是数组。这是一种常见的数据结构，适用于表示二维矩阵、表格等。我们用一个简单的案例来说明：
1
2
3
4
5
| 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 方法允许我们遍历数组中每一个元素，并对其执行特定操作，适用于处理数组之数组。
1
2
3
4
5
| matrix.forEach(row => {
row.forEach(value => {
console.log(value);
});
});
|
在上述示例中，我们使用了两个 forEach 方法来打印每个元素的值。
2. map 方法
map 方法用来创建一个新数组，数组中的元素为原数组调用函数处理后的值。这对于处理二维数组尤其有用。
1
2
| const squares = matrix.map(row => row.map(value => value * value));
console.log(squares);
|
在这个例子中，我们生成了一个新数组 squares，其中的每个元素都是原矩阵中对应元素的平方。
3. reduce 方法
reduce 方法可以将数组中的元素聚合成一个单一的输出值，非常适合用于计算总和或其它统计值。
1
2
3
4
| const sum = matrix.reduce((accumulator, row) => {
return accumulator + row.reduce((rowAcc, value) => rowAcc + value, 0);
}, 0);
console.log(sum);
|
这里我们使用了嵌套的 reduce 方法，先对每一行求和，然后将所有行的和相加，得到了矩阵中所有值的总和。
4. filter 方法
filter 方法用于根据条件过滤出新的数组。我们可以使用这个方法来从数组之数组中筛选值。
1
2
| const evenNumbers = matrix.flatMap(row => row).filter(value => value % 2 === 0);
console.log(evenNumbers);
|
在此案例中，我们首先使用 flatMap 将二维数组展平成一维数组，然后过滤出所有的偶数。
5. flat 方法
flat 方法用于将嵌套的数组拉平，以便于我们更方便地处理数据。例如，将二维数组拉平为一维数组。
1
2
| const flatArray = matrix.flat();
console.log(flatArray);
|
结合案例
让我们结合一个综合案例，显示如何使用上述方法来处理一个学生成绩的数组之数组。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| 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);
const highScores = studentsScores.flatMap(row => row).filter(score => score > 85);
console.log(highScores);
|
在这个例子中，我们计算了每个学生的平均分，并筛选出高于85的分数。
结论
在这一部分，我们学习了如何处理对象与数组之数组中的一些基本方法，以及如何结合实际案例应用这些方法。这些技巧不仅可以帮助你更好地处理复杂的数据结构，还为后续的 DOM 操作奠定了基础。
在下一篇中，我们将进入 DOM 操作的世界，学习什么是 DOM 以及如何操作它。希望你能通过这一系列教程，逐步掌握 Javascript 的核心概念与技能。