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 stringNumbers = numbers.map(num => num.toString());console.log(stringNumbers); // ['1', '2', '3', '4', '5']

2. filter方法

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

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

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((a, b) => Math.max(a, b));console.log(max); // 5// 将数组转换为对象const obj = numbers.reduce((acc, curr, index) => {  acc[`item${index}`] = curr;  return acc;}, {});console.log(obj); // { item0: 1, item1: 2, item2: 3, item3: 4, item4: 5 }

4. 方法链式调用

这些方法可以链式调用，实现复杂的数据转换：

const products = [  { name: 'iPhone', price: 999, inStock: true },  { name: 'MacBook', price: 1299, inStock: false },  { name: 'iPad', price: 799, inStock: true },  { name: 'AirPods', price: 159, inStock: true },];// 获取有库存的产品名称，并转换为大写const availableProducts = products  .filter(product => product.inStock)  .map(product => product.name.toUpperCase());console.log(availableProducts); // ['IPHONE', 'IPAD', 'AIRPODS']// 计算有库存产品的总价格const totalPrice = products  .filter(product => product.inStock)  .reduce((sum, product) => sum + product.price, 0);console.log(totalPrice); // 1957

总结

map()：转换数组中的每个元素，生成一个新数组filter()：筛选符合条件的元素，生成一个新数组reduce()：将数组元素累积为单个值

这些方法让数据处理更加简洁和可读，是现代JavaScript开发中必不可少的工具。