JS数组中 reduce() 方法 数组对象去重

JavaScript reduce() 方法

此篇主要介绍reduce()方法去重的使用

定义和用法

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

浏览器支持

表格中的数字表示支持该方法的第一个浏览器版本号。

语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数

参数	描述
function(total,currentValue, index,arr)	必需。用于执行每个数组元素的函数。
initialValue	可选。传递给函数的初始值

回调函数参数:

参数	描述
total	必需。初始值, 或者计算结束后的返回值。
currentValue	必需。当前元素
currentIndex	可选。当前元素的索引
arr	可选。当前元素所属的数组对象。

简单示例

初始数据

var arr = [
  {id: 1, name: 'test1'},
  {id: 2, name: 'test2'},
  {id: 3, name: 'test3'},
  {id: 1, name: '张三1'},
  {id: 2, name: '张三2'},
  {id: 3, name: '张三3'}
];

1. reduce()方法去重

let newobj = {}; 
arr = arr.reduce((total, currentValue) => {
	newobj[currentValue.id] ? '' : newobj[currentValue.id] = total.push(currentValue); 
	return total
}, [])

此方法为遍历 arr ，查看是否有 id 属性值相同的一项，没有则将当前项 currentValue 加入数组 arr ，然后返回修改后数组，作为下一次的初始值进行遍历

2. 原生js方法

// 方法一
function distinct1(arr,key){
    var newobj = {},newArr = [];
    for(var i=0;i<arr.length;i++){
        var item = arr[i];
    	if(!newobj[item[key]]){
            newobj[item[key]] = newArr.push(item);
    	}
    }
    return newArr;
}
// 方法二
function distinct2(arr,key){
    var newArr = [];
    for(var i=0;i<arr.length;i++){
    　　var flag = true;
    　　for(var j=0;j<newArr.length;j++){
    　　　　if(arr[i].id == newArr[j].id){
    　　　　　　flag = false;
               break
    　　　　};
    　　}; 
    　　if(flag){
    　　　　newArr.push(arr[i]);
    　　};
    };
    return newArr;
}
 
// 方法三， 方法三会更改数组的原始数据
function distinct3(arr, key){
    for(let i = 0; i < arr.length; i++) {
        for(let j = i+1; j < arr.length; j++) {
            if(arr[i][key] === arr[j][key]){
                arr.splice(j, 1);
                j = j-1;
            }
        }
    }
    return arr;
}
 

js原生方法有很多，这里只提供几个网上的模板参考

·

副内容

这里提供几个不成熟的方式，对数组对象类型数据进行处理

var content = [
{userId: '1', name: '张三', organizationId: '11'},
{userId: '2', name: '李四', organizationId: '12'},
{userId: '3', name: '王五', organizationId: '13'},
]

var allPersonList = [
{userId: '1', age: '18'},
{userId: '2', age: '19'},
{userId: '3', age: '20'},
]

var organizationAddress = [
{id: '11', city: '上海'},
{id: '12', city: '重庆'},
{id: '13', city: '北京'},
]

	let list = content && content.map(
      (item: { userId: any }, index: number) => {
        let arr = allPersonList[0] && allPersonList.map((person: any) => {
          if (person.id === item.userId) {
          	// 将需要的数据合到一起
            return item = { ...person, ...item }
          }
        })
        // 使用 filter() 过滤掉 undefined 项
        arr = arr.filter(person => person)
        // console.log(arr,'arr');
        // 打印发现每组数据都一样，取其中一组
        return { ...arr[0], num: index + 1 }
      }
    )

    list = list && list.map((item: any) => {
      let address = organizationAddress[0] && organizationAddress.map((organization: any) => {
        if (item.organizationId === organization.id) {
          // 将需要的数据合到一起
          return item = { ...item, city: organization.city }
        }
      })
      address = address.filter(organization => organization)
      // console.log(address,'address');
      return { ...address[0] }
    })
     console.log(list, 'list');

最后合成得到的数据

list = [
{userId: '1', name: '张三', organizationId: '11', age: '18', city: '上海'},
{userId: '2', name: '李四', organizationId: '12', age: '19', city: '重庆'},
{userId: '3', name: '王五', organizationId: '13', age: '20', city: '北京'},
]

参考引用：

数组里面对象去重的3种方法: https://blog.csdn.net/l284969634/article/details/91397332

js数组去重的多种方法: https://blog.csdn.net/linglingzi001/article/details/107772411

JS中reduce方法: https://blog.csdn.net/hope93/article/details/86528183

Array.reduce()方法解析: https://blog.csdn.net/SEAYEHIN/article/details/89520575

JavaScript reduce() 方法: https://www.runoob.com/jsref/jsref-reduce.html

JavaScript数组去重—ES6的两种方式: https://blog.csdn.net/FE_dev/article/details/78110153

JavaScript 实现 reduce() 方法函数: https://blog.csdn.net/Beijiyang999/article/details/80186242