컬렉션 (set 과 map)_ES6 노트 8

一。컬렉션의 역할과 특징

컬렉션에는 Set/WeakSet, Map/WeakMap 이 포함되며, hash table 과 유사합니다. 특징은 다음과 같습니다:

객체를 hash table 로 사용할 때의 단점을 회피 (프로토타입 속성을 회피하기 위해, Object.create(null) 를 사용하여 프로토타입이 null 인 빈 객체를 생성해야 할 수 있습니다. 리터럴{}이 아닌, {} === Object.create(Object.prototype) 이기 때문)
사용자 데이터와 내장 메서드의 충돌을 해소하고, 데이터를 속성으로 노출하지 않으며, .key 또는[key] 로 데이터에 액세스할 수 없고, 컬렉션은 프로토타입 체인에서key를 상속하지 않습니다
컬렉션 순회 순서는 삽입 순서와 같습니다 (그리고for...of 등의 이터레이터 관련 새 기능을 활용할 수 있습니다). hash table 의 이론적 순회 순서는 불확정적입니다 (hash 함수에 의존)
has() 메서드를 지원하며, 포함성 검사에 사용되며, indexOf 보다 빠릅니다

二.Set

unique 값의 집합. 문법은 다음과 같습니다:

// 생성, 파라미터 iterable 선택
new Set(iterable)
// 추가, value 는 임의의 타입 가능
Set.prototype.add(value)
// 삭제 | 비우기
Set.prototype.delete(value)|Set.prototype.clear()
// 조회
Set.prototype.has(value)
// 순회, callback(value, value, set)
Set.prototype.forEach(callbackFn[, thisArg])
// 요소 개수 가져오기
Set.prototype.size
// 각종 이터레이터 가져오기, Map 과 호환 위해, Set 에서 keys === values
set.keys(), set.values() 와 set.entries()

특징:

자동 중복 제거, 중복 값은 add 할 수 없지만, 2 개의 속성이 같은 객체는중복되지 않는것으로 간주됩니다
1 줄의 코드로 배열 중복 제거 완료: Array.from(new Set(arr))
사용자 데이터와 내장 메서드의 충돌을 회피하고, 데이터를 속성으로 노출하지 않으며, .key 또는[key] 로 데이터에 액세스할 수 없고, 컬렉션은 프로토타입 체인에서key를 상속하지 않습니다

예시:

var set = new Set('12231');
// 자동 중복 제거
console.log(set);   // Set {"1", "2", "3"}
// 중복 값은 add 할 수 없음
set.add('1');
console.log(set);   // Set {"1", "2", "3"}
set.add(1);
console.log(set);   // Set {"1", "2", "3", 1}
set.add({a: 1});
// 중복 안 됨
set.add({a: 1});
console.log(set);   // Set {"1", "2", "3", 1, Object {a: 1}, Object {a: 1}}

2 개의 속성 값이 완전히 같은 객체는중복되지 않는것으로 간주됩니다 (물론, 2 개의 같은 객체를 가리키는 참조는 중복됩니다). Set 내부의 hash 함수는 재작성을 지원하지 않습니다 (보안 고려), 이 동작을 변경할 수 없습니다

三.Map

키 - 값 쌍의 집합. 문법은 다음과 같습니다:

// 생성, 파라미터 pairs 선택, pairs 는[[key, val], ]2 차원 배열, 기존 Map 등 가능
new Map(pairs)
// 추가 | 수정/삭제/비우기/조회/읽기
map.set(key, val)/map.delete(key)|map.clear()/map.has(key)/map.get(key)
// 순회, callback(value, key, set), 파라미터 순서 주의
map.forEach(callback)
// 요소 개수 가져오기
Map.prototype.size
// 각종 이터레이터 가져오기, 키/값/키 - 값 쌍 순회
map.keys(), map.values() 와 map.entries()

특징: key 는임의의 타입가능, Object 포함 (객체의key 는 String 또는 Symbol 만 가능한 것과 다름)

예시:

var map = new Map([['a', 1], ['b', 2]]);
//!!! 파라미터 순서 주의
map.forEach((val, key, arr) => {
    console.log(`val = ${val}, key = ${key}`);
});
// log print:
// val = 1, key = a
// val = 2, key = b
// val = objA, key = [object Object]

주의: map.forEach 파라미터 순서는 callback(value, key, set) 이며, Array.forEach 와 유사한 callback(key, value, set) 이 아닙니다

四.WeakSet/WeakMap

기능이 제한된 약참조 컬렉션. Set/Map 의 강참조로 인한 메모리 누수 문제를 회피합니다. 예를 들어set.add(domNode) 후domNode 가remove 되어도, gc 는domNode 객체를 회수할 수 없습니다. set 이 강참조이므로, set.delete(domNode) 를 호출한 후에만 메모리를 회수할 수 있습니다

특징:

WeakSet 은 new, add, delete, has 만 지원
WeakMap 은 new, get, set, delete, has 만 지원
WeakSet 의 값과 WeakMap 의 키는필수로 Object 여야 합니다
이터레이션을 지원하지 않음
gc 는 사용 중인 Weak 컬렉션 내의 무효 요소를 회수할 수 있습니다

P.S.제 3 조는 조금 이상합니다 (아마 gc 고려 때문일 것입니다)

总之, 메모리 누수 가능성이 있는 시나리오 (예를 들어 빈번한 DOM 조작, 복잡한 애니메이션 등) 에서는, 약컬렉션 채택을 고려하십시오

五。요약

1 줄의 코드로 배열 중복 제거를 완료하는 것은, 다소 사람을 설레게 합니다

데이터 구조를 손으로 만들던 날은 점차 과거가 되어가고, 底层建築은 完善되어 가고 있습니다

###참고 자료

《ES6 in Depth》: InfoQ 中文站에서 제공하는 무료 전자책

一。컬렉션의 역할과 특징

二.Set

三.Map

四.WeakSet/WeakMap

五。요약

댓글

댓글 작성