快捷導(dǎo)航

JavaScript Set與Map數(shù)據(jù)結(jié)構(gòu)詳細(xì)分析

更新時(shí)間：2022年11月08日 08:34:39 作者：亦世凡華、

大家心里是否產(chǎn)生過這樣的疑問,JS中既然已經(jīng)有對(duì)象這種數(shù)據(jù)結(jié)構(gòu),我們?yōu)槭裁催€要再單獨(dú)去使用Set或者M(jìn)ap呢?下面這篇文章主要給大家介紹了關(guān)于ES6中Set和Map數(shù)據(jù)結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下

Set

ES6提供了新的數(shù)據(jù)結(jié)構(gòu) Set（集合）。它類似于數(shù)組，但成員的值都是唯一的，集合實(shí)現(xiàn)了iterator接口，所以可以使用 [擴(kuò)展運(yùn)算符] 和 [for...of] 進(jìn)行遍歷。

基本使用

添加新的元素

Set函數(shù)可以接受一個(gè)數(shù)組(或者具有iterable接口的其他數(shù)據(jù)結(jié)構(gòu))作為參數(shù)，用來初始化。

<script>
    // 聲明一個(gè) set
    let s = new Set([1,2,2,3,4,4,5]) //Set方法會(huì)自動(dòng)去重
    // 添加新的元素
    console.log(s.add(6));
</script>

刪除元素

<script>
    // 聲明一個(gè) set
    let s = new Set([1,2,2,3,4,4,5]) //Set方法會(huì)自動(dòng)去重
    // 刪除元素
    s.delete(1)
    console.log(s);
</script>

數(shù)組去重

<script>
    let arr = [1,2,2,3,4,4,5,6]
    let result = [...new Set(arr)]
    console.log(result);// [1, 2, 3, 4, 5, 6]
</script>

檢測(cè)

<script>
    // 聲明一個(gè) set
    let s = new Set([1,2,2,3,4,4,5]) //Set方法會(huì)自動(dòng)去重
    // 檢測(cè)
    console.log(s.has(2));//true
</script>

清空

<script>
    // 聲明一個(gè) set
    let s = new Set([1,2,2,3,4,4,5]) //Set方法會(huì)自動(dòng)去重
    // 清空
    console.log(s.clear());//undefined
</script>

遍歷

<script>
    // 聲明一個(gè) set
    let s = new Set([1,2,2,3,4,4,5]) //Set方法會(huì)自動(dòng)去重
    // 遍歷
    for(let v of s){
        console.log(v);//1,2,3,4,5
    }
</script>

交集

<script>
    let arr = [1,2,3,4,4,5,4,3,1,2,6]
    let arr2 = [3,4,5,1,4,7,8]
    // 先去重，避免重復(fù)數(shù)字比較降低效率
    let result = [...new Set(arr)].filter(item=>{
        // 對(duì)arr2進(jìn)行去重
        let newarr2 = new Set(arr2)
        if(newarr2.has(item)){
            return true
        }else{
            return false
        }
    })
    // 簡(jiǎn)寫形式
    // let result = [...new Set(arr)].filter(item=>new Set(arr2).has(item)) 
    console.log(result);//[1, 3, 4, 5]
</script>

并集

<script>
    let arr = [1,2,3,4,4,5,4,3,1,2,6]
    let arr2 = [3,4,5,1,4,7,8]
    let union = [...new Set([...arr,...arr2])]
    console.log(union);
</script>

差集

<script>
    let arr = [1,2,3,4,4,5,4,3,1,2,6]
    let arr2 = [3,4,5,1,4,7,8]
    // 差集是交集的逆運(yùn)算，主體的不同決定結(jié)果的不同
    let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)))
    console.log(diff);//[2, 6]
</script>

遍歷操作

Set數(shù)據(jù)結(jié)構(gòu)提供了四種遍歷方法，用于遍歷成員。

keys()、values()

由于 Set 結(jié)構(gòu)鍵名和鍵值是同一個(gè)值，所以 keys 方法和 values 方法的行為完全一致，都是返回鍵名/值。

<script>
    let set = new Set(['red', 'green', 'blue',1]);
    for (var item of set.keys()) {
        console.log(item);
    }
    for (var item1 of set.values()) {
        console.log(item1);
    }
    console.log(item === item1);//true
</script>

entries()

entries方法返回的結(jié)果包括鍵名和鍵值，所以輸出的數(shù)組，其鍵名和鍵值完全相等。

<script>
    let set = new Set(['red', 'green', 'blue',1]);
    for (var item of set.entries()) {
        console.log(item);
    }
</script>

forEach()

forEach()方法用于對(duì)每個(gè)成員執(zhí)行某種操作，該方法參數(shù)就是一個(gè)處理函數(shù)，該函數(shù)的參數(shù)與數(shù)組的forEach一致。

<script>
    let set = new Set(['red', 'green', 'blue',1]);
    set.forEach((value,key)=>console.log(key +':'+value))
</script>

Map

ES6提供了 Map 數(shù)據(jù)結(jié)構(gòu)，它類似于對(duì)象，也是鍵值對(duì)的集合。但是“鍵”的范圍不限于字符串，各種類型的值(包括對(duì)象)都可以當(dāng)作鍵。Map也實(shí)現(xiàn)了 iterator 接口，所以可以使用 [擴(kuò)展運(yùn)算符] 和 [for...of] 進(jìn)行遍歷。

基本使用

添加元素

<script>
    // 聲明 Map
    let m = new Map()
    // 添加元素
    m.set('world',4)
    m.set('hello',function(){
        console.log('abc');
    })
    let person = {
        name:'張三'
    }
    m.set(person,[5,6,7])
    console.log(m);
</script>

因?yàn)闉镸ap添加了三次元素，所以Map的長(zhǎng)度為3。

刪除元素

<script>
    // 聲明 Map
    let m = new Map()
    let person = function(){
        console.log('hello world');
    }
    m.set(person,'HELLO WPRLD')
    m.set('people',[1,2,3])
    console.log(m);//Map(2)
    // 刪除元素
    m.delete('people')
    console.log(m);//Map(1)
</script>

獲取元素

get方法獲取key對(duì)應(yīng)的鍵值，如果找不到key，返回undefned。

<script>
    // 聲明 Map
    let m = new Map()
    // 獲取元素
    let person = function(){
        console.log('hello world');
    }
    m.set(person,'HELLO WPRLD')
    console.log(m.get(person))//HELLO WPRLD
</script>

檢測(cè)元素

has方法返回一個(gè)布爾值，用來檢測(cè)某個(gè)值是否在當(dāng)前 Map 對(duì)象中。

<script>
    // 聲明 Map
    let m = new Map()
    m.set('a',1)
    m.set(2,'b')
    m.set('c',3)
    // 檢測(cè)鍵名是否存在
    console.log(m.has(1));//false
    console.log(m.has(2));//true
</script>

清除元素

clear方法清除所有元素，沒有返回值。

<script>
    // 聲明 Map
    let m = new Map()
    m.set('a',1)
    m.set(2,'b')
    m.set('c',3)
    // 清除所有
    m.clear()
    console.log(m);//Map(0)
</script>

Map的遍歷操作和上文的Set方法一致，這里不再講解。

到此這篇關(guān)于JavaScript Set與Map數(shù)據(jù)結(jié)構(gòu)詳細(xì)分析的文章就介紹到這了,更多相關(guān)JS Set與Map內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: