JS 数组方法进阶
学习splice/slice/sort · 难度：进阶 · +15XP
JavaScript 数组方法进阶精讲
掌握了基础数组操作后，深入学习 map、filter、reduce 等高阶函数是 JS 进阶的必经之路。这些方法让代码更简洁、更声明式。
核心高阶方法一览
| 方法 | 作用 | 返回值 | 改变原数组 |
|---|---|---|---|
map() | 映射/转换每个元素 | 新数组（等长） | 否 |
filter() | 筛选符合条件的元素 | 新数组 | 否 |
reduce() | 累积/归纳为单个值 | 任意类型 | 否 |
forEach() | 遍历每个元素 | undefined | 否 |
find() | 查找第一个符合条件的 | 元素或 undefined | 否 |
some() | 是否至少一个符合 | boolean | 否 |
every() | 是否全部符合 | boolean | 否 |
map 映射转换
- 对数组中每个元素执行回调，返回新数组
- 新数组长度与原数组相同
- 回调可接收 (element, index, array) 三个参数
const nums = [1, 2, 3, 4, 5];
// 基础用法：每个元素乘2
const doubled = nums.map(n => n * 2); // [2,4,6,8,10]
// 提取对象属性
const users = [
{ name: "张三", age: 25 },
{ name: "李四", age: 30 },
];
const names = users.map(u => u.name); // ["张三","李四"]
// 带索引的映射
const indexed = nums.map((n, i) => i + ": " + n);
// ["0: 1", "1: 2", "2: 3", ...]filter 筛选与 reduce 归纳
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// filter: 筛选偶数
const evens = nums.filter(n => n % 2 === 0); // [2,4,6,8,10]
// reduce: 多种用法
// 1. 求和
const sum = nums.reduce((acc, cur) => acc + cur, 0); // 55
// 2. 求最大值
const max = nums.reduce((a, c) => c > a ? c : a, 0); // 10
// 3. 分组（groupBy 模拟）
const groups = users.reduce((acc, u) => {
const decade = Math.floor(u.age / 10) * 10;
if (!acc[decade]) acc[decade] = [];
acc[decade].push(u.name);
return acc;
}, {});
// { '20': ['张三'], '30': ['李四'] }
// 4. 数组扁平化
const nested = [[1,2], [3,4], [5,6]];
const flat = nested.reduce((acc, cur) => acc.concat(cur), []);
// [1, 2, 3, 4, 5, 6]