js技巧-使用reduce实现更简洁的数组对象去重和数组扁平化

时间:2022-10-04 23:55:34

Array.prototype.reduce()方法介绍:

感性认识reduce累加器:
const arr = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
console.log(arr.reduce(reducer)); //10,即1 + 2 + 3 + 4。
console.log(arr.reduce(reducer, 6));//16,即6 + 1 + 2 + 3 + 4。

你可以通过打印reducer的两个参数,从而直观的感受到,第二个参数currentValue是当前的元素,而第一个参数accumulator总是返回每一次执行reducer函数的返回值,如此一次次累加起来。

reduce方法接收两个参数:

reduce(callback,initialValue)

callback(accumulator,currentValue, index,arr) : 执行于每个数组元素的函数;

initialValue : 传给callback的初始值。

更详细的讲,callback就是由你提供的reducer函数,调用reduce()方法的数组中的每一个元素都将执行你提供的reducer函数,最终汇总为单个返回值

reducer函数(callback)接受4个参数:

js技巧-使用reduce实现更简洁的数组对象去重和数组扁平化

1. reduce()实现数组对象去重:

简单的数组去重,我们可以通过把数组转换为ES6提供的新数据结构Set实现。

然而在实际业务上,我们经常需要处理后台返回的json格式的数组对象进行去重。

比如:

const arr = [{
id: 1,
phone: 1880001,
name: 'wang',
},{
id: 2,
phone: 1880002,
name: 'li',
},{
id: 3,
phone: 1880001,
name: 'wang',
}]

我们会需要去掉电话号码重复的元素,这时候就需要使用hash检测方法:

const unique= arr =>{
let hash = {};
return arr.reduce((item, next) => {
hash[next. phone]? '': hash[next.phone] = true && item.push(next);
return item
}, []);
}
unique(arr)
/* [{
id: 1,
phone: 1880001,
name: 'wang',
},{
id: 2,
phone: 1880002,
name: 'li',
}] */

2. reduce()实现数组扁平化:

const flatten= arr => arr.reduce((item, next) => item.concat( Array.isArray(arr)? flatten(next): next, []));
//concat方法的参数接受数组也接受具体的值