数组常用方法：forEach, map, filter, reduce 的用法与区别
欢迎来到今天的数组方法讲座！
大家好，欢迎来到今天的讲座！今天我们要聊一聊 JavaScript 中数组的四个常用方法：forEach、map、filter 和 reduce。这四个方法是前端开发中非常常见的工具，掌握它们不仅能让你的代码更加简洁，还能提高性能和可读性。
为了让这次讲座更加轻松有趣，我会尽量用通俗易懂的语言来解释这些方法，并且通过一些简单的例子帮助大家更好地理解它们的区别。准备好了吗？我们开始吧！
1. forEach：遍历数组，做点小事情
forEach 是最基础的数组遍历方法之一。它的作用很简单：对数组中的每一个元素执行一次给定的函数。你可以把它想象成一个“走马观花”的工具，它会帮你逐个访问数组中的每个元素，但不会返回任何新的东西。
语法：
array.forEach(function(currentValue, index, array) {
// 执行你想做的事情
});currentValue：当前正在处理的元素。index（可选）：当前元素的索引。array（可选）：调用forEach的数组本身。
示例：
假设我们有一个水果数组，我们想在控制台输出每个水果的名字。
const fruits = ['苹果', '香蕉', '橙子'];
fruits.forEach(fruit => {
console.log(`我喜欢吃 ${fruit}`);
});
// 输出：
// 我喜欢吃 苹果
// 我喜欢吃 香蕉
// 我喜欢吃 橙子注意事项：
forEach不会返回任何值，它的作用只是执行你传入的函数。- 如果你需要中断遍历，
forEach并不支持break或return来提前退出循环。如果你需要提前退出，可以考虑使用for循环或其他方法。
2. map：遍历并创建新数组
map 是 forEach 的升级版。它不仅会遍历数组中的每个元素，还会根据你提供的函数生成一个新的数组。换句话说，map 会在遍历的同时对每个元素进行某种操作，并将结果保存到一个新的数组中。
语法：
const newArray = array.map(function(currentValue, index, array) {
// 返回你想要的新值
});newArray：map会返回一个新的数组，包含所有经过处理后的元素。currentValue：当前正在处理的元素。index（可选）：当前元素的索引。array（可选）：调用map的数组本身。
示例：
假设我们有一个数字数组，我们想将每个数字乘以 2 并生成一个新的数组。
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers); // 输出: [2, 4, 6, 8, 10]注意事项：
map总是返回一个新的数组，原始数组不会被修改。- 如果你在
map中没有返回任何值，新数组中的对应位置将会是undefined。
3. filter：筛选出符合条件的元素
filter 是用来从数组中筛选出符合条件的元素，并返回一个包含这些元素的新数组。你可以把它想象成一个“过滤器”，它会根据你提供的条件，只保留那些符合条件的元素。
语法：
const newArray = array.filter(function(currentValue, index, array) {
// 返回 true 或 false
});newArray：filter会返回一个新的数组，包含所有符合条件的元素。currentValue：当前正在处理的元素。index（可选）：当前元素的索引。array（可选）：调用filter的数组本身。
示例：
假设我们有一个数字数组，我们只想保留其中大于 3 的数字。
const numbers = [1, 2, 3, 4, 5];
const filteredNumbers = numbers.filter(number => number > 3);
console.log(filteredNumbers); // 输出: [4, 5]注意事项：
filter总是返回一个新的数组，原始数组不会被修改。- 如果没有任何元素符合筛选条件，
filter会返回一个空数组。
4. reduce：累积计算，得出最终结果
reduce 是一个强大的工具，它允许你对数组中的所有元素进行累积计算，最终得到一个单一的结果。你可以把它想象成一个“累加器”，它会根据你提供的逻辑，逐步处理数组中的每个元素，并将结果传递给下一个元素，直到处理完所有元素。
语法：
const result = array.reduce(function(accumulator, currentValue, index, array) {
// 返回累积的结果
}, initialValue);result：reduce会返回最终的累积结果。accumulator：累积器，保存了上一次迭代的结果。currentValue：当前正在处理的元素。index（可选）：当前元素的索引。array（可选）：调用reduce的数组本身。initialValue（可选）：初始值，如果不提供，默认为数组的第一个元素。
示例：
假设我们有一个数字数组，我们想计算所有数字的总和。
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(sum); // 输出: 15注意事项：
reduce返回的是一个单一的结果，而不是数组。- 如果你不提供
initialValue，reduce会默认使用数组的第一个元素作为初始值，从第二个元素开始累加。 - 如果数组为空且没有提供
initialValue，reduce会抛出错误。
方法对比表格
为了更直观地理解这四个方法的区别，我们可以通过一个表格来总结它们的特点：
| 方法 | 是否返回新数组 | 是否修改原数组 | 主要用途 |
|---|---|---|---|
forEach |
否 | 否 | 遍历数组，执行某些操作 |
map |
是 | 否 | 遍历数组，生成新数组 |
filter |
是 | 否 | 筛选出符合条件的元素 |
reduce |
否 | 否 | 累积计算，返回单一结果 |
总结
今天我们学习了 JavaScript 中数组的四个常用方法：forEach、map、filter 和 reduce。它们各自有不同的用途：
forEach适合用于遍历数组并执行某些操作，但它不会返回任何结果。map适合用于遍历数组并对每个元素进行处理，同时生成一个新的数组。filter适合用于从数组中筛选出符合条件的元素，生成一个新的数组。reduce适合用于对数组中的所有元素进行累积计算，最终得到一个单一的结果。
希望今天的讲座能帮助大家更好地理解和使用这些方法。如果你有任何问题，欢迎随时提问！下次见！
