JavaScript数组去重的十种实现方案详解
本文系统梳理了JavaScript中实现数组去重的十种常用方法。内容涵盖基于ES6特性的Set解构、includes与indexOf判断，以及利用forEach、filter、splice等原型方法的实现。同时介绍了基于对象属性标记和排序比较的传统算法，帮助开发者根据兼容性与性能需求选择最优方案。
方法1
利用 ES6 的 Set 数据结构配合解构赋值，这是目前最常用且代码最简洁的去重方式。
该方法是 ES6 规范引入后的产物，属于实现逻辑最简单的一种方案。
Set 是一种集合数据结构，用于存储不重复的值，例如 {1, 2, 3}。其核心特性在于集合内的每一个元素都是唯一的，不会存在重复值。
[...new Set(arr)] 的作用是将 Set 结构通过展开运算符解构，重新赋值为一个数组。
function Unrepeated1(arr) {
return [...new Set(arr)]
}
console.log(Unrepeated1([1,1,2,2,3,3]));
// 结果是[1, 2, 3]
方法2
利用数组原型对象上的 lastIndexOf 方法。此方案在早期较为常用，目前逐渐被 includes 方法所取代。
核心思路：定义一个空数组用于存储结果，遍历原数组。若空数组中不存在当前元素，则将其加入；若已存在，则忽略不操作。
lastIndexOf() 方法用于返回指定值在数组中最后出现的位置，搜索方向是从后向前。若未找到该值，则返回 -1。
function Unrepeated2(arr) {
var res = [];
for (var i = 0; i < arr.length; i++) {
res.lastIndexOf(arr[i]) !== -1 ? '' : res.push(arr[i]);
}
return res;
}
console.log(Unrepeated2([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 结果是[1, 2, 3, 5, 6, 7, 4]
方法3
利用数组原型对象上的 splice 方法进行操作。
实现思路：采用双层循环遍历数组。以第一项为例，第二层循环从第二项开始比对，若后续项与当前项相同，则执行删除操作。
splice() 方法用于删除数组元素，语法为 splice(j, 1)，其中 j 代表要删除元素的索引位置，1 代表删除的数量为一个。
function Unrepeated3(arr) {
var i,j,len = arr.length;
for (i = 0; i < len; i++) {
for (j = i + 1; j < len; j++) {
if (arr[i] == arr[j]) {
arr.splice(j, 1);
len--;
j--;
}
}
}
return arr;
}
console.log(Unrepeated3([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
方法4
利用数组原型对象上的 forEach 结合 includes 方法。includes 方法功能强大，应用广泛。
实现思路：定义一个空数组，遍历原数组，同时检查该元素是否存在于空数组中。若不存在则添加进空数组，若已存在则不再进行任何操作。
includes 方法用于判断数组是否包含指定值，返回布尔值。鉴于其易用性，它有望在未来替代 indexOf。作为 ES6 新增的 API，它不仅适用于数组，还可用于对象和字符串的判断，功能十分强大。
function Unrepeated4(arr) {
let newArr = [];
arr.forEach(item => {
return newArr.includes(item) ? '' : newArr.push(item);
});
return newArr;
}
console.log(Unrepeated4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 结果是[1, 2, 3, 4, 5, 6, 7]
方法5
利用数组原型对象上的 filter 结合 includes 方法。
其思路与方法4类似，区别在于将 forEach 与 includes 的组合替换为了 filter 与 includes 的组合。
function Unrepeated5(arr) {
var newArr = []
newArr = arr.filter(function (item) {
return newArr.includes(item) ? '' : newArr.push(item)
})
return newArr
}
console.log(Unrepeated5([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 结果是[1, 2, 3, 5, 6, 7, 4]
方法6
利用数组原型对象上的 includes 方法。
此方法可作为通用解决方案，代码逻辑可进一步简化。
function Unrepeated6(arr) {
var newArr = []
for (var i = 0; i < arr.length; i++) {
if (!newArr.includes(arr[i])) {
newArr.push(arr[i])
}
}
return newArr
}
console.log(Unrepeated6([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 结果是[1, 2, 3, 5, 6, 7, 4]
方法7
利用数组的 indexOf 下标属性来进行查询判断。
其实现思路与前述方法类似。
function Unrepeated7(arr) {
var newArr = []
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i])===-1) {
newArr.push(arr[i])
}
}
return newArr
}
console.log(Unrepeated7([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 结果是[1, 2, 3, 5, 6, 7, 4]
方法8
利用对象属性存在的特性，若目标对象中不存在该属性，则将其存入新数组。
此方法在浏览器兼容性方面表现较好。思路是使用一个空对象作为标记，通过遍历过程动态设置对象的属性，以此区分元素是否重复。
function Unrepeated8(arr) {
var obj={}
var newArr=[]
for (let i = 0; i < arr.length; i++) {
if (!obj[arr[i]]) {
obj[arr[i]] = 1
newArr.push(arr[i])
}
}
return newArr
}
console.log(Unrepeated8([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 结果是[1, 2, 3, 5, 6, 7, 4]
方法9
实现思路：首先对原数组进行排序，然后与相邻元素进行比较。若相邻元素不同，则将其存入新数组。
function Unrepeated9(arr) {
var formArr = arr.sort()
var newArr=[formArr[0]]
for (let i = 1; i < formArr.length; i++) {
if (formArr[i]!==formArr[i-1]) {
newArr.push(formArr[i])
}
}
return newArr
}
console.log(Unrepeated9([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 结果是[1, 2, 3, 4,5, 6, 7]
方法10
实现思路：定义一个新数组，并将原数组的第一个元素放入其中。随后将原数组的其他元素逐一与新数组中的元素进行对比，若发现不同，则存入新数组。
function Unrepeated10(arr) {
let newArr = [arr[0]];
for (let i = 1; i < arr.length; i++) {
let repeat = false;
for (let j = 0; j < newArr.length; j++) {
if (arr[i] === newArr[j]) {
repeat = true;
break;
}else{
}
}
if (!repeat) {
newArr.push(arr[i]);
}
}
return newArr;
}
console.log(Unrepeated10([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 结果是[1, 2, 3, 5, 6, 7, 4]至此，关于 JavaScript 实现数组去重的十种方法分享完毕。如需了解更多相关 JavaScript 数组去重内容，请搜索本站历史文章或继续浏览下方相关文章。期待大家今后多多支持本站！
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别：JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53
JavaScript新手常犯的编码错误与最佳实践指南
2026-11-04 22:12:38