JavaScript 에서 ES6 에 추 가 된 Set 와 Map 구조 및 Array. from 방법 에 대해 알 아 보 겠 습 니 다.

1、Set

ES6 는 새로운 데이터 구조 Set 을 제공 했다.그것 이지 만 구성원 의 값 은 모두 이 고 중복 되 는 값 이 없다.

Set 자 체 는 하나의 로 Set 데이터 구 조 를 생 성 하 는 데 사용 된다.

은 배열 을 받 아들 이 고 new 방식 으로 예화 하여 사용한다.

Set 기 구 를 만 들 때 내용 을 즉시 설정 할 수 있 고 Set 은 배열 을 매개 변수 로 받 아들 여야 합 니 다.

자주 사용 하 는 속성 과 방법 은 다음 과 같다.

size 속성: 이 데이터 구조 에서 데 이 터 를 가 져 오 는 데이터 개수 add () 방법: 이 데이터 구조 에 추가 데이터 constructor: 구조 함수, 기본 값 은 set 함수 delete () 방법: 이 데이터 구조 에서 지정 한 데이터 clear () 방법 을 삭제 합 니 다. 이 데이터 구조 에서 모든 데이터 has () 방법: 데이터 구 조 를 조회 합 니 다.데이터 foreach () 방법 이 있 습 니까? Set 데이터 구 조 를 옮 겨 다 니 는 데 사 용 됩 니 다. ：Set (...)， 。
예 1: 아래 코드 는 add 를 통 해 set 구조 에 구성원 을 가입 한 결과 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

예 2: 확장 연산 자 와 set 구 조 를 결합 하면 배열 의 중복 구성원 을 제거 할 수 있 습 니 다.

let arr = [1, 2, 3, 3, 2, 1];
let unique = [...new Set(arr)];
// [1, 2, 3]

그래서 우 리 는 Set 의 이 속성 을 이용 하여 간단 한 배열 로 다시 포장 할 수 있다.

function norepeat(arr){
     
    var s = new Set(arr);
    return [...s];
}
var a = norepeat([4,5,6,7,8,6,5,4,3,2,1]);
console.log(a);  // [4, 5, 6, 7, 8, 3, 2, 1]

예 3: set 함 수 는 하나의 배열 (dom 의 nodelist 대상 가 져 오기) 을 매개 변수 로 받 아들 여 초기 화 하 는 동시에 배열 의 무 거 운 특성 도 사용 할 수 있 습 니 다.

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

const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5
// ---------------------------------------------------

const set = new Set(document.querySelectorAll('div'));
set.size //    div   

예 4: Set 에 값 을 넣 을 때 유형 전환 이 일어나 지 않 기 때문에 1 과 1 은 서로 다른 값 입 니 다.Set 내부 에서 두 값 이 다른 지 여 부 를 판단 할 때 사용 하 는 알고리즘 을 'Same - value - zero equality' 라 고 하 는데 이것 은 정확 한 연산 자 (= = = =) 와 유사 하 며 주요 한 차이 점 은 NaN 이 자신 과 같 지 않 고 정확 한 연산 자 는 NaN 이 자신 과 같 지 않다 고 여 긴 다.

let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set {NaN}

function norepeat(arr){
     
    var s = new Set(arr);
    return [...s];
}
var a = norepeat([4,5,6,7,8,"7",6,5,4,3,2,1]);
console.log(a);  // [4, 5, 6, 7, 8, "7", 3, 2, 1]

예 5: 동시에 우 리 는 Array. from 방법 이 Set 구 조 를 배열 로 바 꿀 수 있다 는 것 도 알 고 있다.(Array. from 방법 은 아래 에 도 소개 되 어 있 습 니 다)

const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);

예 6: set 구조의 인 스 턴 스 는 기본적으로 옮 겨 다 닐 수 있 습 니 다.

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

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

예 7: set 구조의 인 스 턴 스 는 배열 과 마찬가지 로 foreach 방법 도 있 습 니 다. 모든 구성원 에 게 특정한 조작 을 수행 하고 값 을 되 돌려 주지 않 습 니 다.그러나 set 의 foreach 방법의 매개 변 수 는 처리 함수 입 니 다.이 함수 의 매개 변 수 는 배열 의 foreach 와 일치 하 며, 키 값, 키 이름, 집합 자체 (상례 에서 이 매개 변 수 를 생략 하 였 습 니 다) 입 니 다.여기 서 주의해 야 할 것 은 Set 구조의 키 이름 은 키 값 (둘 은 같은 값) 이기 때문에 첫 번 째 매개 변 수 는 두 번 째 매개 변수의 값 과 영원히 같 습 니 다.

set = new Set([6, 8, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value))
// 6 : 6
// 8 : 8
// 9 : 9

2、Map

JavaScript 의 대상 (Object) 은 본질 적 으로 키 값 이 맞 는 집합 (Hash 구조) 이지 만 전통 적 으로 문자열 을 키 로 만 사용 할 수 있 습 니 다.이것 은 그것 의 사용 에 매우 큰 것 을 가 져 왔 다 .

ES6 는 Map 데이터 구 조 를 제공 했다.이것 은 대상 , 키 의 범위 문자열 과 유사 하 며, 각종 유형의 값 (대상 포함) 을 키 로 사용 할 수 있다.

즉, Object 구 조 는 '문자열 - 값' 의 대응 을 제 공 했 고 Map 구 조 는 “ — ” 의 대응 을 제 공 했 으 며 더욱 완 선 된 Hash 구조 실현 이다. “ ” ，Map Object 。

도 이렇게 이해 할 수 있다. Map 은 배열 을 받 아들 이 고 은 2 차원 배열 이 며 2 차원 배열 은 두 개의 데이터 만 있 을 수 있 고 은 여러 개 있 으 며 해석 할 수 있다.

2 차원 배열 의 은 key 로 해석 되 었 고 2 차원 배열 의 은 value 로 해석 되 었 다.

Map 구조의 인 스 턴 스 는 다음 과 같은 속성 과 조작 방법 이 있 습 니 다.
size 속성: 이 데이터 구조 에서 데 이 터 를 가 져 오 는 데이터 개수 set () 방법: 이 데이터 구조 에 데이터 get () 방법 을 추가 합 니 다. 이 데이터 구조 에서 데 이 터 를 가 져 오 는 delete () 방법: 이 데이터 구조 에서 지정 한 데이터 clear () 방법 을 삭제 합 니 다. 이 데이터 구조 에서 모든 데이터 has () 방법: 데이터 구조 에 데이터 foreach () 가 있 는 지 조회 합 니 다.방법: 맵 데이터 구 조 를 옮 겨 다 니 는 데 사용 합 니 다.
(1) size size 속성 은 Map 구조의 구성원 총 수 를 되 돌려 줍 니 다.

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 Map ， 。

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

맵 을 옮 겨 다 니 기: 특히 주의해 야 할 것 은 맵 의 옮 겨 다 니 는 순 서 는 삽입 순서 입 니 다. 다음 코드 와 같 습 니 다.

const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],]);
  for (let [key, value] of map) {
     
  console.log(key, value);}
// "F" "no"
// "T" "yes"

3、Array.from
Array. from 방법 은 두 가지 대상 을 진정한 배열 로 바 꾸 는 데 사 용 됩 니 다. 배열 과 유사 한 대상 (array - like object) 과 옮 겨 다 닐 수 있 는 대상 (iterable) (ES6 에 추 가 된 데이터 구조 Set 과 Map) 입 니 다.
(1) 예 를 들 어 ~ ~ 다음은 배열 과 유사 한 대상 입 니 다. Array. from 을 보고 진정한 배열 로 바 꿉 니 다.

let arrayLike = {
     
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3};

let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

주의: 우리 의 실제 응용 에서 흔히 볼 수 있 는 유사 한 배열 의 대상 은 DOM 작업 이 되 돌아 오 는 NodeList 집합 과 함수 내부 의 arguments 대상 입 니 다.Array. from 은 그것들 을 진정한 배열 로 바 꿀 수 있 습 니 다.
(2) ES6 는 변수 와 함 수 를 직접 기록 하여 대상 의 속성 과 방법 으로 할 수 있 습 니 다.이런 글 씨 는 더욱 간결 하기 때문에 아래 의 코드 를 볼 수 있다.

const foo = 'bar';
const baz = {
     foo};
baz // {foo: "bar"}
    //       ：
const baz = {
     foo: foo};

(3) 속성 약자 외 에 방법 도 간략하게 쓸 수 있 습 니 다. 다음 코드:

const o = {
     
  method() {
     
    return "Hello!";
  }
};
//    
const o = {
     
  method: function() {
     
    return "Hello!";
  }
};

(4) Array. from 에서 화살표 함수 사용:

Array.from([1, 2, 3], x => x + x);
// [2, 4, 6]

// -----------------------------------

Array.from({
     length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]

오류 가 있 으 시 면 지적 해 주 셔 서 감사합니다.