JavaScript数组去重方法的演进与优化
本文深入探讨JavaScript中数组去重的多种实现方式，从基础的双重循环到利用indexOf、filter结合排序，再到ES6引入的Set数据结构。通过对比不同方法的代码复杂度与执行逻辑，展示如何写出更简洁高效的去重代码，帮助开发者根据实际需求选择最优方案。
前言
数组去重是前端开发中高频出现的场景，掌握其多种实现方式对于提升编码能力至关重要。
深入理解这些方法，可以避免在实际工作中因技术盲区导致的尴尬，夯实基础。
开始研究
原始方案
最初处理数组去重时，我的思路是创建一个新数组，通过两层for循环遍历。若元素首次出现则push进新数组，若发现重复则break跳出内层循环。通过判断内层循环变量j是否等于新数组长度来确认元素唯一性，最终返回新数组。
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
function unique(arr){
var res = []
for(var i = 0; i < arr.length; i++){
for(var j = 0; j < res.length; j ++){
if(arr[i] === res[j]){
break
}
}
// 如果数据第一次出现，那么执行完上面for语句后，j的值应该等于res的长度才对
if(j === res.length){
res.push(arr[i])
}
}
return res;
}
console.log(unique(arr));
利用indexOf优化原始方法
首先简要介绍indexOf方法。
indexOf(item, start)用于返回数组中指定元素首次出现的索引位置。
该方法从数组起始位置（或指定的start位置）开始检索，若找到匹配元素则返回其索引；若未指定start，则从索引0开始查找。
若在数组中未找到指定元素，该方法返回-1。
基于上述特性，我们可以利用“未找到返回-1”这一关键点来简化逻辑。
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
function unique(arr){
var res = []
for(var i = 0; i < arr.length; i++){
if(res.indexOf(arr[i]) === -1){
res.push(arr[i])
}
}
return res;
}
console.log(unique(arr));
再次优化，使用filter方法
filter方法用于创建新数组，包含所有通过测试（由提供函数实现）的元素。
思路是将filter与indexOf结合，替代部分循环逻辑，直接过滤出唯一元素并返回去重后的数组。
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
function unique(arr){
var res = arr.filter(function(item,index,arr){
return arr.indexOf(item) === index
})
return res;
}
console.log(unique(arr));
换种思路：转为有序数组后去重
在处理力扣等算法题时，识别数组是否有序往往能简化问题。
若先将数组排序，重复元素将相邻排列。此时只需一个变量记录前一个元素的值，遍历比较当前值与前值是否相同，不同则加入结果数组，即可实现去重。
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
function unique(arr){
var res = []
var pre
arr = arr.sort()
for(var i = 0; i < arr.length; i++){
if(!i || pre !== arr[i]){
res.push(arr[i])
}
pre = arr[i]
}
return res;
}
console.log(unique(arr));
再次优化，结合filter与排序
发现filter同样可以配合排序逻辑，使代码更加简洁，具体实现如下。
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
function unique(arr){
var res = arr.sort().filter(function(item,index,arr){
return !index || item !== arr[index - 1]
})
return res;
}
console.log(unique(arr));
ES6 Set方法
ES6引入了Map和Set等新数据结构，极大提升了数据处理效率。
Map对象用于存储键值对，键和值可以是任意类型。
Set对象允许存储唯一值，无论是原始值还是对象引用，自动过滤重复项。
利用Set的这一特性，可以非常便捷地实现数组去重。
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
function unique(arr){
return Array.from(new Set(arr))
}
console.log(unique(arr));
注意：Set是对象类型，需转换为数组才能返回最终结果。
结合解构赋值的简化写法
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
function unique(arr){
return [...new Set(arr)]
}
console.log(unique(arr));
若对解构赋值熟悉，可参考相关教程进一步简化代码。
此前学习过程中记录的笔记。
继续优化，引入箭头函数
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
var unique = (arr) => [...new Set(arr)]
console.log(unique(arr));
总结
从最初繁琐的多层循环代码，到利用箭头函数一行完成，可见持续学习能显著提升代码的优雅度与简洁性。
本文介绍了JavaScript数组去重的多种实现方式，更多相关内容可参考本站往期文章或继续浏览后续章节，感谢支持。
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58