JavaScript ES6 키 모음

소개

데이터 구조를 사용하여 데이터를 저장, 구성, 정렬 및 처리할 수 있습니다. 결정 구조를 사용하는 방법과 시기를 이해해야 합니다.

JavaScript에는 es6 버전에 도입된 몇 가지 내장 구조가 있습니다. 비록 이러한 데이터 구조가 존재하는 시간이 있지만 많은 개발자가 이를 사용하는 방법에 대해 의구심을 가지고 있지만, 오늘 저는 이에 대한 정보를 명확히 하려고 합니다.

지도

Map은 객체이고 공통 객체로 작동합니다. 이들 간의 주요 차이점은 map을 사용하여 내부 함수로 작업하여 삽입, 삭제 또는 보다 단순한 형태로 하나의 요소를 가져올 수 있기 때문입니다.

또한 Map은 값이 다른 고유 키만 허용합니다. 따라서 다음과 같은 맵을 생성하면

const map = new Map();

map.set('first', 1);

console.log(map.get('first')); // 1

map.set('first', 100);

console.log(map.get('first')); // 100

console.log(map.size); // 1

값이 변경되었지만 Map에 저장된 키가 하나만 있음을 알 수 있습니다.

Map은 반복 가능하므로 for..of 또는 for each를 사용하여 구조를 반복하고 거기에서 작업을 수행할 수 있습니다.

const map = new Map();

map.set('first', 1);
map.set('second', 2);

for(let item of map) {
  console.log(item);
}

for(let [key, value] of map.entries()) {
  console.log(key, value);
}

for(let key of map.keys()) {
  console.log(key);
}

for(let value of map.values()) {
  console.log(value);
}

map.forEach((item, key) => {
  console.log(key, item);
});

for...of 각 반복은 이와 같은 배열을 반환하고 [key, value] 각각에 forEach 세 개의 매개변수가 있습니다. 처음에는 값, 키, 마지막으로 맵 자체입니다.

왜/언제 지도를 사용합니까?

객체에 대한 정보의 제어를 유지해야 하고 키를 고유하게 유지해야 할 때 Map 구조를 사용하고 싶습니다. 또한 Map은 사용법이 간단하므로 사용에 익숙해지기 쉽습니다.

위크맵

WeakMap은 키가 약하게 참조되는 키/값 모음입니다.

키는 약하게 참조되기 때문에 열거할 수 없으므로 Map처럼 반복할 수 없고 키를 얻을 수 없습니다.

WeakMaps는 다음과 같이 사용할 수 있습니다.

const weakMap = new WeakMap();

const value1 = {};
const value2 = function(){};
const value3 = "I'm the third value";
const value4 = { foo: 'foo' };
const value5 = { key: 'foo' };

weakMap.set(value1, value2);

console.log(weakMap.has(value3)); // false

console.log(weakMap.get(value1)); // Returns the value based on key, in this case function() {}

weakMap.delete(value1);

weakMap.set(value5, value4);

console.log(weakMap.get(value5)); // Using a object that already in memory, we can access the position

weakMap.set({ myKey: 'myKey' }, {value: 1});

console.log(weakMap.get({ myKey: 'myKey' })); // Will return undefined, because the object on function call is one and the object on the set function is another

참고: WeakMaps에서는 키와 같은 기본 값을 사용할 수 없습니다.

왜/언제 WeakMap을 사용합니까?

WeakMaps의 일부 사용 사례here에는 주제에 대한 몇 가지 논의가 있습니다. 여기에 데이터 구조에 대한 몇 가지 테스트와 이해를 넣을 것입니다.

일부 개인 데이터를 처리해야 하고 해당 데이터를 반복하지 않고 특정 속성만 가져오는 경우 WeakMap이 좋은 선택이 될 수 있습니다.

세트

집합은 모든 유형의 고유 값을 저장할 수 있는 컬렉션입니다. 세트를 사용하면 객체 참조도 새 값처럼 추가될 수 있다는 점을 기억하면서 중복 데이터를 피할 수 있습니다.

다음과 같이 세트를 사용할 수 있습니다.

const set = new Set();
set.add(1); // set [1]
set.add(5); // set [1, 5]
set.add(5); // 5 already was been setted, so set [1, 5]

const object = { foo: 'foo', bar: 'bar' };
set.add(object); 
set.add({ foo: 'foo', bar: 'bar' }); // This object will be added because is another reference

Set에 값이 삽입되었는지 확인할 수 있습니다.

const set = new Set();

set.add(1);

set.has(1); // true

set.has(5); // false

또한 Set의 크기를 확인할 수 있습니다.

const set = new Set();

set.add(1);
set.add(5);
set.add(10);

console.log(set.size) // 3

set.delete(10); // Removes 10 from our set

console.log(set.size); // 2 

Maps와 마찬가지로 Set도 반복할 수 있습니다.

const set = new Set();

set.add(1);
set.add("text");
set.add({foo: 'bar', bar: 'foo'});

for(let item of set) {
  console.log(item); 
}

// Keys will have the inserted values
for (let item of set.keys()) {
  console.log(item)
}

/**
 * key and values are the same here
 */
for (let [key, value] of set.entries()) {
  console.log(key);
  console.log(value);
}

스프레드 연산자를 사용하여 Set의 복사본을 만들고 배열로 사용할 수 있습니다.

const set = new Set();

set.add(1);
set.add("text");
set.add({foo: 'bar', bar: 'foo'});

const setToArray = [...set];

setToArray.forEach(item => {
  console.log(item);
});

왜/언제 세트를 사용합니까?

구조에서 키/값을 사용할 필요 없이 고유한 값을 유지해야 할 때 세트를 사용하고 싶습니다. 그 세트는 데이터의 일관성을 유지하기 때문에 최선의 선택입니다.

참고: 개체 참조 예제에 대해 생각하는 것이 유효합니다. 동일한 개체를 집합에 전달하더라도 참조가 다르기 때문에 저장되기 때문입니다.

WeakSet

WeakSet 개체를 사용하면 약하게 보유된 개체를 저장할 수 있습니다. Set 컬렉션과 마찬가지로 WeakSet은 각 개체 발생을 한 번만 허용합니다.

WeakSet과 Set의 차이점은 무엇입니까? WeakSet은 개체만 허용하므로 Set과 같은 값을 포함할 수 없습니다. 또 다른 차이점은 WeakMap과 같습니다. WeakSet에는 보유하고 있는 개체에 대한 약한 참조가 있습니다. 개체 저장소에 대한 다른 참조가 없으면 이 개체는 가비지 수집될 수 있습니다. 마지막으로 WeekMap 컬렉션은 열거할 수 없습니다.

documentation에는 해당 구조의 사용에 대한 흥미로운 예가 있습니다.

WeakSet 사용의 간단한 예:

const weakSet = new WeakSet();
const foo = {};
const bar = {};

weakSet.add(foo);
weakSet.add(bar);

console.log(weakSet.has(foo)); // true 
console.log(weakSet.has(bar)); // true

weakSet.delete(foo); 

console.log(weakSet.has(foo)); // false    
console.log(weakSet.has(bar)); // true
console.log(weakSet.has({})); // false because is another reference    

유용한 링크:

키 동등성은 sameValueZero 알고리즘

을 기반으로 합니다.

Keyed collections

Standard built-in objects