JS小技巧，如何去重对象数组？(JavaScript实用技巧：如何高效去重对象数组？)

一、引言

在JavaScript开发过程中，我们常常需要对对象数组进行去重操作。对象数组去重相较于基本数据类型数组去重要复杂化一些，但掌握一些高效的去重技巧可以让我们在项目中游刃有余。本文将介绍几种常用的对象数组去重方法，并对比它们的优缺点。

二、对象数组去重方法

以下是一些常见的对象数组去重方法：

2.1 使用Set和Map

Set是ES6中新增的数据结构，类似于数组，但成员的值都是唯一的。Map也是ES6中新增的数据结构，它类似于对象，但键的范围不限于字符串，可以是任何类型。我们可以利用Set和Map的特性来实现对象数组的去重。

const arr = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 1, name: '张三' }
];
function uniqueArrayBySet(arr) {
    const uniqueSet = new Set();
    const uniqueArr = [];
    arr.forEach(item => {
        if (!uniqueSet.has(JSON.stringify(item))) {
            uniqueSet.add(JSON.stringify(item));
            uniqueArr.push(item);
        }
    });
    return uniqueArr;
}
console.log(uniqueArrayBySet(arr));
    

2.2 使用reduce方法

reduce方法可以将数组中的元素通过回调函数聚合成一个值。我们可以利用reduce方法遍历数组，通过判断对象是否已经存在于最终数组中来实现去重。

const arr = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 1, name: '张三' }
];
function uniqueArrayByReduce(arr) {
    return arr.reduce((prev, cur) => {
        const isExist = prev.some(item => JSON.stringify(item) === JSON.stringify(cur));
        if (!isExist) {
            prev.push(cur);
        }
        return prev;
    }, []);
}
console.log(uniqueArrayByReduce(arr));
    

2.3 使用filter方法

filter方法可以过滤掉数组中不满足条件的元素。我们可以通过判断当前元素是否已经存在于最终数组中来实现去重。

const arr = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 1, name: '张三' }
];
function uniqueArrayByFilter(arr) {
    return arr.filter((item, index) => {
        return arr.findIndex(t => JSON.stringify(t) === JSON.stringify(item)) === index;
    });
}
console.log(uniqueArrayByFilter(arr));
    

2.4 使用排序方法

通过对数组进行排序，将相同的对象排列在一起，然后遍历数组，比较当前对象与上一个对象是否相同，从而实现去重。

const arr = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 1, name: '张三' }
];
function uniqueArrayBySort(arr) {
    arr.sort((a, b) => {
        return JSON.stringify(a) > JSON.stringify(b) ? 1 : -1;
    });
    const uniqueArr = arr.filter((item, index, self) => {
        return index === self.findIndex(t => JSON.stringify(t) === JSON.stringify(item));
    });
    return uniqueArr;
}
console.log(uniqueArrayBySort(arr));
    

三、方法对比与总结

以下是上述几种方法的对比：

在实际开发中，可以选用项目需求和数据量选择合适的去重方法。对于小数据量，可以使用Set和Map方法；对于大数据量，可以考虑使用reduce或filter方法，并在性能要求较高的情况下使用排序方法。

四、结语

对象数组去重是JavaScript开发中常见的操作，掌握多种去重方法可以帮助我们更好地应对各种场景。在实际应用中，我们需要选用项目需求和数据量选择合适的去重方法，以节约代码的执行快速和可维护性。

本文由IT视界版权所有,禁止未经同意的情况下转发