JavaScript数组去重的7种实现方案与性能分析

作者：木棉时间：2026-10-25 08:21:54浏览：518

本文详细解析JavaScript中实现数组去重的七种常见方法，包括双循环、indexOf、排序去重、对象属性法以及ES6的Set和Array.from。文章对比了各方法的代码实现与时间复杂度，指出前端去重虽不如后端高效，但在特定场景下仍具实用价值，帮助开发者根据数据规模选择最优方案。

前言

数据去重是前端开发中常见的需求场景。通常情况下，为了提升效率，这类操作多由后端通过SQL语句完成，前端较少直接处理去重逻辑。

若由前端执行去重，可能会引发性能问题。例如，当每页需展示10条不重复数据时，若源数据重复率高，前端可能需要发起多次HTTP请求才能筛选出目标数量的数据；而若在后台完成去重，仅需一次请求即可获取完整结果。

尽管前端去重存在上述局限，掌握相关技能依然必要。本文将重点介绍几种常用的数组去重实现方式。

方法实现

双循环去重

该方法使用双重for或while循环，逻辑较为直观。首先创建一个包含原数组首个元素的新数组，随后遍历原数组，将每个元素与新数组中的元素逐一比对。若未找到重复项，则将其加入新数组。由于时间复杂度为O(n^2)，当数组长度较大时，会消耗较多内存与计算资源。

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    let res = [arr[0]]
    for (let i = 1; i < arr.length; i++) {
        let flag = true
        for (let j = 0; j < res.length; j++) {
            if (arr[i] === res[j]) {
                flag = false;
                break
            }
        }
        if (flag) {
            res.push(arr[i])
        }
    }
    return res
}

indexOf方法去重1

利用数组的indexOf()方法查找元素首次出现的位置。实现时定义一个空结果数组，遍历原数组，若indexOf返回-1（即元素不在结果数组中），则将其push进结果数组，最终返回该数组。

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (res.indexOf(arr[i]) === -1) {
            res.push(arr[i])
        }
    }
    return res
}

indexOf方法去重2

通过比较元素在数组中第一次出现的位置索引与当前遍历到的索引是否一致。若不一致，说明该元素此前已出现过，即为重复元素，从而进行过滤。

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    return Array.prototype.filter.call(arr, function(item, index){
        return arr.indexOf(item) === index;
    });
}

相邻元素去重

此方法首先调用sort()对数组进行排序，使相同元素相邻。随后遍历排序后的数组，比较相邻元素，若两者相等则跳过，否则将元素加入结果集，直至遍历结束。

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    arr = arr.sort()
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] !== arr[i-1]) {
            res.push(arr[i])
        }
    }
    return res
}

利用对象属性去重

创建一个空对象，遍历数组并将元素值设为对象的键，初始值为1。每遇到一个元素，若键已存在则值加1，否则新建键并赋值为1。最终通过判断对象属性值或键的存在性来提取去重后的数组。

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    let res = [],
        obj = {}
    for (let i = 0; i < arr.length; i++) {
        if (!obj[arr[i]]) {
            res.push(arr[i])
            obj[arr[i]] = 1
        } else {
            obj[arr[i]]++
        }
    }
    return res
}

set与解构赋值去重

ES6引入了Set数据结构，其核心特性是成员唯一且无重复。Set构造函数可接收数组或类数组对象作为参数进行初始化，利用这一特性可直接实现数组去重。

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    return [...new Set(arr)]
}

Array.from与set去重

利用Array.from()方法将Set结构转换回数组。由于Set本身已去除重复值，转换后的数组自然实现了去重效果。

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    return Array.from(new Set(arr))
}

总结

数组去重是前端开发中的高频问题。开发者应根据具体的应用场景、数据量级及性能要求，灵活选择最合适的实现方式。

本文介绍了JavaScript实现数组去重的7种方法，更多相关内容可参考本站过往文章或继续浏览后续教程，感谢支持。

作者最新文章

JS合并多个数组的三种方法：concat、spread与flat

2026-11-05 17:39:45

JavaScript怎么准确判断数据类型：typeof、instanceof与Object.prototype.toString

2026-11-05 17:09:21

JS中将数组和对象混合组装为JSON字符串

2026-11-05 16:41:42

JS运算符优先级与结合性的区别是什么？

2026-11-05 13:22:02

JS Map怎么只遍历Key或Value

2026-11-05 13:00:36