14種去重方法

1、利用ES6中 Set去重
ES6提供了新的數據結構Set，Set函數可以接受一個數組（或類數組對象）作爲參數來初始化。
Array.from方法可以將Set結構轉換爲數組結果，而Set結果是不重複的數據集，因此能夠去重。

function unique (arr) {
	return Array.from(new Set(arr));
}
 var arr=[1,1,2,4,true,true,false,false,null,null,"af","he","af",undefined,undefined,{},{},NaN,NaN];
 console.log(unique(arr));
 // [1, 2, 4, true, false, null, "af", "he", undefined, {…}, {…}, NaN]
 // NaN可以去重

2、利用ES6中 Set 和解構賦值去重
…擴展運算符（…可用來轉換爲數組對象）

function unique (arr) {
	return [...new Set(arr)];
}
 var arr=[1,1,2,4,true,true,false,false,null,null,"af","he","af",undefined,undefined,{},{},NaN,NaN];
 console.log(unique(arr));
  // NaN可以去重

問題：因爲js是判斷對象地址是否相同，而不是對象內容，所以每個空對象都是不相等的。

缺點：存在兼容性問題，不支持IE

3、利用for嵌套for雙重循環，然後splice去重（ES5中常用）
splice()方法向、從數組中添加、刪除項目，然後返回被刪除的項目，會改變原始數組
splice()方法可刪除從index處開始的零個或多個元素

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,2,4,true,true,false,false,null,null,"af","he","af",undefined,undefined,{},{},NaN,NaN];
console.log(unique(arr));
//[1,2,4,false,"af","he",undefined,{},{},NaN,NaN]

問題：NaN和 {} 沒有去重，兩個undefined和兩個true直接消失了
undefined消失:改爲===即可

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,2,4,true,true,false,false,null,null,"af","he","af",undefined,undefined,{},{},NaN,NaN];
console.log(unique(arr));
//[1,2,4,true,false,null,"af","he",undefined,{},{},NaN,NaN]

嚴格相等===：兩個被比較的值類型相同，值也相同，兩個被比較的值在比較前都不進行隱式轉換
非嚴格相等==：在比較前將兩個被比較的值轉換爲相同類型

4、利用indexOf去重
數組的indexOf方法可以返回某個指定的元素在數組中首次出現的位置。

1.創建一個空的結果數組，for循環原數組，然後調用indexOf方法對原來的數組進行遍歷判斷，如果元素不在結果數組中，則將其push進結果數組中，最後將結果數組返回，即可得到去重的數組。

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (res.indexOf(arr[i]) === -1) {    //判斷arr中的元素是否在結果數組中
            res.push(arr[i])
        }
    }
    return res
}
var arr=[1,1,2,4,true,true,false,false,null,null,"af","he","af",undefined,undefined,{},{},NaN,NaN];
console.log(unique(arr));
//[1,2,4,true,false,null,"af","he",undefined,{},{},NaN,NaN]

*2.利用indexOf檢測元素在數組中第一次出現的位置是否和元素現在的位置相等，如果不等則說明該元素是重複元素。

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    return Array.prototype.filter.call(arr, function (item, index) {
        return arr.indexOf(item) === index;
    });
}
var arr = [1, 1, 2, 4, true, true, false, false, null, null, "af", "he", "af", undefined, undefined, {}, {}, NaN, NaN];
console.log(unique(arr));
//[1,2,4,true,false,null,"af","he",undefined,{},{}]

5、利用sort()去重
利用sort()排序方法，然後根據排序後的結果進行遍歷及相鄰元素比對。

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    arr = arr.sort();
    var array = [arr[0]];
    //遍歷排序後的數組
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i - 1]) {   //判斷相鄰元素是否相等
            array.push(arr[i]);
        }
    }
    return array
}
var arr = [1, 1, 2, 4, true, true, false, false, null, null, "af", "he", "af", undefined, undefined, {}, {}, NaN, NaN];
console.log(unique(arr));
//[1,2,4,NaN,NaN,{},{},"af",false,"he",null,true,undefined]

6、利用數組原型對象中的includes方法
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 檢測數組是否有某個值
            array.push(arr[i]);
        }
    }
    return array
}
var arr = [1, 1, 2, 4, true, true, false, false, null, null, "af", "he", "af", undefined, undefined, {}, {}, NaN, NaN];
console.log(unique(arr));
//12 [1,2,4,true,false,null,"af","he",undefined,{},{},NaN]

此時NaN也去重了

7、利用數組原型對象中的filter+includes
filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。filter不會改變原始數組。利用fifter進行遍歷

function unique(arr) {
    var newArr= []
    newArr = arr.filter(function (item) {
        return newArr.includes(item) ? '' : newArr.push(item)
    })
    return newArr
}
var arr = [1, 1, 2, 4, true, true, false, false, null, null, "af", "he", "af", undefined, undefined, {}, {}, NaN, NaN];
console.log(unique(arr));
//12 [1,2,4,true,false,null,"af","he",undefined,{},{},NaN]
//與includes去重原理一致

8、利用數組原型對象中的forEach+includes
forEach方法：循環遍歷數組中的每一項。
forEach() 方法用於調用數組的每個元素，並將元素傳遞給回調函數。
map() 方法返回一個新數組，數組中的元素爲原始數組元素調用函數處理後的值。
map()方法按照原始數組元素順序依次處理元素
filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。沒有符合條件的元素時返回空數組。
reduce() 方法接收一個函數作爲累加器，數組中的每個值（從左到右）開始縮減，最終計算爲一個值

function unique(arr) {
    var newArr= []
    arr.forEach(item => {
        return newArr.includes(item) ? '' : newArr.push(item)
    });
    return newArr
}
var arr = [1, 1, 2, 4, true, true, false, false, null, null, "af", "he", "af", undefined, undefined, {}, {}, NaN, NaN];
console.log(unique(arr));
//12 [1,2,4,true,false,null,"af","he",undefined,{},{},NaN]
//與includes去重原理一致

9、利用filter
filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。

function unique(arr) {
    return arr.filter(function(item, index, arr) {
        //當前元素，在原始數組中的第一個索引==當前索引值，否則返回當前元素
        return arr.indexOf(item, 0) === index;
    });
}
var arr = [1, 1, 2, 4, true, true, false, false, null, null, "af", "he", "af", undefined, undefined, {}, {}, NaN, NaN];
console.log(unique(arr));
//11 [1,2,4,true,false,null,"af","he",undefined,{},{}]

10、利用對象的hasOwnProperty(推薦)
Object的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, 2, 4, true, true, false, false, null, null, "af", "he", "af", undefined, undefined, {}, {}, NaN, NaN];
console.log(unique(arr));
//11 [1,2,4,true,false,null,"af","he",undefined,{},NaN]
//所有的都去重了

11、利用遞歸去重
可用for循環替代

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，然後數組去重
        }
    }
    loop(len - 1);
    return array;
}
var arr = [1, 1, 2, 4, true, true, false, false, null, null, "af", "he", "af", undefined, undefined, {}, {}, NaN, NaN];
console.log(unique(arr));
//14 [false,null,1,true,2,4,"af","he","af",NaN,NaN,{}，{}，undefined]

12、利用Map數據結構去重
map是ES提供的一種字典數據結構
字典結構——用來存儲不重複key的hash結構。不同於集合（set）的是，字典使用的是鍵值對的形式來存儲數據

function unique(arr) {
    let map = new Map();
    let array = new Array();  // 數組用於返回結果
    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, 2, 4, true, true, false, false, null, null, "af", "he", "af", undefined, undefined, {}, {}, NaN, NaN];
console.log(unique(arr));
//12 [1, 2,4,true,false,null,"af","he",undefined,{},{},NaN]

13、利用reduce+includes去重
reduce() 方法接收一個函數作爲累加器，數組中的每個值（從左到右）開始縮減，最終計算爲一個值

function unique(arr) {
    return arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []);
}
var arr = [1, 1, 2, 4, true, true, false, false, null, null, "af", "he", "af", undefined, undefined, {}, {}, NaN, NaN];
console.log(unique(arr));
//12 [1,2,4,true,false,null,"af","he",undefined,{},{},NaN]

14、利用對象屬性去重
創建空對象，遍歷數組，將數組中的值設爲對象的屬性，並給該屬性賦初始值1，每出現一次，對應的屬性值增加1，這樣，屬性值對應的就是該元素出現的次數了

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    let res = [],
        obj = {}
    for (let i = 0; i < arr.length; i++) {
        if (!obj[arr[i]]) {
            res.push(arr[i])
            obj[arr[i]] = 1
        } else {
            obj[arr[i]]++
        }
    }
    return res
}
var arr = [1, 1, 2, 4, true, true, false, false, null, null, "af", "he", "af", undefined, undefined, {}, {}, NaN, NaN];
console.log(unique(arr));
//11 [1,2,4,true,false,null,"af","he",undefined,{},NaN]

原文鏈接：https://blog.csdn.net/weixin_45519474/article/details/102776040

vue項目獲取富文本編輯器wangEditor內容導出爲word（html轉word格式並下載）

dotnet C# 創建 X11 應用時設置窗口背景顏色

Navicat安裝與激活教程

TDengine docker安裝方法

vue3組件通信與props

sapui5

Alpine Linux apk add DNS lookup error

部分JDK版本的發佈時間

工作中用到的腳本合集

合併代碼時Beyond Compare設置

HTML頁面轉PDF導出加水印並解決字被截斷的問題

手機input上傳圖片到阿里雲和上傳圖片到接口

移動端圖片在IOS不顯示在安卓顯示

14種去重方法

實現瀑布流的3種方式

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結