实际项目中经常会对数据进行去重操作，在 JavaScript 中，也有很多方法能够实现。今天主要总结一下使用 Array.prototype.reduce() 方法来实现数组去重。结合一些示例代码让大家快速懂得如何使用 reduce() 方法来去重数组。
reduce() 方法介绍
Array.prototype.reduce() 方法是 JavaScript 中的一个高阶函数，它可以将数组中的每个元素依次传递给一个回调函数，并将回调函数的返回值作为累加器的值。最终，reduce() 方法返回累加器的最终值。
reduce() 方法的语法如下：
array.reduce(callback[, initialValue])
其中，callback 参数是一个回调函数，它接受四个参数：
accumulator：累加器的值。currentValue：当前元素的值。currentIndex：当前元素的索引。array：原始数组。
initialValue 参数是累加器的初始值。如果省略该参数，则使用数组中的第一个元素作为累加器的初始值。
使用 reduce() 方法去重数组
具体来说，我们可以将数组中的每个元素依次传递给回调函数，并使用一个空数组作为累加器的初始值。在每次迭代中，我们使用 Array.prototype.find() 方法来查找累加器中是否已经存在一个具有相同属性的元素。如果不存在，则将当前元素添加到累加器中。最后，reduce() 方法返回去重后的数组。
以下是使用 reduce() 方法去重数组的示例代码：
const uniqueArray = array.reduce((acc, cur) => {
const has = acc.find((item) => item.property === cur.property);
if (!has) {
acc.push(cur);
}
return acc;
}, []);
在此代码中，我们使用 reduce() 方法将数组中的每个元素依次传递给回调函数，并使用一个空数组 [] 作为累加器的初始值。在每次迭代中，我们使用 Array.prototype.find() 方法来查找累加器中是否已经存在一个具有相同属性的元素。如果不存在，则将当前元素添加到累加器中。最后，reduce() 方法返回去重后的数组。
示例代码
以下是一个完整的示例代码，演示如何使用 reduce() 方法去重数组：
const array = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' },
{ id: 2, name: 'Bob' },
{ id: 4, name: 'David' },
{ id: 1, name: 'Alice' },
];
const uniqueArray = array.reduce((acc, cur) => {
const has = acc.find((item) => item.id === cur.id);
if (!has) {
acc.push(cur);
}
return acc;
}, []);
console.log(uniqueArray);
// Output: [
// { id: 1, name: 'Alice' },
// { id: 2, name: 'Bob' },
// { id: 3, name: 'Charlie' },
// { id: 4, name: 'David' },
// ]
在此代码中，我们定义了一个包含重复元素的数组 array。然后，我们使用 reduce() 方法将数组中的每个元素依次传递给回调函数，并使用一个空数组 [] 作为累加器的初始值。在每次迭代中，我们使用 Array.prototype.find() 方法来查找累加器中是否已经存在一个具有相同 id 属性的元素。如果不存在，则将当前元素添加到累加器中。最后，reduce() 方法返回去重后的数组，并将其存储在 uniqueArray 变量中。最后，我们使用 console.log() 方法输出去重后的数组。
总结
我们可以使用 reduce() 方法来去重数组，将数组中的每个元素依次传递给回调函数，并使用一个空数组作为累加器的初始值。在每次迭代中，我们使用 Array.prototype.find() 方法来查找累加器中是否已经存在一个具有相同属性的元素。如果不存在，则将当前元素添加到累加器中。最后，reduce() 方法返回去重后的数组。