JS数组去重方法：Set、循环、hasOwnProperty等5种实战技巧

JavaScript数组去重概述

通常情况下，数据去重工作由后端负责，但前端开发者也需具备处理数据的能力，以应对前端直接处理去重任务的需求。本文总结了五种常见的数组去重实现方式，供参考学习。

基于Set的数据结构去重

方法一：使用 new Set() 实现数组去重

ES6引入了Set数据结构，其特性是成员值唯一，不存在重复项。Set本身是一个构造函数，可接收数组作为参数进行初始化。利用Set的这一特性，可以便捷地实现数组去重。


let list = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
let list1 = Array.from(new Set(list)); // [ 1, "a", true, false, null, "", undefined ]
let list2 = [...new Set(list)]; // [ 1, "a", true, false, null, "", undefined ]

基于some方法的循环去重

方法二：结合 some() 方法与循环进行去重

some() 方法用于检测数组中是否存在满足指定条件的元素。若存在满足条件的元素，则返回 true，后续元素不再检测；若都不满足，则返回 false。我们可以定义一个新数组来存储去重后的结果，遍历原始数组时，利用新数组的 some 方法判断当前元素是否已存在，若不存在则加入新数组。


 function distinct(list) {
   let result = [list[0]];// 用于承接没有重复的数据，初始时将原始数组的第一个值赋给它。
   for (let i = 1; i < list.length; i++) {
     // 判断结果数组中是否存在一样的值，若果没有的话则将数据存入结果数组中。
     if (!(result.some(val => list[i] === val))) {
       result.push(list[i]);
     }
   }
   return result;
 }
let arr = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
distinct(arr); // [ 1, "a", true, false, null, "", undefined ]

基于双重循环的去重实现

方法三：利用双重 for 循环进行去重

双重 for 循环中，外层循环确保遍历数组中的每一项，内层循环则负责将当前项与后续所有项进行比较，从而找出并处理重复元素。


function distinct2(list) {
  for (let i = 0; i < list.length; i++) {
    for (let j = i + 1; j < list.length; j++) {
      // 后面数据的若跟前一项数据相同，则重复，需要去除。
      if (list[i] === list[j]) {
        list.splice(j, 1); // 去除后面的相同项
        j--;
      }
    }
  }
  return list;
}
let arr = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
distinct2(arr); // [ 1, "a", true, false, null, "", undefined ]

基于hasOwnProperty的对象属性去重

方法四：利用 hasOwnProperty() 方法去重

hasOwnProperty() 方法用于检测一个属性是否为对象自身的属性，而非从原型链继承而来。若属性为自有属性，返回 true，否则返回 false。


function unique(arr) {
 var obj = {}; // 用来记录数组中的数据
 return arr.filter(function(item, index, arr){
   // 如果记录对象中存在某个数据，则返回false过滤掉；否则obj进行记录并筛选出来
   return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
 })
}
let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
unique(arr) // [ 1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, 'a', {}]

基于filter和indexOf的去重方案

方法五：结合 filter() 与 indexOf() 方法去重

indexOf() 方法返回指定字符串值在字符串中首次出现的位置索引。


function unique(arr) {
 return arr.filter(function(item, index, arr) {
  // 从数组0位开始查，如果当前元素在原始数组中的第一个索引==当前索引值，说明它是第一次出现。
  return arr.indexOf(item, 0) === index;
 });
}
let list = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
unique(list); // [ 1, "a", true, false, null, "", undefined ]

此外，数组去重还可利用 filter()、includes() 等方法实现，其核心思路与上述几种方法类似，此处不再赘述。

以上即为JavaScript中数组去重的五种方法详解，更多关于JavaScript数组去重的内容，欢迎查阅本站其他相关文章。

JavaScript数组去重的5种实现方案与代码解析