数组方法 map、filter、reduce 的区别和用法?

map — 映射

对每个元素执行函数,返回新数组,长度不变。

const nums = [1, 2, 3]
const doubled = nums.map(n => n * 2)  // [2, 4, 6]

// 提取对象属性
const users = [{ name: 'Tom' }, { name: 'Jerry' }]
const names = users.map(u => u.name)  // ['Tom', 'Jerry']

filter — 过滤

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

const nums = [1, 2, 3, 4, 5]
const evens = nums.filter(n => n % 2 === 0)  // [2, 4]

// 去重
const arr = [1, 2, 2, 3, 3, 3]
const unique = arr.filter((v, i, a) => a.indexOf(v) === i)  // [1, 2, 3]

reduce — 归约

将数组归约为单个值,最灵活但也最复杂。

// 求和
const sum = [1, 2, 3].reduce((acc, cur) => acc + cur, 0)  // 6

// 求最大值
const max = [1, 5, 3].reduce((a, b) => Math.max(a, b))  // 5

// 数组转对象
const users = [{ id: 1, name: 'Tom' }, { id: 2, name: 'Jerry' }]
const userMap = users.reduce((map, u) => {
  map[u.id] = u
  return map
}, {})  // { 1: {...}, 2: {...} }

// 扁平化
const nested = [[1, 2], [3, 4], [5]]
const flat = nested.reduce((acc, cur) => acc.concat(cur), [])  // [1, 2, 3, 4, 5]

// 分组
const people = [
  { name: 'Tom', age: 20 },
  { name: 'Jerry', age: 20 },
  { name: 'Spike', age: 30 }
]
const grouped = people.reduce((groups, p) => {
  const key = p.age
  ;(groups[key] ||= []).push(p)
  return groups
}, {})  // { 20: [...], 30: [...] }

对比

方法 返回值 用途
map 新数组(同长度) 转换每个元素
filter 新数组(可能更短) 筛选元素
reduce 任意值 聚合/归约

链式调用

const result = users
  .filter(u => u.age >= 18)
  .map(u => u.name)
  .reduce((acc, name) => acc + name.length, 0)

同分类其他题目