ES6 에서 Set 과 Map 데이터 구조, Map 과 다른 데이터 구조 가 서로 전환 되 는 작업 사례 에 대한 상세 한 설명

본 고 는 ES6 에서 Set 과 Map 데이터 구 조 를 설명 하고 Map 과 다른 데이터 구조 가 서로 전환 되 는 작업 을 말한다.여러분 께 참고 하도록 공유 하 겠 습 니 다. 구체 적 으로 는 다음 과 같 습 니 다.
ES6 의 Set:
ES6 는 새로운 데이터 구조 인 Set 를 제공 합 니 다.그것 은 배열 과 유사 하지만 구성원 의 값 은 모두 유일 하 며 중복 되 는 값 이 없다.
set 자 체 는 set 데이터 구 조 를 만 드 는 구조 함수 입 니 다.
Array 와 Set 의 대비
다 중 값 을 저장 하 는 용기 로 서로 전환 할 수 있 지만 사용 장면 에 있어 서 차이 가 있다.다음 과 같다.
① Array 의 index Of 방법 은 Set 의 has 방법 보다 효율 이 떨 어 집 니 다 ② Set 에는 중복 값 이 포함 되 어 있 지 않 습 니 다 (이 특성 을 이용 하여 한 배열 에 대한 무 게 를 제거 할 수 있 습 니 다) ③ Set 은 delete 방법 으로 특정한 값 을 삭제 하고 Array 는 splice 를 통 해 만 삭제 할 수 있 습 니 다.이들 의 사용 편의 성 은 전자 가 더 좋 습 니 다 ④ Array 의 많은 새로운 방법 map, filter, some, every 등 은 set 에 없 는 것 입 니 다 (그러나 이들 을 통 해 서로 전환 하여 사용 할 수 있 습 니 다)
1. Set 실례 의 조작 방법:

let set = new Set();
set.add(1);
set.add("1");
console.log(set.size); // 2

배열 을 사용 하여 Set 을 초기 화 할 수 있 으 며, Set 구조 기 는 이 값 을 중복 되 지 않 게 사용 할 수 있 습 니 다.

let set = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
console.log(set.size); // 5

add (value): 어떤 값 을 추가 하고 set 구조 자체 has (value) 를 되 돌려 줍 니 다. 불 값 을 되 돌려 줍 니 다. 이 값 이 set 의 구성원 인지 여 부 를 표시 합 니 다.

let set = new Set();
set.add(1);
set.add("1");
console.log(set.has(1)); // true
console.log(set.has(6)); // false

delete (value): 어떤 값 을 삭제 하고 불 값 을 되 돌려 줍 니 다. clear (value) 성공 여 부 를 표시 합 니 다. 모든 구성원 을 삭제 하고 값 을 되 돌려 주지 않 았 습 니 다.

let set = new Set();
set.add(1);
set.add("1");
console.log(set.has(1)); // true
set.delete(1);
console.log(set.has(5)); // false
console.log(set.size); // 1
set.clear();
console.log(set.size); // 0

2. 반복 동작 설정
keys (): 키 이름 을 되 돌려 주 는 스 트 리밍 기 values (): 건 값 이 맞 는 스 트 리밍 기 entries (): 키 값 이 맞 는 스 트 리밍 기 foreach () 를 되 돌려 줍 니 다. 각 구성원

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"]

forEach()

let set = new Set([1, 2]);
set.forEach(function(value, key, ownerSet) {
  console.log(key + "： " + value);
});
//   
// 1 ：1
// 2： 2

3. ES6 배열 이 무 거 워 집 니 다.

let arr = [1, 2, 2, 3];
let set = new Set(arr);
let newArr = Array.from(set);
console.log(newArr); // [1, 2, 3]

집합 전환 Array 배열 설정

let set = new Set([1, 2, 3, 3, 4]);
let arr = Array.from(set) //  [1,2,3,4]

4. WeakSet
WeakSet 구 조 는 Set 와 유사 합 니 다. Set 와 두 가지 차이 가 있 습 니 다.
① weakset 의 구성원 은 대상 일 뿐 다른 유형의 값 일 수 없다.② weakSet 대상 은 모두 약 한 인용 이다.다른 대상 이 이 대상 을 더 이상 인용 하지 않 으 면 쓰레기 수 거 메커니즘 은 이 대상 이 차지 하 는 메모 리 를 자동 으로 회수 하기 때문에 WeakSet 는 옮 겨 다 닐 수 없습니다.
Weak Set 구 조 는 다음 과 같은 세 가지 방법 이 있 습 니 다.
WeakSet. prototype. add (value): WeakSet 인 스 턴 스 에 새 멤버 를 추가 합 니 다.WeakSet. prototype. delete (value): WeakSet 인 스 턴 스 의 지정 한 구성원 을 삭제 합 니 다.Weak Set. prototype. has (value): 하나의 불 값 을 되 돌려 줍 니 다. 어떤 값 이 Weak Set 인 스 턴 스 에 있 는 지 여 부 를 표시 합 니 다.
WeakSet 의 한 용 도 는 DOM 노드 를 저장 하 는 것 입 니 다. 이 노드 가 문서 에서 지 워 질 때 메모리 유출 을 걱정 하지 않 아 도 됩 니 다.
ES6 지도:
1. ES6 의 Map 의미 와 기본 용법
JavaScript 의 대상 (Object) 은 본질 적 으로 키 값 이 맞 는 집합 (Hash 구조) 이지 만 전통 적 으로 문자열 을 키 로 만 사용 할 수 있 습 니 다.이것 은 그것 의 사용 에 매우 큰 제한 을 가 져 왔 다.
ES6 는 맵 데이터 구 조 를 제공 합 니 다.이것 은 대상 과 유사 하고 키 값 이 맞 는 집합 이지 만 '키' 의 범 위 는 문자열 에 국한 되 지 않 으 며 각종 유형의 값 (대상 포함) 을 키 로 사용 할 수 있다.즉, Object 구 조 는 '문자열 - 값' 의 대응 을 제공 하고 Map 구 조 는 '값 - 값' 의 대응 을 제공 하 며 더욱 완선 한 Hash 구조 실현 이다.

const m = new Map();
const o = {p: 'Hello World'};
m.set(o, 'content')
m.get(o) // "content"
m.has(o) // true
m.delete(o) // true
m.has(o) // false

위의 코드 는 Map 구조의 set 방법 을 사용 하여 대상 o 를 m 의 키 로 한 다음 get 방법 으로 이 키 를 읽 고 delete 방법 으로 이 키 를 삭제 합 니 다.
실례 적 인 속성 과 조작 방법 술부
2. Map 구조의 인 스 턴 스 는 다음 과 같은 속성 과 조작 방법 이 있 습 니 다.
1. size 속성
size 속성 은 맵 구조의 구성원 총 수 를 되 돌려 줍 니 다.

const map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size // 2

2.set(key, value)
set 방법 은 키 이름 key 에 대응 하 는 키 값 을 value 로 설정 하고 전체 맵 구 조 를 되 돌려 줍 니 다.키 가 값 이 있 으 면 키 값 이 업 데 이 트 됩 니 다. 그렇지 않 으 면 이 키 를 새로 생 성 합 니 다.

const m = new Map();
m.set('edition', 6)    //      
m.set(262, 'standard')   //     
m.set(undefined, 'nah')  //    undefined

set 방법 은 현재 맵 대상 을 되 돌려 주기 때문에 체인 으로 쓸 수 있 습 니 다.

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

3.get(key)
get 방법 은 key 에 대응 하 는 키 값 을 읽 습 니 다. key 를 찾 지 못 하면 undefined 로 돌아 갑 니 다.

const m = new Map();
const hello = function() {console.log('hello');};
m.set(hello, 'Hello ES6!') //     
m.get(hello) // Hello ES6!

4.has(key)
has 방법 은 현재 맵 대상 에 키 가 있 는 지 여 부 를 나타 내 는 불 값 을 되 돌려 줍 니 다.

const m = new Map();
m.set('edition', 6);
m.set(262, 'standard');
m.set(undefined, 'nah');
m.has('edition')   // true
m.has('years')    // false
m.has(262)      // true
m.has(undefined)   // true

5.delete(key)
delete 방법 은 키 를 삭제 하고 트 루 로 돌아 갑 니 다.삭제 에 실패 하면 false 로 돌아 갑 니 다.

const m = new Map();
m.set(undefined, 'nah');
m.has(undefined)   // true
m.delete(undefined)
m.has(undefined)    // false

6.clear()
clear 방법 은 모든 구성원 을 삭제 하고 값 을 되 돌려 주지 않 습 니 다.

let map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size // 2
map.clear()
map.size // 0

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"

4. WeakMap
WeakMap 구 조 는 Map 구조 와 유사 하 며 키 쌍 을 만 드 는 집합 이기 도 합 니 다.

// WeakMap      set       
const wm1 = new WeakMap();
const key = {foo: 1};
wm1.set(key, 2);
wm1.get(key) // 2
// WeakMap          ，
//          
const k1 = [1, 2, 3];
const k2 = [4, 5, 6];
const wm2 = new WeakMap([[k1, 'foo'], [k2, 'bar']]);
wm2.get(k2) // "bar"

WeakMap 과 Map 의 차 이 는 두 가지 가 있 습 니 다.
우선, WeakMap 은 대상 만 키 이름 (null 제외) 으로 받 아들 이 고, 다른 종류의 값 은 키 이름 으로 받 아들 이지 않 습 니 다.

const map = new WeakMap();
map.set(1, 2)
// TypeError: 1 is not an object!
map.set(Symbol(), 2)
// TypeError: Invalid value used as weak map key
map.set(null, 2)
// TypeError: Invalid value used as weak map key

위 코드 에 서 는 수치 1 과 Symbol 값 을 WeakMap 의 키 이름 으로 사용 하면 오류 가 발생 합 니 다.그 다음으로 WeakMap 의 키 이름 이 가리 키 는 대상 은 쓰레기 회수 메커니즘 에 포함 되 지 않 습 니 다.
WeakMap 의 디자인 목적 은 때때로 우 리 는 특정한 대상 에 데 이 터 를 저장 하고 싶 지만 이 대상 에 대한 인용 이 형성 된다 는 것 이다.아래 의 예 를 보십시오.

const e1 = document.getElementById('foo');
const e2 = document.getElementById('bar');
const arr = [
 [e1, 'foo   '],
 [e2, 'bar   '],
];

위의 코드 에서 e1 과 e2 는 두 개의 대상 입 니 다. 우 리 는 arr 배열 을 통 해 이 두 대상 에 대해 문자 설명 을 추가 합 니 다.이것 은 arr 가 e1 과 e2 에 대한 인용 을 형성 했다.이 두 대상 이 더 이상 필요 하지 않 으 면 이 인용 을 수 동 으로 삭제 해 야 합 니 다. 그렇지 않 으 면 쓰레기 회수 체 제 는 e1 과 e2 가 사용 하 는 메모 리 를 방출 하지 않 습 니 다.

//     e1   e2    
//         
arr [0] = null;
arr [1] = null;

5. Map 과 다른 데이터 구조의 상호 전환
1. Map 에서 배열 로 전환:
맵 을 배열 로 바 꾸 는 가장 편리 한 방법 은 확장 연산 자 (...) 를 사용 하 는 것 입 니 다.

const myMap = new Map()
 .set(true, 7)
 .set({foo: 3}, ['abc']);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

2. 배열 을 맵 으로 전환:
맵 구조 함수 에 배열 을 전송 하면 맵 으로 전환 할 수 있 습 니 다.

new Map([
 [true, 7],
 [{foo: 3}, ['abc']]
])
// Map {
//  true => 7,
//  Object {foo: 3} => ['abc']
// }

3. 맵 을 대상 으로 전환:
모든 맵 의 키 가 문자열 이 라면 대상 으로 바 꿀 수 있 습 니 다.

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 }

4. 대상 이 맵 으로 전환:

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}

5. Map 에서 JSON 으로 전환:
맵 을 JSON 으로 전환 하려 면 두 가지 상황 을 구분 해 야 한다.맵 의 키 이름 이 모두 문자열 인 경우 대상 JSON 으로 전환 하 는 것 을 선택 할 수 있 습 니 다.

function strMapToJson(strMap) {
 return JSON.stringify(strMapToObj(strMap));
}
let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'

또 다른 경 우 는 맵 의 키 이름 에 비 문자열 이 있 습 니 다. 이 때 배열 JSON 으로 전환 하 는 것 을 선택 할 수 있 습 니 다.

function mapToArrayJson(map) {
 return JSON.stringify([...map]);
}
let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'

6. JSON 이 맵 으로 전환:
JSON 이 Map 으로 바 뀌 면 모든 키 이름 이 문자열 입 니 다.

function jsonToStrMap(jsonStr) {
 return objToStrMap(JSON.parse(jsonStr));
}
jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}

그러나 JSON 전체 가 하나의 배열 이 고 각 배열 의 구성원 자체 가 두 명의 구성원 이 있 는 배열 이라는 특수 한 상황 이 있다.이 때 는 일일이 대응 해 맵 으로 전환 할 수 있다.이 는 종종 배열 이 JSON 으로 바 뀌 는 역작 동 이다.

function jsonToMap(jsonStr) {
 return new Map(JSON.parse(jsonStr));
}
jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}

자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,, 및자 바스 크 립 트 오류 와 디 버 깅 기술 총화
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.