5 个重要的 JavaScript 数组方法
筛选
地图
对于每个
寻找
减少
数组是任何编程语言的关键组成部分。在各种类型的项目中，数组都经常被用到，了解如何与数组交互将使你的编程之旅更加愉快。
在讨论数组方法之前，我们先来了解一下什么是数组：
数组是一种可以存储任何类型数据的数据结构。数组可以包含多种元素的组合，例如字符串、数字或布尔值。例如，电影名称数组或数字数组，如下例所示：
const films = ["Harry Potter", "Tenet", "Mulan", "Wonder Woman"];
const numbers = [1, 34, 23, 17, 10, 7];
现在我们知道了数组是什么，接下来我们可以讨论一些非常重要的数组方法。
以下示例将使用一个对象数组来演示不同的数组方法。该数组包含电影的各种信息，例如片名、年份和评分，如下所示。
const films = [
{ name: "Tenet", year: 2020, rating: 7.5 },
{ name: "Wonder Woman 1984", year: 2020, rating: 5.4 },
{ name: "The Karate Kid", year: 1984, rating: 7.3 },
{ name: "Avengers: Endgame", year: 2019, rating: 8.4 },
{ name: "The Godfather", year: 1972, rating: 9.2 },
{ name: "Godzilla", year: 2014, rating: 6.4 },
{ name: "The Croods: A New Age", year: 2020, rating: 7.0 }
];
筛选
顾名思义，`filter` 方法可以根据条件从数组中筛选或提取任何类型的信息。它会返回或创建一个包含筛选项的新数组。在下面的示例中，我们将获取所有在 2000 年之前上映的电影。
const filteredFilms = films.filter(film => {
return film.year < 2000; // condition
});
/*
Output: filteredFilms = [
{ name: "The Karate Kid", year: 1984, rating: 7.3 },
{ name: "The Godfather", year: 1972, rating: 9.2 },
]
*/
地图
Map 方法允许您遍历数组中的所有元素，并根据提供的函数执行特定任务。Map 还会创建一个包含结果的新数组。在下面的示例中，我们将获取所有电影的名称。
const filmNames = films.map((film) => {
return film.name;
});
/*
Output: ["Tenet", "Wonder Woman 1984", "The Karate Kid",
"Avengers: Endgame", "The Godfather", "Godzilla",
"The Croods: A New Age"]
*/
对于每个
`foreach` 方法也允许我们遍历数组中的所有元素，但不同之处在于它不会创建新数组，而是对每个元素执行提供的函数。在下面的示例中，我们将在控制台上显示一个字符串，其中包含电影名称及其评分。
films.forEach((film) => {
console.log(`${film.name} has a rating of ${film.rating}`);
});
/*
Output: Tenet has a rating of 7.5
Wonder Woman 1984 has a rating of 5.4
The Karate Kid has a rating of 7.3
Avengers: Endgame has a rating of 8.4
The Godfather has a rating of 9.2
Godzilla has a rating of 6.4
The Croods: A New Age has a rating of 7
*/
寻找
`find` 方法返回数组中第一个满足所提供函数条件的元素。如果没有元素满足条件，则返回“undefined”。在下面的示例中，我们传递一个测试函数来查找电影名称。
const foundFilm = films.find((film) => {
return film.name === "Avengers: Endgame"; //condition
});
// Output: {name: "Avengers: Endgame", year: 2019, rating: 8.4}
减少
最后，我们来看 reduce 方法，它有点难理解。它允许我们遍历数组中的每个元素，并通过传递一个 reducer 函数和一个可选的初始值，将所有元素合并成一个结果。这个 reducer 函数接受 4 个不同的参数。
- 累加器
- 当前值
- 当前指数
- 源数组
我们现在要关注的参数是累加器（每次迭代的当前总数）和当前值（每次迭代中可访问的当前项）。
在下面的示例中，我们传递一个 reducer 函数，该函数将每部电影的评分加上初始值 0，然后在控制台上显示平均值。
const total = films.reduce((currentTotal, currentValue) => {
return currentTotal + currentValue.rating;
}, 0);
// total = 51.199999999999996
console.log(total / films.length); // 7.314285714285714
今天就到这里啦！感谢阅读我的第一篇开发者博客文章。我会继续发布更多关于网页开发、编程以及我所学到的知识的内容。祝大家编程愉快！😃 下次见！
文章来源：https://dev.to/marlonry/5-important-javascript-array-methods-4kkm