es6의 Set 및 Map 비교 소개(코드 포함)-JS 튜토리얼-php.cn

es6의 Set 및 Map 비교 소개(코드 포함)

不言

풀어 주다： 2018-10-25 15:21:16

앞으로

2921명이 탐색했습니다.

이 기사는 es6(코드 포함)의 Set 및 Map에 대한 비교 소개를 제공합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

Set

1. add() 메서드 및 크기 속성

{
    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.세트 요소는 고유해야 합니다

{
    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.순회 설정

{
    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의 차이점:

# 🎜🎜#

WeakSet의 요소는 숫자 값, 문자열 또는 부울 값이 아닌 객체만 될 수 있습니다...

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

로그인 후 복사

WeakMapWeakMap과 Map의 차이점:

#🎜 🎜#

WeakMap의 키는 객체만 가능합니다

WeakMap의 키 이름으로 참조되는 객체는 모두 약한 참조이며, 가비지 수집 메커니즘 이 개체에 대한 참조는 고려되지 않습니다. (WeakMap은 키 값이 아닌 키 이름만 약하게 참조합니다. 키 값은 여전히 일반 참조입니다.) 기본적으로 객체에 데이터를 추가하고 가비지 수집 메커니즘을 방해하지 않으려면 WeakMap을 사용할 수 있습니다.

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

로그인 후 복사

세트, 맵 및 배열, 객체 비교

{
    // 数据结构横向对比，增 查 改 删
    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); // {} []
}

로그인 후 복사

세트 및 배열 비교

{
    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); // {} []
}

로그인 후 복사

맵, 집합 및 개체 비교

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

로그인 후 복사

제안:

#🎜🎜 # 배열 대신 맵 사용을 선호합니다. 특히 복잡한 데이터 구조