분류 javascript

JavaScript에서 Set() 및 Map() 탐색

컨텐츠 정보

  • 조회 195 (작성일 )

본문

자바 스크립트 ES6 사양에서 소개 된 두 가지 새로운 구조에 대해 살펴 보겠습니다.


* Set * - Set 개체를 사용하면 모든 유형의 고유 한 값을 저장할 수 있습니다.

* Map * - Map 객체를 사용하면 키 - 값 쌍을 저장하고 키의 원래 삽입 순서를 기억할 수 있습니다.


이러한 새로운 구조의 목적은 특정 사용 사례에서 데이터를 구조화하고 액세스하는 보다 쉽고 효율적인 방법을 제공하는 것입니다. 이 기사에서는 Sets 및 Maps의 작동 방식을 살펴보고 수행 할 수 있는 작업을 살펴 ​​봅니다.


Sets


MDN 문서는 Set 객체를 다음과 같이 설명합니다.


가치관. 삽입 순서에서 집합의 요소를 반복 할 수 있습니다. Set의 값은 한 번만 발생할 수 있습니다. 그것은 Sets 컬렉션에서 고유합니다. 


JavaScript Set 객체는 수학적 세트와 비슷하게 동작합니다. 고유 값의 추가를 허용하고 프로토 타입에 유용한 메소드를 제공합니다. 이러한 메소드에는 Set에있는 항목의 추가, 제거 및 반복이 포함됩니다.


Array vs Set 


set과 같은 배열은 항목에 추가, 제거 및 반복 작업을 허용하는 데이터 구조입니다. 그러나 array는 중복 값을 추가 할 수 있다는 의미에서 집합과 다르며 연산은 상대적으로 느립니다.


배열을 통한 검색은 O(n)의 선형 시간 복잡도를 가지며, 배열의 중간에 요소를 삽입하는 것과 같습니다. 즉, 배열의 항목을 검색하고 삽입하는 데 걸리는 시간은 배열의 크기가 커질수록 커집니다.


JavaScript의 푸시 및 팝 배열 메서드는 실행 시간이 O(1)입니다. 즉, 이러한 연산은 배열 크기의 크기에 관계없이 일정한 실행 시간을 갖습니다. 그러나 새로운 연속 된 메모리 위치가 새로 형성된 배열에 할당 될 때 복사 비용이 발생하기 때문에 실제적으로 푸시 연산은 O(n)입니다.


반대로 Set에 대한 모든 삽입, 삭제 및 검색 작업에는 실행 시간이 O(1) 만 있습니다.


Set 만들기 


세트를 만들어 보겠습니다.


const set = new Set();

console.log(set); // Set {}

Set 초기화


세트를 초기화하기 위해, 값의 배열을 Set 생성자에 전달할 수 있습니다. 그러면 다음 값으로 Set가 생성됩니다.


const confectioneries = new Set(['oreo', 'marshmallow','oreo', 'kitkat', 'gingerbread']);

console.log(confectioneries); // result: Set { 'oreo', 'marshmallow', 'kitkat', 'gingerbread' }

위의 스니펫에서는 중복 값 "oreo"가 Set에서 자동으로 제거되고 유일한 값만 반환됩니다.


항목 추가 


add() 메소드를 사용하여 Set에 항목을 추가 할 수 있습니다. 이 메서드는 Set 객체에 새 값을 추가하고 Set을 반환합니다. Set 객체에 중복 항목을 추가하려고 시도하면 오류가 반환 되지 않고 항목이 추가되지 않습니다.


예제를 살펴 보겠습니다.


const confectioneries = new Set(['oreo', 'marshmallow', 'kitkat', 'oreo','gingerbread']);

confectioneries.add('donut');

console.log(confectioneries); //_ log result: Set { 'oreo', 'marshmallow', 'kitkat', 'gingerbread', 'donut' } _

confectioneries.add('kitkat');

console.log(confectioneries); //_ log result: Set { 'oreo', 'marshmallow', 'kitkat', 'gingerbread', 'donut' } _

항목 삭제하기 


세트를 사용하면 다음 명령 중 하나를 사용하여 항목을 삭제할 수 있습니다.


  • delete() 
  • clear()

delete() 메서드를 사용하려면 삭제할 값이 메서드에 전달됩니다. 이 메서드는 삭제가 성공하면 부울 값 true를 반환하고 그렇지 않으면 false를 반환합니다. clear() 메서드를 사용하여 Set 객체의 모든 요소를 ​​삭제할 수 있습니다.


이 예제에서 두 가지 방법을 시도해 보겠습니다.


confectioneries.delete('kitkat');

console.log(confectioneries); //_ log result: Set { 'oreo', 'marshmallow', 'gingerbread', 'donut' }_

confectioneries.clear();

console.log(confectioneries); // log result: Set {}

세트의 크기 


Set 프로토 타입의 size 속성을 사용하여 Set의 크기를 가져올 수 있습니다. 이것은 Arrays의 length 속성과 비슷합니다.


const confectioneries = new Set(['oreo', 'marshmallow', 'kitkat', 'oreo','gingerbread']);

console.log(confectioneries.size); // log result: 5

항목 검색 


Set에 특정 항목이 있는지를 알아야 할 수도 있습니다. 이 작업은 has() 메서드를 사용하여 수행 할 수 있습니다. has() 메서드는 항목이 Set 객체에 있으면 true를 반환하고 그렇지 않으면 false를 반환합니다.


console.log(confectioneries.has('marshmallow')); // log result: true

세트의 항목 반환 


values​​() 메서드를 사용하여 동일한 삽입 순서로 Set 객체의 항목을 반환 할 수 있습니다. 이 메소드는 새로운 setIterator 객체를 리턴합니다. 집합의 항목을 반환하는 비슷한 방법은 keys() 메서드입니다.


console.log(confectioneries.values()); // _log result: _[_Set Iterator] { 'oreo', 'marshmallow', 'kitkat', 'gingerbread', 'donut' }_

console.log(confectioneries.keys()); //_ log result: _[_Set Iterator] { 'oreo', 'marshmallow', 'kitkat', 'gingerbread', 'donut' }_

setIterator 객체는 Iterator 및 Iterator 프로토콜을 구현하므로 Iterator 객체입니다. Iterable 프로토콜은 루프 구조를 사용하여 일련의 값을 반복하는 방법을 지정합니다. 또한 next() 메서드를 사용하여 값을 반복 할 수 있습니다. setIterator 객체에서 next()를 호출하면 반복의 다음 값을 가져오고 Set의 모든 값이 반복 될 때까지 false를 반환합니다.


let iterator = confectioneries.values();

console.log( iterator.next()); // _{ value: 'oreo', done: false } 
_
console.log( iterator.next()); // _{ value: 'marshmallow', done: false }
_
console.log( iterator.next()); //_ { value: 'kitkat', done: false }
_
console.log( iterator.next()); //_ { value: 'gingerbread', done: false }
_
console.log( iterator.next()); //_ { value: 'donut', done: false }
_
console.log( iterator.next()); // _{ value: undefined, done: true }_

Sets는 Iterable 프로토콜을 구현하므로 ... for ... for와 같은 루프 구문을 아래와 같이 사용할 수 있습니다.



for (let confectionery of confectioneries) {
  console.log(confectionery);
}

/_ _console.log() result 
oreo
marshmallow
kitkat
gingerbread
donut 
__/