JS數(shù)組去重的常用方法總結(jié)

更新時(shí)間：2023年10月20日 08:42:42 作者：囂張農(nóng)民

這篇文章主要給大家介紹了關(guān)于js數(shù)組去重的常用方法,js數(shù)組去重是比較常見(jiàn)的數(shù)組操作方式之一,文中介紹了九種常用方法,需要的朋友可以參考下

一、利用 ES6 Set 去重（ES6 中最常用）
二、利用 for 嵌套 for，然后 splice 去重（ES5 中最常用）
三、利用 indexOf 去重
四、利用 sort()
五、利用 includes()
六、利用 hasOwnProperty
七、利用 filter
八、利用遞歸去重
九、利用 Map 數(shù)據(jù)結(jié)構(gòu)去重

一、利用 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", {}, {}]

特點(diǎn):不考慮兼容性，這種去重的方法代碼最少。這種方法還無(wú)法去掉 {} 空對(duì)象，后面的高階方法會(huì)添加去掉重復(fù) {} 的方法。

二、利用 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]){         //第一個(gè)等同于第二個(gè)，splice方法刪除第二個(gè)
                    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", {}, {}]

特點(diǎn):雙層循環(huán)，外層循環(huán)元素，內(nèi)層循環(huán)時(shí)比較值。值相同時(shí)，則刪去這個(gè)值。NaN和{}沒(méi)有去重，兩個(gè)null直接消失了

三、利用 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", {}, {}]

特點(diǎn):新建一個(gè)空的結(jié)果數(shù)組，for 循環(huán)原數(shù)組，判斷結(jié)果數(shù)組是否存在當(dāng)前元素，如果有相同的值則跳過(guò)，不相同則 push 進(jìn)數(shù)組。NaN、{}沒(méi)有去重。

四、利用 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]

特點(diǎn):利用 sort() 排序方法，然后根據(jù)排序后的結(jié)果進(jìn)行遍歷及相鄰元素比對(duì)。NaN、{}沒(méi)有去重。

五、利用 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 檢測(cè)數(shù)組是否有某個(gè)值
                    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", {}, {}]

特點(diǎn): {}沒(méi)有去重

六、利用 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", {}]

特點(diǎn):利用 hasOwnProperty 判斷是否存在對(duì)象屬性,所有的都去重了

七、利用 filter

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //當(dāng)前元素，在原始數(shù)組中的第一個(gè)索引==當(dāng)前索引值，否則返回當(dāng)前元素
    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", {}, {}]

特點(diǎn):利用 filter過(guò)濾的方法通過(guò)索引比對(duì)，{}沒(méi)有去重

八、利用遞歸去重

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，然后數(shù)組去重
        }
    }
    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]

特點(diǎn):{},NaN沒(méi)有去重

九、利用 Map 數(shù)據(jù)結(jié)構(gòu)去重

function arrayNonRepeatfy(arr) {
  let map = new Map();
  let array = new Array();  // 數(shù)組用于返回結(jié)果
  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);   // 如果沒(méi)有該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]

特點(diǎn):創(chuàng)建一個(gè)空 Map 數(shù)據(jù)結(jié)構(gòu)，遍歷需要去重的數(shù)組，把數(shù)組的每一個(gè)元素作為 key 存到 Map 中。由于 Map 中不會(huì)出現(xiàn)相同的 key 值，所以最終得到的就是去重后的結(jié)果。NaN,{}沒(méi)有去重

以上就是JS數(shù)組去重的常用方法總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于JS數(shù)組去重的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)用于建立新的一行且增加的四個(gè)文本框?yàn)榭盏那冶唤?..
2007-04-04

layui獲取選中行數(shù)據(jù)的實(shí)例講解

今天小編就為大家分享一篇layui獲取選中行數(shù)據(jù)的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

2018-08-08

JS制作簡(jiǎn)單的三級(jí)聯(lián)動(dòng)

本文給大家分享的是使用javascript實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的三級(jí)聯(lián)動(dòng)菜單，非常簡(jiǎn)單實(shí)用，有需要的小伙伴過(guò)來(lái)參考下吧。

2015-03-03

JavaScript中this詳解

都說(shuō) JavaScript 是一種很靈活的語(yǔ)言，這其實(shí)也可以說(shuō)它是一個(gè)混亂的語(yǔ)言。它把函數(shù)式編程和面向?qū)ο缶幊挑酆弦黄?，再加上?dòng)態(tài)語(yǔ)言特性，簡(jiǎn)直強(qiáng)大無(wú)比，下面小編給大家介紹Javascript中this詳解，需要的小伙伴可以來(lái)參考下

2015-09-09