JS數(shù)組去重你知道幾種培遵？

JS數(shù)組去重是前端面試箭启，澈爵妫考察的一道題，你會幾種方法呢傅寡？如果你有更好的方法放妈，可以在文章下放評論區(qū)提供。
接下來看看8種數(shù)組去重方法荐操，每個方法都在一個塊級作用域中芜抒，有方法和測試用例。方便你更好的測試和理解托启。

方法一 For嵌套for 使用splice去重更改原數(shù)組正向遍歷循環(huán)

遇到刪掉原數(shù)組遞減1

{
    let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0, 'a', 'a',{},{}];
    function distinct (arr) {
        for(let i = 0; i < arr.length; i++) {
            for(let j = i + 1; j < arr.length ; j++) {
                if(arr[i] === arr[j]) {
                    arr.splice(j, 1)
                    j--;
                }
            }
        }
    } 
    
    distinct(arr)
    console.log(arr) // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]
}

優(yōu)點：該方法可以顧慮到重復的 String宅倒、Boolean、 Number屯耸、undefined拐迁、null，返回的是去重后的原數(shù)組疗绣。
缺點：不能過濾掉 NaN线召、Object

方法二 For嵌套for 使用splice去重更改原數(shù)組逆向遍歷循環(huán)

逆向循環(huán)遍歷遇到重復的直接刪掉

{
    let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0, 'a', 'a',{},{}];
    function distinct (arr) {
        for(let i = arr.length; i > 0; i--) {
            for(let j = i - 1; j > -1 ; j--) {
                if(arr[i] === arr[j]) {
                    console.log(arr[j])
                    arr.splice(j, 1)
                }
            }
        }
    } 
    
    distinct(arr)
    console.log(arr) // [1, "true", true, 15, false, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]
}

優(yōu)缺點同方法一：

優(yōu)點：該方法可以顧慮到重復的 String、Boolean多矮、 Number缓淹、undefined、`null``塔逃，返回的是去重后的原數(shù)組讯壶。
缺點：不能過濾掉 NaN、Object

方法三：includes去重返回新數(shù)組

{
    let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0, 'a', 'a',{},{}];
    function distinct (arr) {
        let newArr = []
        for(let i = 0; i < arr.length; i++) {
            if(!newArr.includes(arr[i])) {
                newArr.push(arr[i])
            } 
        }
        return newArr
    }
    
    console.log(distinct(arr)) // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]
}

優(yōu)點是可以過濾重復的NaN了患雏，但是返回的是個新數(shù)組鹏溯，對比方法一二，該方法多消耗了一些存儲空間淹仑。

優(yōu)點：該方法可以顧慮到重復的 String丙挽、Boolean、 Number匀借、undefined颜阐、null、NaN吓肋，返回的是去重后的新數(shù)組凳怨。
缺點：不能過濾掉 Object

方法四 indexOf去重返回新數(shù)組

{
    let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0, 'a', 'a',{},{}];
    function distinct (arr) {
        let newArr = []
        for(let i = 0; i < arr.length; i++) {
            if(newArr.indexOf(arr[i]) < 0) {
                newArr.push(arr[i])
            } 
        }
        return newArr
    }
    
    console.log(distinct(arr)) //  [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]
}

該方法類比includes，不能過濾掉NaN。

優(yōu)點：該方法可以顧慮到重復的 String肤舞、Boolean紫新、 Number、undefined李剖、null芒率，返回的是去重后的新數(shù)組。
缺點：不能過濾掉 NaN篙顺、Object

方法五利用對象的屬性key唯一的特性去重

{
    let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0, 'a', 'a',{},{}];
    function distinct(arr) {
        let obj = {}
        let newArr = []
        for(let i = 0; i < arr.length; i++) {
            if(!obj[arr[i]]){
                obj[arr[i]] = 1
                newArr.push(arr[i])
            }
        }
        return newArr
    }

    console.log(distinct(arr)) // [1, "true", 15, false, undefined, null, NaN, 0, "a", {…}]
}

該方法不禁可以過濾掉重復的NaN,還是可以過濾掉Object偶芍。

優(yōu)點：該方法可以顧慮到重復的 String、Boolean德玫、 Number匪蟀、undefined、null宰僧、NaN材彪、Object，返回的是去重后的原數(shù)組撒桨。
缺點：針對 NaN和'NaN', 對象的key會視為一個key查刻，區(qū)分不了NaN和'NaN'。

方法六利用ES6的Set數(shù)據(jù)結(jié)構(gòu)的特性

Set集合里的所有的元素都是唯一的

{
    let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0, 'a', 'a',{},{}];
    function distinct(arr) {
        return Array.from(new Set(arr))
    }

    console.log(distinct(arr)) // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]
}

優(yōu)點：該方法可以顧慮到重復的 String凤类、Boolean穗泵、 Number、undefined谜疤、null佃延、NaN，返回的是去重后的新數(shù)組夷磕。
缺點：不能過濾重復的Object履肃。

方法七利用ES6的Map數(shù)據(jù)結(jié)構(gòu)的特性去重

{
    let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0, 'a', 'a',{},{}];
    function distinct(arr) {
        let map = new Map()
        let newArr = []
        for(let i = 0; i < arr.length; i++) {
            if(!map.has(arr[i])) {
                map.set(arr[i])
                newArr.push(arr[i])
            }
        }
        return newArr
    }

    console.log(distinct(arr)) // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]
}

優(yōu)點：該方法可以顧慮到重復的 String、Boolean坐桩、 Number尺棋、undefined、null绵跷、NaN膘螟，返回的是去重后的新數(shù)組。
缺點：不能過濾重復的Object碾局。

方法八利用sort()去重

{
    let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0, 'a', 'a',{},{}];
    function distinct(arr) {
        let sortArr = arr.sort()
        let newArr = []
        for(let i = 1; i < sortArr.length; i++) {
            if(sortArr[i] !== sortArr[i-1]) {
                newArr.push(arr[i])
            }
        }
        return newArr
    }

    console.log(distinct(arr)) // [1, 15, NaN, NaN, "NaN", {…}, {…}, "a", false, null, "true", true, undefined]
}

該方法的缺陷很明顯荆残，針對'true','true',true,true,undefined,undefined, null,null，NaN, NaN,0, 0,{},{} 都不能很好的過濾去重净当，不建議使用該方法去重内斯。

方法就 reduce數(shù)組去重

{
    let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0, 'a', 'a',{},{}];
    function distinct(arr) {
        return arr.sort().reduce((init, current) => {
            if(init.length === 0 || init[init.length-1] !== current) {
                init.push(current);
            }
            return init;
        }, []);
    }

    console.log(distinct(arr)) // [0, 1, 15, NaN, NaN, "NaN", {…}, {…}, "a", false, null, "true", true, undefined]
}

該方法先對數(shù)組進行排序蕴潦，在進行去重過濾，針對不能過濾重復的 NaN和Object俘闯。

擴展

(Set MDN)[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set]

(Map MDN)[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map]

一個朋友最近面試剛好遇到這個問題潭苞，面試官問怎么把NaN和Object去掉，當然使用方法五备徐，利用對象的屬性key唯一的特性去重啦萄传。??

JS數(shù)組去重你知道幾種矾瘾？

JS數(shù)組去重你知道幾種？

方法一 For嵌套for 使用splice去重更改原數(shù)組正向遍歷循環(huán)

方法二 For嵌套for 使用splice去重更改原數(shù)組逆向遍歷循環(huán)

方法三：includes去重返回新數(shù)組

方法四 indexOf去重返回新數(shù)組

方法五利用對象的屬性key唯一的特性去重

方法六利用ES6的Set數(shù)據(jù)結(jié)構(gòu)的特性

方法七利用ES6的Map數(shù)據(jù)結(jié)構(gòu)的特性去重

方法八利用sort()去重

方法就 reduce數(shù)組去重

擴展

JS數(shù)組去重 你知道幾種？

方法一 For嵌套for 使用splice去重更改原數(shù)組 正向遍歷循環(huán)

方法二 For嵌套for 使用splice去重更改原數(shù)組 逆向遍歷循環(huán)

方法三：includes去重 返回新數(shù)組

方法四 indexOf去重 返回新數(shù)組

方法五 利用對象的屬性key唯一的特性去重

方法六 利用ES6的Set數(shù)據(jù)結(jié)構(gòu)的特性

方法七 利用ES6的Map數(shù)據(jù)結(jié)構(gòu)的特性去重

方法八 利用sort()去重

方法就 reduce數(shù)組去重

擴展

JS數(shù)組去重你知道幾種？

方法一 For嵌套for 使用splice去重更改原數(shù)組正向遍歷循環(huán)

方法二 For嵌套for 使用splice去重更改原數(shù)組逆向遍歷循環(huán)

方法三：includes去重返回新數(shù)組

方法四 indexOf去重返回新數(shù)組

方法五利用對象的屬性key唯一的特性去重

方法六利用ES6的Set數(shù)據(jù)結(jié)構(gòu)的特性

方法七利用ES6的Map數(shù)據(jù)結(jié)構(gòu)的特性去重

方法八利用sort()去重