JavaScript常见的数组去重

绝地灬酷狼 2022-11-06 06:53 163阅读 0赞

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

let arr=[1,'1',1,2,3,4,4,5]
    [...new Set(arr)]
    //也可用Array.from(new Set(arr) 这种方法还无法去掉“{}”空对象

## 二、利用双层for循环，然后splice去重（ES5中最常用） ##

双层循环，外层循环元素，内层循环时比较值。值相同时，则删去这个值。

var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    
    for(var i=0,i<arr.length,i++){
       for(var j=i+1,j<arr.length,j++){
          if(arr[i]==arr[j]{
           arr.split(j,1) //双层循环，外层循环元素，内层循环时比较值。值相同时，则删去这个值。
           j-- //因为每次删掉一个后，数组会自动向前补齐，然而 j++ 会让代码漏掉一次判断，结果就不敬人意
          }
       }
    }
     [1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]     
     NaN和{}没有去重，两个null直接消失了

## 三、利用indexOf去重 ##

新建一个空的结果数组，for 循环原数组，判断结果数组是否存在当前元素，如果有相同的值则跳过，不相同则push进数组。

var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    let newArr=[]
    for(let i=0,i>arr.lengeh,i++){
      if(newArr.indexOf(arr[i])==-1){
        newArr.push(arr[i]
    }
    }
    // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]  //NaN、{}没有去重

## 四、利用sort() ##

利用sort()排序方法，然后根据排序后的结果进行遍历及相邻元素比对。

var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    arr=arr.sort()
    let newArr=[arr(0)]
    for(let i=1,i<arr.length,i++){
       if(arr[i]!==arr[i-1]){
          newArr.push(arr[i]
    }
    }
    // [0, 1, 15, "NaN", NaN, NaN, {…}, {…}, "a", false, null, true, "true", undefined]      //NaN、{}没有去重

## 五、利用includes ##

var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    
    let newArr=[]
    for(let i=0,i<arr.length,i++){
       if(!newArr.includes(arr[i]){
         newArr.push(arr[i])
    }
    }
    
    //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]     
    //{}没有去重

## 六、利用filter ##

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

## 七、利用reduce+includes ##

reduce用法：[https://blog.csdn.net/Web\_J/article/details/88870515?ops\_request\_misc=%257B%2522request%255Fid%2522%253A%2522161519417616780266252095%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request\_id=161519417616780266252095&biz\_id=0&utm\_medium=distribute.pc\_search\_result.none-task-blog-2~blog~first\_rank\_v1~rank\_blog\_v1-2-88870515.pc\_v1\_rank\_blog\_v1&utm\_term=%E5%8E%BB%E9%87%8D][https_blog.csdn.net_Web_J_article_details_88870515_ops_request_misc_257B_2522request_255Fid_2522_253A_2522161519417616780266252095_2522_252C_2522scm_2522_253A_252220140713.130102334.pc_255Fblog._2522_257D_request_id_161519417616780266252095_biz_id_0_utm_medium_distribute.pc_search_result.none-task-blog-2_blog_first_rank_v1_rank_blog_v1-2-88870515.pc_v1_rank_blog_v1_utm_term_E5_8E_BB_E9_87_8D]

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

## 八、利用Map数据结构去重 ##

[https_blog.csdn.net_Web_J_article_details_88870515_ops_request_misc_257B_2522request_255Fid_2522_253A_2522161519417616780266252095_2522_252C_2522scm_2522_253A_252220140713.130102334.pc_255Fblog._2522_257D_request_id_161519417616780266252095_biz_id_0_utm_medium_distribute.pc_search_result.none-task-blog-2_blog_first_rank_v1_rank_blog_v1-2-88870515.pc_v1_rank_blog_v1_utm_term_E5_8E_BB_E9_87_8D]: https://blog.csdn.net/Web_J/article/details/88870515?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161519417616780266252095%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=161519417616780266252095&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v1~rank_blog_v1-2-88870515.pc_v1_rank_blog_v1&utm_term=%E5%8E%BB%E9%87%8D