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

JavaScript数组提供了许多强大的内置方法，其中map、filter和reduce是最常用且功能强大的几个方法。这些方法可以帮助我们以声明式的方式处理数组数据，而不需要编写传统的for循环。

1. map方法

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

const numbers = [1, 2, 3, 4];const doubled = numbers.map(num => num * 2);console.log(doubled); // [2, 4, 6, 8]

map方法不会改变原数组，而是返回一个新数组。它接受三个参数：

当前元素当前索引原数组本身

const names = ['Alice', 'Bob', 'Charlie'];const nameLengths = names.map((name, index, arr) => {  return `${name} is at index ${index} in array [${arr}]`;});console.log(nameLengths);

2. filter方法

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

const numbers = [1, 2, 3, 4, 5];const evenNumbers = numbers.filter(num => num % 2 === 0);console.log(evenNumbers); // [2, 4]

与map类似，filter也不会改变原数组。它同样接受三个参数：

当前元素当前索引原数组本身

const words = ['apple', 'banana', 'grape', 'orange', 'pear'];const longWords = words.filter((word, index) => {  return word.length > 5 && index < 4;});console.log(longWords); // ['banana', 'orange']

3. reduce方法

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

const numbers = [1, 2, 3, 4];const sum = numbers.reduce((accumulator, currentValue) => {  return accumulator + currentValue;}, 0);console.log(sum); // 10

reduce方法接受两个参数：

reducer函数（包含4个参数：累加器、当前值、当前索引、原数组）初始值（可选）

const purchases = [  { item: 'Shirt', price: 25 },  { item: 'Jeans', price: 50 },  { item: 'Socks', price: 10 }];const totalPrice = purchases.reduce((total, purchase) => {  return total + purchase.price;}, 0);console.log(totalPrice); // 85

4. 方法链式调用

这些方法可以链式调用，形成强大的数据处理流水线：

const products = [  { name: 'Laptop', price: 999, inStock: true },  { name: 'Phone', price: 699, inStock: false },  { name: 'Tablet', price: 499, inStock: true },  { name: 'Monitor', price: 299, inStock: true },  { name: 'Keyboard', price: 99, inStock: false }];const result = products  .filter(product => product.inStock)  .map(product => product.price * 1.2) // 增加20%的税  .reduce((sum, price) => sum + price, 0);console.log(result.toFixed(2)); // "2156.40"

总结

map(): 转换数组中的每个元素，返回新数组filter(): 筛选数组元素，返回符合条件的元素组成的新数组reduce(): 将数组元素"减少"为单个值

这些方法使代码更简洁、更易读，同时避免了直接修改原数组，符合函数式编程的原则。熟练掌握这些方法可以显著提高JavaScript数据处理能力。