前端小技巧: 数组reduce方法的五种常见用途

数组reduce方法的五种常见用途"/>

前端小技巧: 数组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"}]
}
*/