亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JS數(shù)組去重詳情

 更新時(shí)間:2021年11月05日 14:40:43   作者:蜜瓜  
這篇文章主要介紹JS數(shù)組去重,關(guān)于去重實(shí)際應(yīng)用中,最常用的方法就是使用Set,也可以使用第三方庫lodash來處理,下面一起來看看文章是怎么介紹JS數(shù)組去重的

1 測(cè)試用例

// 測(cè)試用例
const a = {};
const b = { c: 1 };
const array = [
  1, 1, "1", "1",
  {}, {}, { c: 1 }, { c: 1},
  a, a, b, b, 
  [], [], [1], [1],
  undefined, undefined,
  null, null,
  NaN, NaN,
];

2 JS 數(shù)組去重4大類型

2.1 元素比較型

此類型通過數(shù)組元素之間進(jìn)行比較來去重

2.1.1 雙層 for 循環(huán)逐一比較(es5常用)

使用雙層for循環(huán)逐一比較數(shù)組元素,用splice方法去除重復(fù)的元素

// 雙層for循環(huán)
function uniq1(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--
            }
        }
    }
    return arr
}

// 去重結(jié)果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN,NaN]

通過對(duì)比去重前后結(jié)果,重復(fù)的NaN沒有去掉,因?yàn)?code>NaN === NaN為false

2.1.2 排序相鄰比較

使用sort()方法對(duì)數(shù)組元素進(jìn)行排序,然后比較相鄰元素,用splice方法去除重復(fù)的元素。

function uni2(arr) {
    arr.sort();
    for (let i = 0; i < arr.length - 1; i++) {
        arr[i] === arr[i + 1] && arr.splice(i + 1, 1) && i--;
    }
    return arr;
}


也可以創(chuàng)建新數(shù)組,將不重復(fù)的元素放入新數(shù)組中

function uniq3(arr) {
    arr = arr.sort()
    const newArr = [arr[0]]
    for (let i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i - 1]) {
            newArr.push(arr[i])
        }
    }
    return newArr
}

// 去重結(jié)果
// [[],[],1,'1',[1],[1],NaN,NaN,{},{},{c:1},{c:1},{},{c:1},null,undefined]

重復(fù)的NaN沒有去掉,因?yàn)?code>NaN === NaN為false
sort默認(rèn)排序順序是將元素轉(zhuǎn)換為字符串,對(duì)象轉(zhuǎn)換為字符串都是[object Object] ,所以sort方法不能對(duì)數(shù)組中的對(duì)象進(jìn)行排序,也就有可能無法去除重復(fù)的對(duì)象,除非重復(fù)的對(duì)象本就相鄰

2.2 查找元素位置型

此類型通過查找元素第一次出現(xiàn)的位置來去重

2.2.1 indexOf

通過indexOf查找當(dāng)前元素第一次出現(xiàn)的位置是否為當(dāng)前位置,若是,則放入新數(shù)組

function uniq4(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (arr.indexOf(arr[i]) === i) {
            res.push(arr[i])
        }
    }
    return res
}

// 去重結(jié)果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null]

同樣,因?yàn)?code>NaN === NaN為false,所以用indexOf查找NaN結(jié)果總是-1,從而在新數(shù)組中不會(huì)有NaN

2.2.2 findIndex

通過findIndex查找當(dāng)前元素第一次出現(xiàn)的位置是否為當(dāng)前位置,若是,則放入新數(shù)組

function uniq5(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (arr.findIndex(item => item === arr[i]) === i) {
            res.push(arr[i])
        }
    }
    return res
}
// 去重結(jié)果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null]


同樣,因?yàn)?code>NaN === NaN為false,所以用findIndex查找NaN結(jié)果總是-1,從而在新數(shù)組中不會(huì)有NaN

2.3 元素是否存在型

此類型通過判斷在新數(shù)組中是否存在當(dāng)前元素來去重

2.3.1 includes

includes方法用來判斷一個(gè)數(shù)組是否包含一個(gè)指定的值

function uniq6(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (!res.includes(arr[i])) {
            res.push(arr[i])
        }
    }
    return res
}
// 去重結(jié)果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN]


includes使用零值相等算法來確定是否找到給定的元素,所以可以判斷NaN是否在新數(shù)組中存在

2.3.2 some

some方法用來測(cè)試數(shù)組中是否至少有1個(gè)元素通過了被提供的函數(shù)測(cè)試

function uniq7(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (!res.some(item => item === arr[i])) {
            res.push(arr[i])
        }
    }
    return res
}
// 去重結(jié)果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN,NaN]


同樣,這里仍舊使用了===來比較元素,因?yàn)?code>NaN === NaN為false,所以新數(shù)組中會(huì)有多個(gè)NaN

2.4 依托數(shù)據(jù)結(jié)構(gòu)特性

此類型通過ES6提供的數(shù)據(jù)結(jié)構(gòu)Map、Set本身不可重復(fù)特性來去重

2.4.1 Map

ES6提供的Map結(jié)構(gòu)可以用各種類型的值(包括對(duì)象)當(dāng)作鍵,且鍵是唯一的

function uniq8(arr) {
    const map = new Map()
    for (let i = 0; i < arr.length; i++) {
        !map.has(arr[i]) && map.set(arr[i], true)
    }
    return [...map.keys()]
}
// 去重結(jié)果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN]


map.has方法對(duì)NaN也有效

2.4.2 Set(ES6 最常用)

Set結(jié)構(gòu)的成員的值都是唯一的,沒有重復(fù)的值。

function uniq9(arr) {
    return [...new Set(arr)]
}

// 去重結(jié)果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN]

3 補(bǔ)充

上面所說的方法可以使用不同的Api進(jìn)行改動(dòng),比如使用splice方法去除數(shù)組元素的地方,我們可以通過filter方法來過濾數(shù)組得到新數(shù)組;

再比如includes的方法中不用for循環(huán)遍歷數(shù)組,通過reduce方法來代替等等。

總之,方法有很多,但是萬變不離其宗

有些去重方法對(duì)NaN無效,因?yàn)?code>NaN === NaN為false,如果有需求,可以使用Object.is(NaN, NaN)true來進(jìn)行修改

實(shí)際應(yīng)用中,最常用的方法就是使用Set,也可以使用第三方庫lodash來處理

到此這篇關(guān)于JS數(shù)組去重詳情的文章就介紹到這了,更多相關(guān)JS數(shù)組去重內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論