本文汇总了JavaScript中实现数组去重的11种常见方法。内容涵盖双重循环、indexOf定位、filter过滤、对象键值记录、新数组判断以及ES6的Set数据结构。每种方法均配有具体代码示例，分析其是否修改原数组、是否排序及性能差异，帮助开发者根据实际需求选择最优方案。
JavaScript数组去重方案概览
在开发工作或技术面试中，“数组去重”是一个高频考点。本文将系统梳理使用JavaScript实现数组去重的多种技术手段。
基于循环与索引的基础去重方法
第一种方法：通过双重循环逐一比对。遍历数组中的每个元素，将其与其他所有元素进行比较，一旦发现重复值，立即从原数组中移除。
var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5,5];
console.log(arr); //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5, 5]
function noRepeat1(arr) {
for(var i = 0; i < arr.length-1; i++){
for(var j = i+1; j < arr.length; j++){
if(arr[i]===arr[j]){
arr.splice(j,1);
j--;
}
}
}
return arr;
}
var arr2 = noRepeat1(arr);
console.log(arr2); //[1, 23, 3, 5, 6, 7, 9, 8]第二种方法：利用indexOf()检查索引。在遍历数组时，判断当前元素首次出现的索引位置（indexOf返回值）是否与当前的循环下标一致。若不一致，说明存在重复，需将该元素删除。
var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5];
console.log(arr); //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5]
function noRepeat2(arr) {
for (var i = 0; i < arr.length; i++) {
if (arr.indexOf(arr[i]) != i) {
arr.splice(i,1);//删除数组元素后数组长度减1后面的元素前移
i--;//数组下标回退
}
}
return arr;
}
var newArr = noRepeat2(arr);
console.log(newArr); //[1, 23, 3, 5, 6, 7, 9, 8]利用高阶函数与对象映射的方法
第三种方法：使用filter()高阶函数。利用数组的filter方法，结合indexOf判断当前元素在数组中首次出现的位置是否等于当前遍历的索引index，若相等则保留该元素。
var arr = ['apple','banana','pear','apple','orange','orange'];
console.log(arr) //["apple", "banana", "pear", "apple", "orange", "orange"]
var newArr = arr.filter(function(value,index,self){
return self.indexOf(value) === index;
});
console.log(newArr); //["apple", "banana", "pear", "orange"]第四种方法：借助新数组与indexOf。创建一个新数组，遍历原数组，利用indexOf判断当前元素在原数组中的索引是否等于当前循环下标。只有当两者相等时，才将该元素推入新数组。
var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5];
console.log(arr) //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5]
function noRepeat4(arr) {
var ret = [];
for (var i = 0; i < arr.length; i++) {
if (arr.indexOf(arr[i]) == i) {
ret.push(arr[i]);
}
}
return ret;
}
var arr2 = noRepeat4(arr);
console.log(arr2); //[1, 23, 3, 5, 6, 7, 9, 8]第五种方法：利用空对象记录已存元素。创建一个空对象作为哈希表，遍历原数组，以元素值为键检查对象中是否存在该键。若不存在，则将其加入新数组，并在对象中标记该键为true。
var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
console.log(arr) //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
var obj={};
var newArr=[];
for(var i=0;i<arr.length;i++){
if(!obj[arr[i]]){
obj[arr[i]]=true;
newArr.push(arr[i]);
}
}
console.log(newArr); //[1, 23, 3, 5, 6, 7, 9, 8]基于新数组判断与排序的特殊情况
第六种方法：基于新数组的indexOf判断。创建一个新数组，遍历原数组，检查当前元素是否已存在于新数组中（通过indexOf判断）。若新数组中不包含该元素，则将其添加至新数组。
var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
console.log(arr); //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
function noRepeat6(arr){
var newArr = [];
for(var i = 0; i < arr.length; i++){
if(newArr.indexOf(arr[i]) == -1){
newArr.push(arr[i]);
}
}
return newArr;
}
var arr2 = noRepeat6(arr);
console.log(arr2); //[1, 23, 3, 5, 6, 7, 9, 8]第七种方法：基于新数组的indexOf判断（含排序）。此方法逻辑与第六种相似，但去重后的结果会按字符串顺序进行排序，且原数组长度保持不变（注：此处描述可能指特定实现或笔误，通常去重不改变原数组长度除非修改原数组）。
var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
console.log(arr); //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
function noRepeat7(arr) {
var ret = [],
end;//临时变量用于对比重复元素
arr.sort();//将数重新组排序
end = arr[0];
ret.push(arr[0]);
for (var i = 1; i < arr.length; i++) {
if (arr[i] != end) {//当前元素如果和临时元素不等则将此元素添加到新数组中
ret.push(arr[i]);
end = arr[i];
}
}
return ret;
}
var arr2 = noRepeat7(arr);
console.log(arr2); //[1, 23, 3, 5, 6, 7, 8, 9]第八种方法：直接修改原数组并排序。此方案不创建新数组，而是直接在原数组上进行操作实现去重，同时去重后的数组会被自动排序。
var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
console.log(arr); //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
function noRepeat8(arr) {
var end;//临时变量用于对比重复元素
arr.sort();//将数重新组排序
end = arr[0];
for (var i = 1; i < arr.length; i++) {
if (arr[i] == end) {//当前元素如果和临时元素相等则将此元素从数组中删除
arr.splice(i,1);
i--;
}else{
end = arr[i];
}
}
return arr;
}
var arr2 = noRepeat8(arr);
console.log(arr2); //[1, 23, 3, 5, 6, 7, 8, 9]第九种方法：通过双层循环直接修改原数组。利用两层嵌套循环遍历数组，发现重复元素后直接通过splice方法从原数组中移除，无需额外空间存储新数组。
var arr = [1,1,2,2,3,3,4,4,5,5,4,3,1,2,6,6,6,6];
console.log(arr); //[1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 4, 3, 1, 2, 6, 6, 6, 6]
function noRepeat9(arr){
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr.length; j++) {
if (arr[i] == arr[j] && i != j) {//将后面重复的数删掉
arr.splice(j, 1);
}
}
}
return arr;
}
var arr2 = noRepeat9(arr);
console.log(arr2); //[1, 2, 3, 4, 5, 6]第十种方法：借助新数组（基础版）。创建一个新数组，遍历原数组，将未在新数组中出现的元素逐一添加进去，从而实现去重。
var arr = [1,1,2,2,3,3,4,4,5,5,4,3,2,1,1,1];
console.log(arr); //[1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 4, 3, 2, 1, 1, 1]
var newArr = [];
for (var i = 0; i < arr.length; i++) {
var repArr = [];//接收重复数据后面的下标
//内层循环找出有重复数据的下标
for (var j = i + 1; j < arr.length; j++) {
if (arr[i] == arr[j]) {
repArr.push(j);//找出后面重复数据的下标
}
}
//console.log(repArr);
if (repArr.length == 0) {//若重复数组没有值说明其不是重复数据
newArr.push(arr[i]);
}
}
console.log(newArr); //[5, 4, 3, 2, 1]ES6 Set结构的高效去重
第十一种方法：利用ES6的Set结构。利用ES6新增的Set数据结构，其特性是成员值唯一。将数组转换为Set，再转换回数组，即可高效实现去重。
var arr = [1,1,2,2,3,3,4,4,5,5,4,3,2,1,1,1];
console.log(arr); //[1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 4, 3, 2, 1, 1, 1]
function noRepeat11(arr){
var newArr = [];
var myset = new Set(arr);//利用了Set结构不能接收重复数据的特点
for(var val of myset){
newArr.push(val)
}
return newArr;
}
var arr2 = noRepeat11(arr)
console.log(arr2); //[1, 2, 3, 4, 5]以上即为JavaScript数组去重的11种详细实现方案。如需了解更多相关技术细节，建议参考本站其他JavaScript数组操作文章。