当前位置：首页 > 全部内容 > 正文

JavaScript数组去重：12种实现方案详解

作者：异步漫步

时间：2026-10-22

浏览：608

本文系统总结了JavaScript中12种数组去重方案，涵盖从基础的嵌套循环、indexOf到ES6的Set、Map及递归等高级用法。详细解析每种方法的代码逻辑、适用场景及局限性，如NaN与空对象的处理差异，旨在为前端开发及面试提供全面的技术参考。

文章目录

JavaScript数组去重：12种实现方案详解

本文汇总了JavaScript中实现数组去重的多种技术方案，供读者参考学习。

数组去重通常是面试中的高频考点，常要求手写实现代码。若能在被问及去重方案时列举出十余种方法，往往能给面试官留下深刻印象。

在实际业务项目中，数组去重多由后端处理，前端较少直接涉及。尽管日常开发中使用频率不高，但掌握相关技术有助于应对面试中的潜在提问。

注：本文编写较为匆忙，且近期工作繁忙，未经过极其严格的逐行核对。整体思路无误，个别细节可能存在微小偏差。

数组去重的具体实现方法

数组去重的具体实现方法

利用ES6 Set去重

一、利用ES6 Set去重（ES6中最常用）


function unique (arr) {
 return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
 //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

该方法代码量最少，但不考虑兼容性。需注意，此方法无法去除值为空对象“{}”的重复项，后续高阶方法将补充对此类情况的处理。

利用for嵌套for与splice去重

二、利用for嵌套for，然后splice去重（ES5中最常用）


function unique(arr){
    for(var i=0; i<arr.length; i++){
      for(var j=i+1; j<arr.length; j++){
        if(arr[i]==arr[j]){     //第一个等同于第二个，splice方法删除第二个
          arr.splice(j,1);
          j--;
        }
      }
    }
return arr;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]   //NaN和{}没有去重，两个null直接消失了

采用双层循环结构：外层遍历数组元素，内层进行值比较。若发现值相同，则使用splice方法删除重复项。

如需快速掌握更多常用的ES6语法，可参考之前的文章《学习ES6笔记──工作中常用到的ES6语法》。

利用indexOf去重

三、利用indexOf去重


function unique(arr) {
  if (!Array.isArray(arr)) {
    console.log('type error!')
    return
  }
  var array = [];
  for (var i = 0; i < arr.length; i++) {
    if (array .indexOf(arr[i]) === -1) {
      array .push(arr[i])
    }
  }
  return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
// [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}] //NaN、{}没有去重

创建一个结果数组，通过for循环遍历原数组。利用indexOf判断结果数组中是否已存在当前元素，若不存在则push进结果数组，存在则跳过。

利用sort()排序去重

四、利用sort()


function unique(arr) {
  if (!Array.isArray(arr)) {
    console.log('type error!')
    return;
  }
  arr = arr.sort()
  var arrry= [arr[0]];
  for (var i = 1; i < arr.length; i++) {
    if (arr[i] !== arr[i-1]) {
      arrry.push(arr[i]);
    }
  }
  return arrry;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
// [0, 1, 15, "NaN", NaN, NaN, {…}, {…}, "a", false, null, true, "true", undefined]   //NaN、{}没有去重

利用sort()排序方法，根据排序后的结果进行遍历，并比对相邻元素以去除重复值。

利用对象属性去重

五、利用对象的属性不能相同的特点进行去重（这种数组去重的方法有问题，不建议用，有待改进）


function unique(arr) {
  if (!Array.isArray(arr)) {
    console.log('type error!')
    return
  }
  var arrry= [];
   var obj = {};
  for (var i = 0; i < arr.length; i++) {
    if (!obj[arr[i]]) {
      arrry.push(arr[i])
      obj[arr[i]] = 1
    } else {
      obj[arr[i]]++
    }
  }
  return arrry;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", 15, false, undefined, null, NaN, 0, "a", {…}]  //两个true直接去掉了，NaN和{}去重

利用includes去重

六、利用includes


function unique(arr) {
  if (!Array.isArray(arr)) {
    console.log('type error!')
    return
  }
  var array =[];
  for(var i = 0; i < arr.length; i++) {
      if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
          array.push(arr[i]);
       }
  }
  return array
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]   //{}没有去重

利用hasOwnProperty去重

七、利用hasOwnProperty


function unique(arr) {
  var obj = {};
  return arr.filter(function(item, index, arr){
    return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
  })
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]  //所有的都去重了

利用hasOwnProperty 判断是否存在对象属性

利用filter去重

八、利用filter


function unique(arr) {
 return arr.filter(function(item, index, arr) {
  //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
  return arr.indexOf(item, 0) === index;
 });
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]

利用递归去重

九、利用递归去重


function unique(arr) {
    var array= arr;
    var len = array.length;
  array.sort(function(a,b){  //排序后更加方便去重
    return a - b;
  })
  function loop(index){
    if(index >= 1){
      if(array[index] === array[index-1]){
        array.splice(index,1);
      }
      loop(index - 1);  //递归loop，然后数组去重
    }
  }
  loop(len-1);
  return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

利用Map数据结构去重

十、利用Map数据结构去重


function arrayNonRepeatfy(arr) {
 let map = new Map();
 let array = new Array(); // 数组用于返回结果
 for (let i = 0; i < arr.length; i++) {
  if(map .has(arr[i])) { // 如果有该key值
   map .set(arr[i], true);
  } else {
   map .set(arr[i], false);  // 如果没有该key值
   array .push(arr[i]);
  }
 }
 return array ;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

创建一个空的Map数据结构，遍历待去重的数组，将每个元素作为key存入Map。由于Map的key唯一，最终得到的即为去重后的结果。

利用reduce与includes去重

十一、利用reduce+includes


function unique(arr){
  return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr));
// [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

利用展开运算符与Set去重

十二、[...new Set(arr)]


[...new Set(arr)]
//代码就是这么少----（其实，严格来说并不算是一种，相对于第一种方法来说只是简化了代码）

PS：部分文章提及的foreach+indexOf去重方法，本质上与前述方法大同小异，故未单独列出。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

PS：这里再为大家提供几款相关工具供大家参考使用：

在线去除重复项工具： http://tools.jb51.net/code/quchong

在线文本去重复工具： http://tools.jb51.net/aideddesign/txt_quchong

更多关于JavaScript相关内容还可查看本站专题：《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

JavaScript怎么遍历对象的Symbol键和不可枚举属性

封装一个健壮的JS字符串判空工具函数

JavaScript合并数组的三种常用方法：concat、扩展运算符与push

JavaScript立即执行函数(IIFE)是什么及基本语法

JS对象数组转字符串为什么推荐用JSON.stringify()

js数组去重
相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JS动态构建复杂嵌套JSON对象的方法