JavaScript中數(shù)組去重常用的五種方法詳解

更新時間：2022年06月21日 10:27:56 作者：Du9191

去重是開發(fā)中經(jīng)常會碰到的一個熱點問題，這篇文章主要介紹了JS中實現(xiàn)數(shù)組去重中常用的5個方法，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下

1.對象屬性（indexof）

利用對象屬性key排除重復(fù)項

遍歷數(shù)組，每次判斷新數(shù)組中是否存在該屬性，不存在就存儲在新數(shù)組中

并把數(shù)組元素作為key，最后返回新數(shù)組

這個方法的優(yōu)點是效率高，缺點是使用了額外空間

var newArr?= [];
arr.forEach((key,index)=>{
    if(newArr.indexOf(key) === -1){
        newArr.push(key)
　　}        
})
console.log(newArr);//?[1, '1', 17, true, false, 'true', 'a', {}, {}]

2.new Set(數(shù)組)

Set是一系列無序、沒有重復(fù)值的數(shù)據(jù)集合，傳入一個需要去重的數(shù)組，Set會自動刪除重復(fù)的元素

再將Set轉(zhuǎn)數(shù)組返回。此方法效率高，代碼清晰，缺點是存在兼容性問題

const newArr = [...new Set(arr)];
console.log(newArr);// [1, '1', 17, true, false, 'true', 'a', {}, {}]

3.new Map()

利用Map的鍵值對同名覆蓋，再將Map轉(zhuǎn)數(shù)組

const m = new Map();
for (let i = 0; i < arr.length; i++) {
    m.set(arr[i], arr[i]);
}
const newArr = []
m.forEach(function (value, key) {
    newArr .push(value)
})
console.log(newArr );//[1, '1', 17, true, false, 'true', 'a', {}, {}]

4.filter() + indexof

filter把接收的函數(shù)依次作用于每一個數(shù)組項，然后根據(jù)返回值 true or false 決定是否保留該值

優(yōu)點在于可在去重時插入對元素的操作，可拓展性強(qiáng)

const newArr= arr.filter(function(item,index,self){
    return self.indexOf(item) === index;
})
console.log(newArr);// ?[1, '1', 17, true, false, 'true', 'a', {}, {}]

5.reduce() + includes

reduce()把結(jié)果繼續(xù)和序列的下一個元素做累加計算

利用reduce遍歷和傳入一個空數(shù)組作為去重后的新數(shù)組，然后內(nèi)部判斷新數(shù)組中是否存在當(dāng)前遍歷的元素，不存在就插入新數(shù)組

缺點在于時間消耗多，內(nèi)存空間也額外占用

const newArray = arr.reduce((newArr, element) => {
　　if (!newArr.includes(element)) {
　　　　newArr.push(element);
　　}
   return newArr;
}, []);

注意點：

在數(shù)據(jù)量較低時，以上五個方法無較為明顯的區(qū)別（10000條）

高于10000條時，前兩種方法時間消耗最少，后三種時間消耗依次增加

第一種方法空間占用多，當(dāng)下很多項目不再考慮低版本游覽器兼容性問題

推薦使用Set()去重方法

補(bǔ)充

當(dāng)然實現(xiàn)數(shù)組去重還有很多其他的方法，下面小編為大家整理了一些

利用for嵌套for，然后splice去重

    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))

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)
    })
}

利用遞歸去重

?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))

到此這篇關(guān)于JavaScript中數(shù)組去重常用的五種方法詳解的文章就介紹到這了,更多相關(guān)JavaScript數(shù)組去重內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: