数组与对象
数组方法 map/filter/reduce
掌握三大高阶数组方法及常用 API
数组三大方法 map / filter / reduce
map、filter、reduce 是函数式编程的核心，取代了大部分 for 循环。
学完本章你将： 掌握三大高阶数组方法。
map —— 转换每个元素
map 对每个元素调用函数，返回新数组。
javascript
let nums = [1, 2, 3, 4, 5];
// 翻倍
let doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
// 提取属性
let users = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 },
{ name: "Charlie", age: 35 },
];
let names = users.map(u => u.name);
console.log(names); // ["Alice", "Bob", "Charlie"]
// map 带索引
let indexed = nums.map((n, i) => `${i}: ${n}`);
console.log(indexed); // ["0: 1", "1: 2", "2: 3", ...]filter —— 过滤元素
filter 返回满足条件的元素组成的新数组。
javascript
let nums = [1, 2, 3, 4, 5, 6];
// 过滤偶数
let evens = nums.filter(n => n % 2 === 0);
console.log(evens); // [2, 4, 6]
// 过滤对象
let products = [
{ name: "苹果", price: 3 },
{ name: "香蕉", price: 1 },
{ name: "樱桃", price: 8 },
];
let cheap = products.filter(p => p.price < 5);
console.log(cheap); // [{ name: "苹果", price: 3 }, { name: "香蕉", price: 1 }]
// 链式调用
let result = nums
.filter(n => n > 2)
.map(n => n * 10);
console.log(result); // [30, 40, 50, 60]reduce —— 聚合为单个值
javascript
let nums = [1, 2, 3, 4, 5];
// 求和
let sum = nums.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15
// 求最大值
let max = nums.reduce((acc, cur) => Math.max(acc, cur));
console.log(max); // 5
// 数组扁平化
let nested = [[1, 2], [3, 4], [5]];
let flat = nested.reduce((acc, cur) => acc.concat(cur), []);
console.log(flat); // [1, 2, 3, 4, 5]
// 分组统计
let items = ["apple", "banana", "apple", "orange", "banana", "apple"];
let count = items.reduce((acc, item) => {
acc[item] = (acc[item] || 0) + 1;
return acc;
}, {});
console.log(count); // { apple: 3, banana: 2, orange: 1 }其他实用方法
javascript
let nums = [3, 1, 4, 1, 5, 9, 2, 6];
// sort
console.log([...nums].sort((a, b) => a - b)); // 升序
console.log([...nums].sort((a, b) => b - a)); // 降序
// reverse
console.log([...nums].reverse());
// slice（不改变原数组）
console.log(nums.slice(0, 3)); // [3, 1, 4]
// concat
console.log([1, 2].concat([3, 4])); // [1, 2, 3, 4]
// flat（ES2019）
console.log([1, [2, [3]]].flat(2)); // [1, 2, 3]