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

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

這篇文章主要給大家介紹了關(guān)于js數(shù)組去重的常用方法,js數(shù)組去重是比較常見的數(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):不考慮兼容性，這種去重的方法代碼最少。這種方法還無法去掉 {} 空對象，后面的高階方法會添加去掉重復(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和{}沒有去重，兩個(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)前元素，如果有相同的值則跳過，不相同則 push 進(jìn)數(shù)組。NaN、{}沒有去重。

四、利用 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)行遍歷及相鄰元素比對。NaN、{}沒有去重。

五、利用 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 檢測數(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): {}沒有去重

六、利用 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 判斷是否存在對象屬性,所有的都去重了

七、利用 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過濾的方法通過索引比對，{}沒有去重

八、利用遞歸去重

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沒有去重

九、利用 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);   // 如果沒有該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 中不會出現(xiàn)相同的 key 值，所以最終得到的就是去重后的結(jié)果。NaN,{}沒有去重

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

您可能感興趣的文章: