JavaScript中的数组方法：map、filter和reduce详解

JavaScript数组提供了许多强大的方法，其中map、filter和reduce是最常用的三个高阶函数。它们可以帮助我们以声明式的方式处理数组数据，而不必使用传统的for循环。

1. map方法

map()方法创建一个新数组，其结果是该数组中的每个元素调用一次提供的函数后的返回值。

const numbers = [1, 2, 3, 4, 5];// 将每个数字乘以2const doubled = numbers.map(num => num * 2);console.log(doubled); // [2, 4, 6, 8, 10]// 将数字转换为字符串const numberStrings = numbers.map(num => num.toString());console.log(numberStrings); // ['1', '2', '3', '4', '5']

map方法不会改变原数组，而是返回一个新数组。它接收三个参数：当前元素、当前索引和原数组。

2. filter方法

filter()方法创建一个新数组，其包含通过所提供函数测试的所有元素。

const numbers = [1, 2, 3, 4, 5, 6];// 过滤出偶数const evens = numbers.filter(num => num % 2 === 0);console.log(evens); // [2, 4, 6]// 过滤出大于3的数字const greaterThanThree = numbers.filter(num => num > 3);console.log(greaterThanThree); // [4, 5, 6]

与map类似，filter也不会改变原数组，而是返回一个新数组。

3. reduce方法

reduce()方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

const numbers = [1, 2, 3, 4, 5];// 计算总和const sum = numbers.reduce((accumulator, currentValue) => {  return accumulator + currentValue;}, 0);console.log(sum); // 15// 找出最大值const max = numbers.reduce((acc, curr) => {  return Math.max(acc, curr);}, -Infinity);console.log(max); // 5

reduce方法接收两个参数：一个回调函数和一个初始值。回调函数有四个参数：累加器、当前值、当前索引和原数组。

4. 方法链式调用

这些方法可以链式调用，创建复杂的数据转换管道。

const products = [  { name: 'Laptop', price: 1000, category: 'electronics' },  { name: 'Shirt', price: 30, category: 'clothing' },  { name: 'Phone', price: 800, category: 'electronics' },  { name: 'Pants', price: 50, category: 'clothing' }];// 获取电子类产品名称的数组const electronicProductNames = products  .filter(product => product.category === 'electronics')  .map(product => product.name);console.log(electronicProductNames); // ['Laptop', 'Phone']// 计算所有衣服类产品的总价const clothingTotal = products  .filter(product => product.category === 'clothing')  .reduce((sum, product) => sum + product.price, 0);console.log(clothingTotal); // 80

使用这些高阶函数可以使代码更加简洁、易读，并且减少了副作用的发生。它们是现代JavaScript开发中不可或缺的工具。