JS數組去重-JavaScript數組去重方法介紹

JS數組去重，相信大多數前端朋友在面試過程中，遇到過。一般是要求手寫或者大致講一下思路。一旦被面試官問道，講一下數組去重的方法？此時，我們如果可以回答10種或者7、8種，很有可能給我們的面試加分。
但是在項目中，基本上沒有遇見過此類問題。日常項目組遇見的概率比較低，但爲了每年的金三銀四跳槽季，還是有必要掌握以下，以防面試的時候遇到此問題。
下面是整理的數組去重方法，大致有10多種，希望看完能對屏幕前的人朋友們有所幫助。

一、Es6 new Set() 與 … 擴展運算符 方法

 	var arr = [1,'1',true,undefined,null,{},NaN,function a(){},1,'1',true,undefined,null,{},NaN,function a(){}];
    console.log([...new Set(arr )]); 
    // [1, "1", true, undefined, null, {…}, NaN, ƒ, {…}, ƒ]
    // 對象和函數沒有去重

可以看到new Set() 方法代碼簡潔，但是對象和函數不能去重，使用的時候需要注意一下。

二、Es6 new Set() 方法

 	var arr = [1,'1',true,undefined,null,{},NaN,function a(){},1,'1',true,undefined,null,{},NaN,function a(){}];
	function unique (arr) {
	  return Array.from(new Set(arr))
	}
    console.log(unique(arr));
    // [1, "1", true, undefined, null, {…}, NaN, ƒ, {…}, ƒ]  
    // 對象和函數沒有去重

三、Es6 Map數據結構數組去重

	function unique_a(arr) {
	        let map = new Map(),
	            array = [];
	        for (let i = 0, j = arr.length;i < j; i++){
	            var item = arr[i]
	            if(map.has(item)){ // 如果有該 key 值
	                map.set(item, true)
	            } else {
	                map.set(arr[i], false); // 如果沒有該key 值
	                array.push(item)
	            }
	        }
	        return array;
	 }
	 var arr = [1,'1',true,,undefined,null,{},NaN,function a(){},1,'1',true,undefined,null,{},NaN,function a(){}];
	     console.log('map-unique_a', unique_a(arr)) 
	     //  [1, "1", true, undefined, null, {…}, NaN, ƒ, {…}, ƒ]
	     //  對象和函數沒有去重

四、利用對象的屬性去重

function unique_b(arr) {
        if (!Array.isArray(arr)) {
            console.log('數據類型有問題')
            return
        }
        var array = []
        var obj = {}
        for (var i = 0; i < arr.length; i++) {
            if (obj[arr[i]]) {
                // obj[arr[i]]++;
            } else {
                array.push(arr[i])
                console.log(arr[i])
                obj[arr[i]] = 1
            }
        }
        console.log(obj)
        return array
    }

  var arr = [1,'1',true,,'true',undefined,null,{},NaN,function a(){},1,'1',true,,'true',undefined,null,{},NaN,function a(){}];
   console.log('unique_b', unique_b(arr ));
     // [1, true, undefined, null, {…}, NaN, ƒ]
     // 函數和對象、NaN 去重了，但是字符串 'true'和 true，數組 1 和 字符串 ‘1’，只能保留一種，該方法有待改進。

五、使用2層for循環嵌套，然後使用splice去重

	let arr = [1, 1, 'true', 'true', function a() {}, function a() {}, true, true, false, false, null, null, undefined, undefined, NaN, NaN, 0, 0, 'a', 'a', {}, {}]
    function unique_c(arr) {
        for (let i = 0; i < arr.length; i++) {
            var item = arr[i]
            for (let j = i + 1; j < arr.length; j++) {
                var subItem = arr[j]
                // 這裏判斷條件首先是同一類型的數據進行比較，然後用 === 和 JSON.stringify方式比較
                if (Object.prototype.toString.call(item) === Object.prototype.toString.call(subItem) &&
                  (item === subItem || JSON.stringify(item) === JSON.stringify(subItem))) {  
                    arr.splice(j, 1);//第一個等同於第二個，splice方法刪除第二個
                    j--;
                }
            }
        }
    }
    unique_c(arr);
    console.log(arr); 
    // [1, "true", ƒ, true, false, null, undefined, NaN, 0, "a", {…}] 
    // 此方法可以去除任意類型相同的數據

此方法可以去除任意類型相同的數據

六、indexOf 去重

   let arr1 = [1, 1, 'true', 'true', function a() {}, function a() {}, true, true, false, false, null, null, undefined, undefined, NaN, NaN, 0, 0, 'a', 'a', {}, {}]
    function unique_d(arr) {
        if (!Array.isArray(arr)) {
            console.log('params 參數錯誤')
            return
        }
        var newArr = []
        for (var i = 0; i < arr.length; i++) {
            var item = arr[i]
            if (newArr.indexOf(item) === -1) {
                newArr.push(item)
            }
        }
        return newArr
    }

    console.log('unique_d', unique_d(arr1))
	// [1, "true", ƒ, ƒ, true, false, null, undefined, NaN, NaN, 0, "a", {…}, {…}]
	// 此函數對函數、NaN 、對象不能去重

七、利用sort排序

	var arr= [1, 2, 3, 1, 'false', true, NaN, null, function a(){},function a(){},undefined, { name: 1 }, 1, 2, 3, 1, 'false', true, NaN, null, undefined, { name: 1 }];
    function unique_e(arr) {
        if (!Array.isArray(arr)) {
            console.log('params 參數錯誤')
            return
        }
        arr = arr.sort();
        var newArr = [arr[0]];
        for (var i = 1, j = arr.length; i < j; i++) {
            var item = arr[i],
              	prevItem = arr[i - 1]
            if (item !== prevItem) {
                newArr.push(item)
            }
        }
        return newArr;
    }
    console.log('unique_e', unique_e(arr));
    // [1, 2, 3, NaN, NaN, {…}, {…}, "false", ƒ, ƒ, null, true, undefined]

此方法不能對NaN 、對象、函數去重，改變一下判斷條件即可實現全部類型去重。使用上面第種方法裏面的判斷條件即可。

八、利用 ES6 includes

	var arr= [1, 2, 3, 1, 'false', true, NaN, null, function a(){},function a(){},undefined, { name: 1 }, 1, 2, 3, 1, 'false', true, NaN, null, undefined, { name: 1 }]
	function unique_f(arr) {
        if (!Array.isArray(arr)) {
            console.log('數據類型有問題')
            return
        }
        var newArray = []
        for (var i = 0, j = arr.length; i < j; i++) {
            var item = arr[i]
            if (!newArray.includes(item)) {
                newArray.push(item)
            }
        }
        return newArray
    }

    console.log('unique_f', unique_f(list))
    // [1, 2, 3, NaN, {…}, {…}, "false", ƒ, ƒ, null, true, undefined]

對象和函數不能實現去重，使用時需要注意。

九、使用對象 hasOwnProperty 方法

var arr =var arr = [function a(){},{nameaa:222},1,1,'true','true',true,true,15,15,function a(){}, function b(){alert(222)},false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{name:1},{name:222}];;
	function unique_g(arr) {
	    var obj = {};`在這裏插入代碼片`
	    return arr.filter(function(item, index, arr){
	        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
	    })
	}
    console.log(unique(arr))
    // [ƒ, {…}, 1, "true", true, 15, ƒ, false, undefined, null, NaN, "NaN", 0, "a"]

此方法對，只要數組裏麪包含對象就給去除掉，做不到準確去重。使用時注意一下。

十、使用 filter 去重

var arr = [1, 1, true, true, 'true', 'true',function a(){},function b(){},,function a(){}, 15, 15, false, false, undefined, undefined, null, null, '', '', NaN, NaN, 'NaN', 0, 0, 'a', 'a', { name: 1 }, { name: 1 }]
 function unique_h(arr) {
     return arr.filter(function(item, index) {
        return arr.indexOf(item, 0) === index
    })
 }

console.log('unique_h', unique_h(arr)) // 對象、函數沒有去重

十一、利用遞歸去重

	var arr = [1, 1, undefined,undefined,true, true, 'true', 'true',function a(){},function b(){},,function a(){}, 15, 15, false, false,   null, null, '', '', NaN, NaN, 'NaN', 0, 0, 'a', 'a', { name: 1 }, { name: 1 }]
	function unique_i(arr) {
        var array = arr,
        	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;
    }
    console.log('unique_i', unique_i(arr));
    // [1, true, "true", ƒ, ƒ, ƒ, false, null, "", 0, 15, NaN, NaN, "NaN", "a", {…}, {…}, undefined]

對函數、NaN、對象同樣是沒有去重，並且對 undefined 處理有異常。有時間在仔細研究一下。

十二、使用 reduce+includes

	var arr = [1, 1, undefined,undefined,true, true, 'true', 'true',function a(){},function b(){},,function a(){}, 15, 15, false, false,   null, null, '', '', NaN, NaN, 'NaN', 0, 0, 'a', 'a', { name: 1 }, { name: 1 }]
	function unique_j(arr) {
         return arr.reduce((prev, current) => {
             return prev.includes(current)?prev: [...prev, current]
        }, [])
     }
     console.log('unique_j',unique_j(arr )); 
     // [1, undefined, true, "true", ƒ, ƒ, ƒ, 15, false, null, "", NaN, "NaN", 0, "a", {…}, {…}]

對函數、對象沒有去重。

以上就是整理的方法，有錯誤的地方還希望大家指出來，如果還有其他方法，請多多指教。