javascript如何实现数组去重

在javascript开发过程中，处理数组数据时经常会遇到需要去除重复元素的需求，不同的实现方式在性能和适用场景上存在差异，开发者可以根据实际情况选择合适的方法。

使用Set数据结构去重

Set是ES6新增的数据结构，它内部存储的元素具有唯一性，利用这个特性可以快速实现数组去重，这是目前最简洁的去重方式之一。

// 定义包含重复元素的数组
const arr = [1, 2, 2, 3, 3, 4, 5, 5];
// 将数组转为Set，再转回数组实现去重
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // 输出 [1, 2, 3, 4, 5]

这种方式的代码量最少，执行效率也比较高，适合处理普通数据类型的数组去重，但是无法处理复杂对象类型的去重，因为Set判断对象是否重复是基于引用地址的。

使用filter方法去重

数组的filter方法可以遍历数组元素，根据回调函数的返回值决定是否保留当前元素，结合indexOf方法可以实现去重逻辑。

const arr = [1, 2, 2, 3, 3, 4, 5, 5];
// 遍历数组，只保留第一次出现的元素
const uniqueArr = arr.filter((item, index) => {
    // indexOf返回元素第一次出现的索引，若和当前索引一致则保留
    return arr.indexOf(item) === index;
});
console.log(uniqueArr); // 输出 [1, 2, 3, 4, 5]

这种方式的兼容性比Set更好，支持ES5及以上的环境，但是因为每次遍历都要调用indexOf方法，性能比Set方式稍差一些。

使用reduce方法去重

reduce方法可以对数组进行累加操作，我们可以在累加过程中判断元素是否已经存在于累加结果中，从而实现去重。

const arr = [1, 2, 2, 3, 3, 4, 5, 5];
const uniqueArr = arr.reduce((acc, cur) => {
    // 若累加结果中不包含当前元素，则加入结果数组
    if (!acc.includes(cur)) {
        acc.push(cur);
    }
    return acc;
}, []);
console.log(uniqueArr); // 输出 [1, 2, 3, 4, 5]

reduce方法的逻辑比较灵活，除了基础去重之外，还可以扩展实现更复杂的去重规则，比如根据对象的某个属性去重。

双重循环去重

这是最基础的去重方式，通过两层循环对比元素，将不重复的元素放入新数组，兼容性最好，支持所有javascript运行环境。

const arr = [1, 2, 2, 3, 3, 4, 5, 5];
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
    let isRepeat = false;
    // 遍历结果数组，判断当前元素是否已存在
    for (let j = 0; j < uniqueArr.length; j++) {
        if (arr[i] === uniqueArr[j]) {
            isRepeat = true;
            break;
        }
    }
    // 若不存在则加入结果数组
    if (!isRepeat) {
        uniqueArr.push(arr[i]);
    }
}
console.log(uniqueArr); // 输出 [1, 2, 3, 4, 5]

这种方式的性能相对较差，当数组长度较大时，循环次数会明显增多，但是逻辑直观，适合新手理解去重的底层实现思路。

不同去重方式对比

我们可以通过下表直观对比几种去重方式的特点：

在实际开发中，如果不需要兼容太老的环境，优先选择Set去重方式，代码简洁且性能优秀。如果需要处理复杂对象的去重，可以根据对象的唯一标识属性，使用reduce方法自定义去重逻辑。

javascript数组去重Setfilterreduce修改时间：2026-06-19 13:57:25