Vergleichende Einführung in Set und Map in es6 (mit Code)

Dieser Artikel bietet Ihnen eine vergleichende Einführung in Set und Map in es6 (mit Code). Ich hoffe, er wird Ihnen als Referenz dienen.

Set

1. add()-Methode und Größenattribut

{
    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 muss Ist der Einzige

{
    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

Der Unterschied zwischen WeakSet und Set:

1. Die Elemente von WeakSet können nur Objekte sein, keine numerischen Werte, Zeichenfolgen usw Boolesche Werte. ...

2. Die Objekte in WeakSet sind alle schwache Referenzen, und der Garbage-Collection-Mechanismus berücksichtigt nicht die Referenz von WeakSet auf das Objekt. Referenzen in WeakSet werden im Garbage-Collection-Mechanismus nicht gezählt, sodass sie keine Speicherverluste verursachen. Daher eignet sich WeakSet zum temporären Speichern einer Gruppe von Objekten und zum Speichern von an die Objekte gebundenen Informationen. Solange diese Objekte extern verschwinden, verschwinden ihre Referenzen in WeakSet automatisch.

{
    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()-Methode und get()-Methode

{
    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 Eine andere Möglichkeit,

{
    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

Der Unterschied zwischen WeakMap und Map zu definieren:

1. Der Schlüssel von WeakMap kann nur ein Objekt sein

2. Die Objekte, auf die durch die Schlüsselnamen von WeakMap verwiesen wird, sind schwache Referenzen, und der Garbage-Collection-Mechanismus berücksichtigt keine Verweise auf dieses Objekt. (Beachten Sie, dass WeakMap nur schwach auf den Schlüsselnamen und nicht auf den Schlüsselwert verweist. Der Schlüsselwert ist immer noch eine normale Referenz.) Wenn Sie dem Objekt Daten hinzufügen und den Garbage-Collection-Mechanismus nicht beeinträchtigen möchten, können Sie dies grundsätzlich tun kann WeakMap verwenden.

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

Vergleich von Menge, Karte und Array, Objekt

Vergleich von Karte und 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); // {} []
}

Vergleich von Menge und 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); // {} []
}

Vergleich von Karte, Menge und Objekt

{
    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) {}
}

Empfehlung:

1. Verwenden Sie lieber Karte statt Array, insbesondere bei komplexen Datenstrukturen

2. Berücksichtigen Sie die Einzigartigkeit der Daten, verwenden Sie den Satz, verlassen Sie das Array und das Objekt

Das obige ist der detaillierte Inhalt vonVergleichende Einführung in Set und Map in es6 (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!