Comparative introduction to Set and Map in es6 (with code)

This article brings you a comparative introduction to Set and Map in es6 (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Set

1. add() method and size attribute

{
    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 elements must Is the only one

{
    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); // Set(4) {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 traversal

{
    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

The difference between WeakSet and Set:

1. The elements of WeakSet can only be objects, not numerical values, strings, or Boolean values. ...

2. The objects in WeakSet are all weak references, and the garbage collection mechanism does not consider WeakSet's reference to the object. The references in WeakSet are not counted in the garbage collection mechanism, so they will not cause memory leaks. Therefore, WeakSet is suitable for temporarily storing a group of objects and storing information bound to the objects. As long as these objects disappear externally, their references in WeakSet will automatically disappear.

{
    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() method and get() method

{
    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 Another way to define

{
    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

The difference between WeakMap and Map:

1. The key of WeakMap can only be an object

2. The objects referenced by the key names of WeakMap are weak references, and the garbage collection mechanism does not consider references to this object. (Note that WeakMap only weakly references the key name, not the key value. The key value is still a normal reference.) Basically, if you want to add data to the object and do not want to interfere with the garbage collection mechanism, you can use WeakMap.

{
    let weakmap = new WeakMap();
    let o = {};
    weakmap.set(o, 123);
    console.log(weakmap.get(o)); // 123
    // 注意：WeakMap没有size属性，没有clear方法，不能遍历。类似于Set与WeakSet的区别
}

Comparison of Set, Map and Array, Object

Comparison of Map and 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); // {} []
}

Comparison of Set and 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); // {} []
}

Comparison of Map, Set and 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) {}
}

Recommendation:

1. Use map first instead of array, especially for complex data structures

2. Consider data uniqueness, use set, abandon array and obj

The above is the detailed content of Comparative introduction to Set and Map in es6 (with code). For more information, please follow other related articles on the PHP Chinese website!