es6-Set與Map

se5中的set與map

在est5中開發者使用對象屬性來模擬。set多用於檢查鍵的存在,map多用於提取數據。es6

{
    let set = Object.create(null)
    set.foo = true;
    //檢查屬性是否存在
    if (set.foo) {
        //其餘操做
    }

    let map = Object.create(null);
    map.foo = '一個值';
    let val = map.foo;

    console.log('map-->:', val); //map-->:一個值'
}

在簡單狀況下將對象做爲map和set來使用都是可行的,可是一旦接觸到對象屬性的侷限性,此方式就會遇到更多的麻煩。數組

{
    let map1 = Object.create(null),
        key1 = {},
        key2 = {};

    map1[key1] = 'foo';
    console.log('key2-->:', map1[key2]);

    let map2 = Object.create(null);
    map2.count = 1;
    //是想檢查count的存在,仍是非零值?
    if (map2.count) {
        //...
    }
}

map1[key1]和map1[key2]引用了同一個值。因爲對象屬性只能是string,又由於對象默認的string表達形式是'[object object]'。致使key1和key2被轉換爲同一個字符串。map2中count的用法存在歧義。該if語句內的代碼都會被執行由於1被隱式轉換爲true。然而count的值爲0則會被隱式轉爲false。在大型應用中這類問題都是難以確認,難以調試的。這也是新增set和map類型的緣由。set類型是一種無重複值的有序列表。set容許對它包含的數進行快速訪問,從而更有效的追蹤各類離散值。調試

建立set類型

使用new set()來建立。調用add()方法向集合中添加元素,訪問集合的size屬性獲取集合數量。code

{
    let set = new Set();

    set.add(5);
    set.add('5');
    console.log('typeof set-->:', typeof set)
    console.log('set-->:', set)
    console.log('size-->:', set.size)
}

set不會使用強制類型轉換來判斷值是否重複,這意味着set能夠同時包含number(5)和string(5),惟一的例外-0和+0在set中被斷定是相等的,若是向set集合中添加多個對象,則他們之間彼此獨立。對象

{
    let set = new Set();
    let key1 = {};
    let key2 = {};

    set.add(key1);
    set.add(key2);
    console.log('typeof setobject-->:', typeof set)
    console.log('setobject-->:', set)
    console.log('size-->:', set.size)
}

因爲key1和key2不會被轉換爲字符串,因此在set內部是不一樣的項,若是他們被轉化爲字符串,那麼都會等於"[object object]",若是屢次調用add()並傳入相同的值做爲參數。那麼後續的調用會被忽略。索引

{
    let set = new Set();

    set.add(5);
    set.add('5');
    set.add(5);
    console.log('typeof set-->:', typeof set)
    console.log('set-->:', set)
    console.log('size-->:', set.size)
}

第二次重複傳入numner(5)並不會被添加到set集合中,那麼size的屬性值仍是爲2。也可使用數組來初始化set集合。集合一樣會過濾重複的值。開發

{
    let set = new Set([1, 2, 3, 4, 5, 5, 5, 5, 5, 5]);
    console.log('size-->:', set.size);
}

經過has()能夠檢測set集合中是否存在某個值。字符串

{
    let set = new Set();

    set.add(5);
    set.add('6');
    console.log('set has-->:', set.has(6));
    console.log('set has-->:', set.has('6'))
    console.log('set has-->:', set.has(5))
    console.log('set has-->:', set.has('5'))
}

set集合中相同的number和sting並不會返回true。調用delete()方法能夠移除set中的某一個值,調用clear()方法能夠移除全部值。get

{
    let set = new Set();

    set.add(5);
    set.add('6');
    console.log('set has-->:', set.has('6'));
    set.delete('6')
    console.log('set has-->:', set.has('6'))
    console.log('size-->:', set.size)
    set.clear();
    console.log('size-->:', set.size)
}

set集合簡單易用,能夠有效的跟蹤多個獨立有序的值。string

set的forEach

set集合和數組的forEach相似,運行機制也比較相似。forEach()方法的回調接收3個參數:
1.集合中索引的位置。
2.被遍歷參數的值
3.集合自己

{
    let set = new Set(['a', 'b', 'c', 'd', 'e']);
    set.forEach((k, val, owner) => {
        console.log('set-forEach-k-->:', k);
        console.log('set-forEach-val-->:', val);
        console.log('set-forEach-owner-->:', owner);
    })
}

將set轉換爲數組

將數組轉換爲set集合的過程很簡單,須要給set集合傳入數組便可。將集合轉回數組,只須要使用展開運算符便可。

{
    let arr = [1, 2, 3, 4, 5, 5, 5, 5, 5, 5];
    let set = new Set(arr);
    let newArr = [...set];
    //ps: 代碼行數太多能夠壓縮下
    let newArr2 = [...new Set([1, 2, 3, 4, 5, 5, 5, 5, 5, 5])];
    console.log(newArr, newArr2)
}

建立map類型

map類型是鍵值對的有序列表,鍵和值均可以是任意類型,能夠調用set()方法傳遞一個鍵和一個關聯的值,來給馬屁添加項;此後使用鍵名來調用get()方法獲取對應的值。

{
    let map = new Map();
    map.set('title', 'es6');
    map.set('year', 2016);

    console.log('map-title-->', map.get('title'))
    console.log('map-year-->', map.get('year'))
}

map的方法

map和set共享了幾個方法。如下的方法和屬性map和set上都存在:
1.forEach(val, k, owner): 遍歷map
2.has(key):判斷指定的鍵值是否存在
3.delete(key):移除map中鍵以及對應的值
4.clear():移除map中全部的鍵和值
5.size:指明包含多個鍵值對。

{
    let map = new Map();
    map.set('title', 'es6');
    map.set('year', 2016);

    map.forEach((val, k, owner) => {
        console.log('map-forEach-k-->:', k);
        console.log('map-forEach-val-->:', val);
        console.log('map-forEach-owner-->:', owner);
    })
    console.log('map-size-->:', map.size);

    console.log('map-has-->:', map.has('title'));

    map.delete('title');
    console.log('map-->:', map);

    map.clear();
    console.log('map-->:', map);
}

小結

es6正式將set與map引入。在此以前每每使用對象來模擬,可是因爲與對象屬性有關的限制,這麼作會常常遇到問題。這裏並無弱引用weakset和weakmap,有這方面須要的能夠本身去查閱

相關文章
相關標籤/搜索