[독서 노트] ES6 제1 1 장 Set 과 Map 데이터 구조

제1 1 장 Set 과 Map 데이터 구조
참고 자료: < ES6 표준 입문 제3 판 >
목차
제1 1 장 Set 과 Map 데이터 구조
11.1 세트 데이터 구조
11.1.1 기본 용법
11.1.2 Set 실례 의 속성 과 방법
11.1.3 반복 작업
11.2 지도 구조
11.2.1 기본 용법
11.2.2 Map 인 스 턴 스 의 속성 과 방법
11.2.3 지도 스 트 리밍 방법
11.2.4 맵 과 다른 데이터 형식의 변환
11.1 세트 데이터 구조
11.1.1 기본 용법
ES6 는 새로운 데이터 구조 Set 을 제공 합 니 다.그것 은 배열 과 유사 하지만 구성원 의 값 은 모두 유일 하 며 중복 되 는 값 이 없다.수학 중의 집합 에 해당 한다.Set 자체 가 구조 함수 로 Set 데이터 구 조 를 생 성 하 는 데 사용 된다.
1. Set 구 조 는 중복 되 는 값 을 추가 하지 않 습 니 다.

const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4

배열 과 달리 set 인 스 턴 스 는 add () 방법 으로 멤버 를 추가 합 니 다. 멤버 를 추가 할 때 Set 구조 에 이 값 이 존재 하면 이 멤버 는 추가 되 지 않 습 니 다.
2. Set 함 수 는 하나의 배열 을 매개 변수 로 초기 화 할 수 있 습 니 다.

const set = new Set([1, 2, 3, 4, 4, 4, 4, 4]);

console.log([...set])
// [1, 2, 3, 4]

console.log(set.size)
// 4

set 데이터 구조 에 접근 하 는 변수의 크기 는 set. size 로 만 접근 할 수 있 습 니 다. set. length 결 과 는 undefined 입 니 다.
3. Set 데이터 구조 에서 의 유형 판단
Set 데이터 구조의 특성 상 배열 중복 멤버 를 제거 하 는 데 편리 하 다.

var array = [1, 2, 3, 3, 4, 4, 5, 5]
var newarray = [...new Set(array)]
console.log(newarray)
// [ 1, 2, 3, 4, 5 ]

여기 서 Set 가 두 값 이 같은 지 아 닌 지 를 어떻게 판단 하 는 지 에 대해 논의 할 필요 가 있다.
Set 는 추 가 된 값 에 대해 유형 변환 이 일어나 지 않 으 며 5 와 '5' 는 서로 다른 값 입 니 다.

const set = new Set()
set.add(5)
set.add('5')
console.log(set.size) // 2

Set 내부 에서 두 값 의 동일 여 부 를 판단 하 는 방법 은 정확 한 연산 자 와 유사 합 니 다 ( === ),다른 것 은 Set 구조 에서 NaN 은 그 자체 와 같 고, 정확 한 동등한 연산 자 는 NaN 이 그 자체 와 같 지 않다 고 생각한다.

console.log(NaN === NaN)
// false 

const set = new Set()
set.add(NaN)
set.add(NaN)
console.log(set.size)
// size = 1,     set      NaN   ，       

또 대상 이 비어 있 든 없 든 두 대상 은 항상 같 지 않다.

const set = new Set()
set.add({})
set.add({})
console.log(set.size) // 2

11.1.2 Set 실례 의 속성 과 방법
set 구조의 인 스 턴 스 는 다음 과 같은 속성 이 있 습 니 다.

Set.prototype.constructor: 구조 함수, 기본 값 은 Set 함수 입 니 다.

Set.prototype.size: Set 인 스 턴 스 의 구성원 총 수 를 되 돌려 줍 니 다.

set 구 조 는 다음 과 같은 방법 이 있 습 니 다.

add(value): 특정한 값 을 추가 하고 Set 구조 자 체 를 되 돌려 줍 니 다.

delete(value): 특정한 값 을 삭제 하고 불 값 을 되 돌려 삭제 에 성 공 했 는 지 여 부 를 표시 합 니 다.

has(value): 불 값 을 되 돌려 주 고 이 값 이 Set 의 구성원 인지 아 닌 지 를 나타 낸다.

clear(): 모든 구성원 을 제거 하고 반환 값 이 없습니다

11.1.3 반복 작업
set 구조의 인 스 턴 스 는 네 가지 옮 겨 다 니 는 방법 이 있 습 니 다. 구성원 을 옮 겨 다 니 는 데 사용 할 수 있 습 니 다.

keys(): 키 이름 을 되 돌려 주 는 달력

values(): 키 값 을 되 돌려 주 는 달력

entries(): 키 값 이 맞 는 스 트 리밍 기 를 되 돌려 줍 니 다

forEach(): 리 셋 함 수 를 사용 하여 각 구성원 을 옮 겨 다 니 기

set 구조 에 키 이름 이 없 기 때문에 키 값 (또는 키 이름과 키 값 이 같은 값) 만 있 기 때문에 keys 방법 과 values 방법의 행동 이 완전히 일치 합 니 다.

let set = new Set(['red', 'green', 'blue']);

for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

Set 구조의 인 스 턴 스 는 기본적으로 옮 겨 다 닐 수 있 습 니 다. values 방법 을 생략 하고 for...of 순환 으로 Set 를 옮 겨 다 닐 수 있 습 니 다.

let set = new Set(['red', 'green', 'blue']);

for (let x of set) {
  console.log(x);
}
// red
// green
// blue

11.2 지도 구조
11.2.1 기본 용법
ES6 는 맵 데이터 구 조 를 제공 합 니 다. 대상 과 유사 하고 키 값 이 맞 는 집합 입 니 다. 그러나 '키' 의 범 위 는 문자열 에 국한 되 지 않 고 다양한 유형의 값 (대상 포함) 을 키 로 사용 할 수 있 습 니 다.

const map = new Map();

const object = { 
	word: 'Hello World'
};

map.set(object, 'content')

console.log(map.get(object)) // "content"

console.log(map.has(object)) // true

map.delete(object) // true

console.log(map.has(object)) // false

위의 예 는 대상 을 맵 의 키 로 하고 문자열 'content' 를 대상 키 에 대응 하 는 값 으로 하 는 것 입 니 다. 맵 은 이 키 쌍 을 정상적으로 읽 거나 삭제 할 수 있 습 니 다.
Map 구 조 는 set 방법 으로 구성원 을 추가 할 수 있 을 뿐만 아니 라 하나의 배열 을 매개 변수 로 받 아들 일 수 있 습 니 다. 이 배열 의 구성원 은 키 값 이 맞 음 을 나타 내 는 배열 입 니 다.

const items = [
	  ['name1', '  '],
	  ['name2', '  ']
];

const map = new Map(items);

console.log(map.size)  // 2

console.log(map.has('name1')) // true

console.log(map.get('name1')) //   

같은 키 에 여러 번 값 을 부여 하면 뒤의 값 은 앞의 값 을 덮어 씁 니 다.

const map = new Map();

map
.set(1, 'aaa')
.set(1, 'bbb');

map.get(1) // "bbb"

알 수 없 는 값 을 읽 고 undefined 로 돌아 갑 니 다.

new Map().get('abc') 
// undefined

주의 점:
1. 같은 대상 에 대한 인용 만 Map 구 조 는 같은 키 로 간주한다.

const map = new Map();

let b = ['b']

map.set(['a'], 555)
map.get(['a']) // undefined

map.set(b, 666)
map.get(b) // 666

2. 만약 에 Map 의 키 가 간단 한 유형의 값 (숫자, 문자열, 불 값) 이 라면 두 개의 값 이 엄 격 히 같 으 면 Map 은 이 를 하나의 키 로 간주한다.

let map = new Map();

map.set(-0, 123);
map.get(+0) // 123

map.set(true, 1);
map.set('true', 2);
map.get(true) // 1

map.set(undefined, 3);
map.get(undefined) // 3

map.set(null, 4);
map.get(null) // 4


map.set(NaN, 123);
map.get(NaN) // 123

상기 코드 에 대한 설명 에서 + 0 은 - 0 과 같 으 며 맵 은 NaN 을 같은 키 로 보고 null 과 undefined 도 다른 키 로 간주한다.
11.2.2 Map 인 스 턴 스 의 속성 과 방법
(1) size 속성: size 속성 은 Map 구조의 구성원 총 수 를 되 돌려 줍 니 다.
(2) set (key, value): set 방법 은 키 이름 key 에 대응 하 는 키 값 을 value 으로 설정 한 후 전체 맵 구 조 를 되 돌려 줍 니 다. key 값 이 있 으 면 키 값 이 업데이트 되 고 그렇지 않 으 면 새로 생 성 됩 니 다.set 방법 은 현재 Map 대상 을 되 돌려 주기 때문에 체인 식 표기 법 을 사용 할 수 있다.

let map = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

(3) get (key): get 방법 으로 key 대응 하 는 키 값 을 읽 고 key 를 찾 지 못 하면 되 돌려 줍 니 다 undefined.
(4) has (key): has 방법 은 불 값 을 되 돌려 주 며, 어떤 키 가 현재 맵 대상 에 있 는 지 여 부 를 표시 합 니 다.
(5) delete (key): delete 방법 으로 키 를 삭제 하고 되 돌려 줍 니 다 true. 삭제 에 실패 하면 되 돌려 줍 니 다 false.
(6) clear (): clear 방법 으로 모든 구성원 을 제거 하고 값 을 되 돌려 주지 않 습 니 다.
11.2.3 지도 스 트 리밍 방법
Map 구조 원생 은 세 개의 스 트 리밍 기 생 성 함수 와 스 트 리밍 방법 을 제공 합 니 다.

keys(): 키 이름 의 달력 을 되 돌려 줍 니 다.

values(): 키 값 을 되 돌려 주 는 달력 입 니 다.

entries(): 모든 멤버 의 달력 을 되 돌려 줍 니 다.

forEach(): 맵 을 옮 겨 다 니 는 모든 멤버.

특히 주의해 야 할 것 은 맵 의 옮 겨 다 니 는 순 서 는 삽입 순서 다.

const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

//   
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

//      map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

11.2.4 맵 과 다른 데이터 형식의 변환
1. 맵 과 배열 의 상호 전환
Map 구 조 를 배열 구조 로 전환 하 는 비교적 빠 른 방법 은 확장 연산 자 (...) 를 결합 하 는 것 이다.

const map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

console.log([...map])
// [ [ 1, 'one' ], [ 2, 'two' ], [ 3, 'three' ] ]

데이터 구 조 를 Map 으로 바 꾸 어 직접 배열 을 매개 변수 로 Map 구조 함수 에 전달 하면 됩 니 다. 상기 코드 중의 배열 과 같 습 니 다.
2. 맵 과 대상 의 상호 전환
모든 맵 의 키 가 문자열 이 라면 대상 으로 손상 없 이 전환 할 수 있 습 니 다.

function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k,v] of strMap) {
    obj[k] = v;
  }
  return obj;
}

const myMap = new Map()
  .set('yes', true)
  .set('no', false);
strMapToObj(myMap)
// { yes: true, no: false }

문자열 이 아 닌 키 이름 이 있 으 면 이 키 이름 은 문자열 로 바 뀌 어 대상 의 키 이름 으로 바 뀝 니 다.
대상 이 맵 으로 바 뀌 면 본질 적 으로 대상 의 모든 속성 을 옮 겨 다 니 며 set 방법 으로 맵 구조 에 구성원 을 추가 합 니 다.

function objToStrMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}

objToStrMap({yes: true, no: false})
// Map {"yes" => true, "no" => false}