数组方法 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)