JS数组方法实战：map、filter、reduce 全掌握

通过实际案例深入学习 JavaScript 数组核心方法 map、filter、reduce 以及链式调用技巧。 · 难度：入门 · +15XP

一、数组方法概述

JavaScript 数组提供了丰富的高阶函数，让数据处理更简洁、可读性更强。本章重点讲解三个最常用的方法：map、filter、reduce。

二、map：转换每个元素

map 对数组每个元素执行函数，返回新数组，不修改原数组。

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

三、filter：筛选元素

filter 返回满足条件的元素组成的新数组。

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

四、reduce：累积计算

reduce 遍历数组，累积计算为单个值。接收两个参数：回调函数和初始值。

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 10
// 高级用法：统计出现次数
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const count = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});
console.log(count); // { apple: 3, banana: 2, orange: 1 }

五、链式调用

将方法串联起来处理数据，代码更优雅：

const products = [
  { name: 'T-shirt', price: 20, inStock: true },
  { name: 'Jeans', price: 50, inStock: false },
  { name: 'Shoes', price: 80, inStock: true },
  { name: 'Hat', price: 15, inStock: true }
];

// 获取有库存商品名称，并转为大写
const result = products
  .filter(p => p.inStock)
  .map(p => p.name.toUpperCase());
console.log(result); // ['T-SHIRT', 'SHOES', 'HAT']

六、练习提示

在右侧编辑器中，有一个学生成绩数组，请使用 filter 筛选出成绩 ≥ 60 的学生，再用 map 提取他们的名字，最后用 reduce 计算这些及格学生的平均分。