reduce 对象数组 数组对象去重

完整案例1：

    //  方法1：利用对象访问属性的方法，判断对象中是否存在key
    let result = [];
    let arr = [
 
    { id: 201801, name: "张三", age: 15 },
 
    { id: 201804, name: "John", age: 18 },
 
    { id: 201802, name: "李四", age: 18 },
 
    { id: 201801, name: "张三", age: 15 },
     
    { id: 201805, name: "Jack", age: 18 },
 
    { id: 201803, name: "王五", age: 10 },
 
    { id: 201805, name: "Jack", age: 18 },
 
    { id: 201804, name: "John", age: 18 },
 
    { id: 201805, name: "Jack", age: 18 }
 
    ];

    var obj = {};
    for(var i =0; i<arr.length; i++){
       if(!obj[arr[i].id]){
          result.push(arr[i]);
          obj[arr[i].id] = true;
       }
    }
    console.log(result); // [{key: "01", value: "乐乐"},{key: "02", value: "博博"},{key: "03", value: "淘淘"},{key: "04", value: "哈哈"}]

完整案例2：

let data = [
 
{ id: 201801, name: "张三", age: 15 },
 
{ id: 201804, name: "John", age: 18 },
 
{ id: 201802, name: "李四", age: 18 },
 
{ id: 201801, name: "张三", age: 15 },
 
{ id: 201805, name: "Jack", age: 18 },
 
{ id: 201803, name: "王五", age: 10 },
 
{ id: 201805, name: "Jack", age: 18 },
 
{ id: 201804, name: "John", age: 18 },
 
{ id: 201805, name: "Jack", age: 18 }
 
];
let hash = {};
 
data = data.reduce((preVal, curVal) => {
 
if (!hash[curVal.id]) {
          hash[curVal.id] = true;
          preVal.push(curVal);
}
 
return preVal
 
}, []) // 请注意，必须标记是数组的默认值！！！

拆解部分： 

let data = [

{ id: 201801, name: "张三", age: 15 },

{ id: 201804, name: "John", age: 18 },

{ id: 201802, name: "李四", age: 18 },

{ id: 201801, name: "张三", age: 15 },

{ id: 201805, name: "Jack", age: 18 },

{ id: 201803, name: "王五", age: 10 },

{ id: 201805, name: "Jack", age: 18 },

{ id: 201804, name: "John", age: 18 },

{ id: 201805, name: "Jack", age: 18 }

];

  id唯一

1.数组reduce()方法

 const repeatExclude = (data, key) => {
      let hash = {};
      data = data.reduce((preVal, curVal) => {
        if (!hash[curVal[key]]) {
          hash[curVal[key]] = true;
          preVal.push(curVal);
        }
        return preVal;
      }, []);
      return data;
    };

reduce()方法的理解

reduce()方法接收一个函数作为累积器，数组中的每个值从左到右开始合并，最后返回一个值。

reduce()其实也就是对数组从左到右进行遍历，在遍历的同时按照回调函数中的方法进行处理，reduce()的特别之处是在于它每遍历一个元素之后会将这个元素放在累积器中累积起来，类似于收割机收小麦一样，从左往右收割，收割机中用来放收割好小麦的地方就类似于reduce()的累积器，最后满满收好的一大袋小麦就类似于reduce()的返回值。

语法 

array.reduce(callbackfunction, initialVal);

function callbackfunction(preVal, curVal, index, array){

//函数体

}

数组的reduce()方法接收两个参数，callbackfunction回调函数和initialVal初始值；callbackfunction是必需项，initialVal是可选项；callbackfunction回调函数接收四个参数：
preVal —> 上一次调用回调函数返回的值，或者初始值initialVal；
curVal —> 数组中当前被处理的值；
index —> 当前的值在数组中的索引；
array —> 调用reduce()方法的数组；
callbackfunction函数中必须有返回值，也就是累积器，它每次的返回值都是下一次调用回调函数中的preVal值。

下面表格是上述数组对象去重时reduce()执行过程：
其中data 表示data数组，data[1] 表示data数组中的第一个对象，即{ id: 201801, name: '张三', age: 15, }，data[2]表示data数组中的第二个对象，即{ id: 201804, name: 'John', age: 18, }，依次类推。

 2.for循环遍历

function removeRepeat(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;

// 关键，因为splice()删除元素之后，会使得数组长度减小，此时如果没有j=j-1的话，会导致相同id项在重复两次以上之后无法进行去重，且会错误删除id没有重复的项。

}

}

}

}

removeRepeat(data, 'id');

思路:

利用for循环遍历数组，并将数组中的每一个元素与剩余元素一一进行比较，如果在剩余元素中出现id相同的项，则通过splice()方法将相同id项删除，这样在最终得到的数组中每个数据id将是唯一的。通过splice()方法删除元素后，会使得数组长度减小，为了实现去重应该执行j = j-1。上面将去重方法直接封装成函数removeRepeat，使用时可以直接调用该函数，并传入要去重的数组和唯一属性名。