【ES6入門09】：Set和Map數據結構

Set

1.add()方法和size屬性

{
    let list = new Set();
    // add()方法向Set數據添加元素
    list.add(5);
    list.add(7);
    // size屬性返回數據的長度
    console.log(list.size); // 2

    let arr = [1, 2, 3, 4, 5];
    let set = new Set(arr);
    console.log(set, set.size); // Set(5) {1, 2, 3, 4, 5} 5
}

2.Set的元素必須是惟一的

{
    let list = new Set();
    list.add(1);
    list.add(2);
    list.add(1); // 重複元素不會添加進去
    console.log(list); // Set(2) {1, 2}

    // 數組去重
    let arr = [1, 2, 3, 1, '2'];
    let list2 = [...new Set(arr)];
    console.log(list2); // [1, 2, 3, "2"]
}

3.has(),delete(),clear()

{
    let arr = ['add', 'delete', 'clear', 'has'];
    let list = new Set(arr);
    console.log(list.has('add')); // true
    list.delete('add');
    console.log(list); // Set(3) {"delete", "clear", "has"}
    list.clear();
    console.log(list); // Set(0) {}
}

4.Set的遍歷

{
    let arr = ['add', 'delete', 'clear', 'has'];
    let list = new Set(arr);
    // Set結構的數據，key和value是同一個值
    for (let value of list) {
        console.log('value', value); // 'add' 'delete' 'clear' 'has'
    }
    for (let key of list.keys()) {
        console.log('keys', key); // 'add' 'delete' 'clear' 'has'
    }
    for (let value of list.values()) {
        console.log('values', value); // 'add' 'delete' 'clear' 'has'
    }
    for (let [key, value] of list.entries()) {
        console.log('entries', key, value);
    }
    list.forEach(function (item) {
        console.log(item); // 'add' 'delete' 'clear' 'has'
    });
}

WeakSet

WeakSet和Set的不一樣點：

1. WeakSet的元素只能是對象，不能是數值、字符串、布爾值...
2. WeakSet中的對象都是弱引用，垃圾回收機制不考慮WeakSet對該對象的引用。WeakSet裏面的引用，都不計入垃圾回收機制，因此不會引起內存泄漏的問題。因此，WeakSet適合臨時存放一組對象，以及存放跟對象綁定的信息。只要這些對象在外部消失，它在WeakSet裏面的引用就會自動消失。

{
    let weakList = new WeakSet();
    let arg = {name: 'hhh'};
    weakList.add(arg); // WeakSet的元素只能是對象
    // weakList.add(2); // Uncaught TypeError: Invalid value used in weak set
    console.log(weakList); // WeakSet {{name: 'hhh'}}
    // 注意：WeakSet沒有size屬性，沒有clear方法，不能遍歷。其餘的用法和Set相同
}

Map

1.set()方法和get()方法

{
    let map = new Map();
    let arr = ['123'];
    // Map的key能夠是任意數據類型
    map.set(arr, 456); // map.set(key, value)，這裏用數組做爲key,添加一個值爲456的元素
    console.log(map.get(arr)); // 456
}

2.Map的另外一種定義方式

{
    let map = new Map([['a', 123], ['b', 456]]); // 接收一個數組做爲參數，數組的每一項爲：[key,value]
    console.log(map); // Map(2) {"a" => 123, "b" => 456}
    console.log(map.size); // 2
    console.log(map.has('b')); // true
    map.delete('a');
    console.log(map); // Map(1) {"b" => 456}
    map.clear();
    console.log(map); // Map(0) {}
}

WeakMap

WeakMap和Map的不一樣點：

1. WeakMap的key只能是對象
2. WeakMap的鍵名所引用的對象都是弱引用，垃圾回收機制不考慮對此對象的引用。（注意，WeakMap弱引用的只是鍵名，而不是鍵值。鍵值依然是正常引用。）基本上，若是你要往對象上添加數據，又不想幹擾垃圾回收機制，就能夠使用WeakMap。

{
    let weakmap = new WeakMap();
    let o = {};
    weakmap.set(o, 123);
    console.log(weakmap.get(o)); // 123
    // 注意：WeakMap沒有size屬性，沒有clear方法，不能遍歷。相似於Set與WeakSet的區別
}

---

Set,Map和Array,Object的對比

Map與Array對比

{
    // 數據結構橫向對比，增 查 改 刪
    let map = new Map();
    let array = [];

    // 增
    map.set('t', 1);
    array.push({'t': 1});
    console.log(map, array); // {"t" => 1} [{'t': 1}]

    // 查
    let map_exist = map.has('t');
    let array_exist = array.find(item => item.t);
    console.log(map_exist, array_exist); // true {t: 1}

    // 改
    map.set('t', 2);
    array.forEach(item => item.t ? item.t = 2 : '');
    console.log(map, array); // {"t" => 2} [{'t': 2}]

    // 刪
    map.delete('t');
    let index = array.findIndex(item => item.t);
    array.splice(index, 1);
    console.log(map, array); // {} []
}

Set與Array對比

{
    let set = new Set();
    let array = [];
    let item = {'t': 1};

    // 增
    set.add(item);
    array.push(item);
    console.log(set, array); // {{'t': 1}} [{'t': 1}]

    // 查
    let set_exist = set.has(item);
    let array_exist = array.find(item => item.t);
    console.log(set_exist, array_exist); // true {t: 1}

    // 改
    set.forEach(item => item.t ? item.t = 2 : '');
    array.forEach(item => item.t ? item.t = 2 : '');
    console.log(set, array); // {{'t': 2}} [{'t': 2}]

    // 刪
    set.forEach(item => item.t ? set.delete(item) : '');
    let index = array.findIndex(item => item.t);
    array.splice(index, 1);
    console.log(set, array); // {} []
}

Map,Set與Object對比

{
    let item = {t: 1};
    let map = new Map();
    let set = new Set();
    let obj = {};

    // 增
    map.set('t', 1);
    set.add(item);
    obj['t'] = 1;
    console.log(obj, map, set); // {t: 1} Map(1) {"t" => 1} Set(1) {{t: 1}}

    // 查
    console.log(map.has('t'), set.has(item), 't' in obj); // true true true

    // 改
    map.set('t', 2);
    item.t = 2;
    obj['t'] = 2;
    console.log(obj, map, set); // {t: 2} Map(1) {"t" => 2} Set(1) {{t: 2}}

    // 刪
    map.delete('t');
    set.delete(item);
    delete obj['t'];
    console.log(obj, map, set); // {} Map(0) {} Set(0) {}
}

建議：

1. 優先使用map，不使用array，特別是複雜的數據結構
2. 考慮數據惟一性，使用set，放棄array和obj