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

数组方法的强大之处

JavaScript提供了许多强大的数组方法，其中最常用的三个是map、filter和reduce。这些方法不仅可以让代码更简洁，还能提高可读性和可维护性。

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];// 过滤出偶数const evens = numbers.filter(num => num % 2 === 0);console.log(evens); // [2, 4]// 过滤出大于3的数字const greaterThanThree = numbers.filter(num => num > 3);console.log(greaterThanThree); // [4, 5]

3. reduce方法

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

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

组合使用示例

这些方法可以很好地组合使用，创建出强大的数据转换管道。

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()用于将数组缩减为单个值

掌握这三个方法可以大大提升你处理数组数据的能力，写出更简洁、更易读的代码。