前端小技巧: 数组reduce方法的五种常见用途
数组的 reduce
- reduce 为数组的归并方法，用于遍历数组且进行归并
- 接收2个参数，callback方法和初始值(选填)
- 当传入初始值时，从初始值开始归并且从数组第0项开始遍历
- 当没有初始值时，用数组的第0项作为初始值，且数组从第一项开始归并
- 回调函数接收2个参数，一个是缓存值 pre，一个是当前值 cur
- reduce 方法的核心在于这个pre参数，允许在遍历过程中缓存 pre 变量
- 因为有了这个缓存值，可以解决非常多的问题
1 ）累加操作
const result = [1,2,3].reduce((prev, cur) => prev + cur);
console.log(result); // 6
2 ）找最大值
const result = [1,2,2,880,22,245666, 1000].reduce((prev, cur) => Math.max(prev,cur));
console.log(result) // 245666
3 ）去重
const result = [1,33,22,22,333,1,1,33,22].reduce((prev, cur) => {if (prev.includes(cur)) {return prev;}prev.push(cur);return prev;
},[])
console.log(result); // [1, 33, 22, 333]
4 ）反转字符串
const result = Array.from('hello Joh').reduce((prev, cur) => {return `${cur}${prev}`
}, '')
console.log(result); // hoJ olleh
5 ）归类
const result = [{name: 1, c: 'c'},{name: 3, c: 'c'},{name: 2, c: 'd'},{name: 3, c: 'd'},{name: 8, c: 'e'},{name: 1, c: 'e'}
].reduce((prev, cur)=>{if (!prev[cur.c]) {prev[cur.c] = []}prev[cur.c].push(cur)return prev
}, {})
console.log(result);/*
{"c": [{"name": 1,"c": "c"},{"name": 3,"c": "c"}],"d": [{"name": 2,"c": "d"},{"name": 3,"c": "d"}],"e": [{"name": 8,"c": "e"},{"name": 1,"c": "e"}]
}
*/