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方法的参数接受数组也接受具体的值

相关文章