使用数组的reduce()方法

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) => {
    hash[curVal.id] ? '' : hash[curVal.id] = true && preVal.push(curVal); 
    return preVal 
}, [])
console.log( data, hash);

上述方法的实现思路

利用reduce()方法的累积器作用,在对由对象组成的数组进行遍历时,通过对象hash来标记数组中每个元素id是否出现过,如果出现过,那么遍历到的当前元素则不会放入到累积器中,如果没有出现,则添加到累积器中,这样保证了最后返回值中每个数据id的唯一性。

关于数组的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值。

preVal curVal index array 返回值
第一次回调 [ ] data[1] 0 data | [ data[1] ]
第二次回调 [ data[1] ] data[2] 1 data | [ data[1], data[2] ] ]
第三次回调 [ data[1], data[2] ] data[3] 2 data | [ data[1], data[2], data[3] ] ]
第四次回调 [ data[1], data[2], data[3] ] data[4] 3 data | [ data[1], data[2], data[3] ] ]
第五次回调 [ data[1], data[2], data[3] ] data[5] 4 data | [ data[1], data[2], data[3] , data[5] ] ]
第六次回调 [ data[1], data[2], data[3], data[5] ] data[6] 5 data | [ data[1], data[2], data[3], data[5], data[6] ] ]
第七次回调 [ data[1], data[2], data[3], data[5], data[6] ] data[7] 6 data | [ data[1], data[2], data[3], data[5], data[6] ] ]
第八次回调 [ data[1], data[2], data[3], data[5], data[6] ] data[8] 7 data | [ data[1], data[2], data[3], data[5], data[6] ] ]
第九次回调 [ data[1], data[2], data[3], data[5], data[6] ] data[9] 8 data | [ data[1], data[2], data[3], data[5], data[6] ] ]

图解:从执行过程可以看出reduce()其实也就是遍历每个元素,只不过它在遍历下一个元素时会把上一次回调函数返回的值带入来进行相关操作。


千万别成为大多数人