ES6 에서 Set 와 Map 데이터 구조 및 Symbol

35354 단어 es6/es7
ES6 에서 Set 와 Map 데이터 구조 및 Symbol
  • 1. Set
  • 1. Set 인 스 턴 스 의 속성 과 방법
  • 2. 옮 겨 다 니 기
  • 3. 옮 겨 다 니 는 응용
  • 2. WeakSet
  • 3. 지도
  • 1. Map 인 스 턴 스 의 속성 과 조작 방법
  • 2. 옮 겨 다 니 는 방법
  • 4. WeakMap
  • 5. Symbol
  • 2. 속성 명 인 Symbol

  • 세트
    set 자 체 는 set 데이터 구 조 를 만 드 는 구조 함수 입 니 다.
    const s=new Set() ;
    

    set 함 수 는 하나의 배열 을 매개 변수 로 받 아들 여 초기 화 할 수 있 습 니 다.
    const set = new Set([1, 2344]) ;
    

    문자열 의 중복 문 자 를 제거 하 는 데 사용 할 수 있 습 니 다.
    [...new Set('ababbc')].join('')
    // "abc"
    

    1. Set 인 스 턴 스 의 속성 과 방법
    
    add(value):      ,  Set     
    	         s1.add(value).add(value2)
    delete(value):      ,       ,        ,        
    has(value):        ,      Set   
    clear():       ,     
    size set    ,    ()
    

    2. 반복 작업
    Set          ,   forEach  ,             ,
         。
    Set.prototype.keys():        
    Set.prototype.values():        
    Set.prototype.entries():         
    Set.prototype.forEach():            
       Set       ,    (             ),  keys   values         。
    

    3. 옮 겨 다 니 는 응용
    확장 연산 자 (...) 내 부 는 for... of 순환 을 사용 하기 때문에 set 구조 에 도 사용 할 수 있 습 니 다.
    let set = new Set(['red', 'green', 'blue']);
    let arr = [...set];
    // ['red', 'green', 'blue']
    

    확장 연산 자 와 set 구 조 를 결합 하면 배열 의 중복 구성원 을 제거 할 수 있다.
    let arr = [3, 5, 2, 2, 5, 5];
    let unique = [...new Set(arr)];
    // [3, 5, 2]
    

    그리고 배열 의 map 와 filter 방법 도 set 에 간접 적 으로 사용 할 수 있다.
    let set = new Set([1, 2, 3]);
    set = new Set([...set].map(x => x * 2));
    //   Set  :{2, 4, 6}
    
    let set = new Set([1, 2, 3, 4, 5]);
    set = new Set([...set].filter(x => (x % 2) == 0));
    

    따라서 set 를 사용 하면 집합 (Union), 교 집합 (Intersect), 차 집합 (Difference) 을 쉽게 실현 할 수 있다.
    let a = new Set([1, 2, 3]);
    let b = new Set([4, 3, 2]);
    
    //   
    let union = new Set([...a, ...b]);
    // Set {1, 2, 3, 4}
    
    //   
    let intersect = new Set([...a].filter(x => b.has(x)));
    // set {2, 3}
    
    // (a     b  )  
    let difference = new Set([...a].filter(x => !b.has(x)));
    // Set {1}
    

    옮 겨 다 니 면서 원래 의 Set 구 조 를 동시에 바 꾸 려 면 현재 직접적인 방법 은 없 지만 두 가지 변통 방법 이 있다.하 나 는 원 Set 구 조 를 이용 하여 새로운 구 조 를 매 핑 한 다음 에 원래 의 Set 구조 에 값 을 부여 하 는 것 이다.다른 하 나 는 Array. from 방법 을 이용 하 는 것 이다.
    //    
    let set = new Set([1, 2, 3]);
    set = new Set([...set].map(val => val * 2));
    // set   2, 4, 6
    
    //    
    let set = new Set([1, 2, 3]);
    set = new Set(Array.from(set, val => val * 2));
    // set   2, 4, 6
    

    위의 코드 는 두 가지 방법 을 제공 하여 옮 겨 다 니 는 작업 에서 원래 의 Set 구 조 를 직접 바 꾸 었 다.
    둘째, WeakSet
    WeakSet 구 조 는 Set 와 유사 하 며 중복 되 지 않 는 값 의 집합 이기 도 합 니 다.하지만 세트 와 는 두 가지 차이 가 있다.우선 WeakSet 의 멤버 는 대상 일 뿐 다른 유형의 값 일 수 없다.
    const ws = new WeakSet();
    ws.add(1)
    // TypeError: Invalid value used in weak set
    ws.add(Symbol())
    // TypeError: invalid value used in weak set
    

    위 코드 는 Weak Set 에 수치 와 Symbol 값 을 추가 하려 고 했 으 나 결 과 는 잘못 되 었 습 니 다. Weak Set 는 대상 만 배치 할 수 있 기 때 문 입 니 다.
    그 다음으로 Weak Set 의 대상 은 모두 약 한 인용 이다. 즉, 쓰레기 회수 체 제 는 Weak Set 가 이 대상 에 대한 인용 을 고려 하지 않 는 다. 즉, 다른 대상 이 이 대상 을 인용 하지 않 으 면 쓰레기 회수 체 제 는 이 대상 이 차지 하 는 메모 리 를 자동 으로 회수 하고 이 대상 이 Weak Set 에 존재 하 는 것 을 고려 하지 않 는 다 는 것 이다.
    지도
    구조 함수 로 서 맵 은 하나의 배열 을 매개 변수 로 받 아들 일 수 있 습 니 다.이 배열 의 구성원 은 키 값 이 맞다 는 것 을 나타 내 는 배열 이다.
     var map = new Map([
                [1, '  '],
                [2, '  '],
                [3, '  ']
            ]);
    

    1. Map 인 스 턴 스 의 속성 과 조작 방법
    size         Map        。
    Map.set(key, value)
    	set      key      value,       Map   。
    	  key    ,       ,        。
    		const m = new Map();
    m.set('edition', 6)        //      
    m.set(262, 'standard')     //     
    m.set(undefined, 'nah')    //    undefined
    Map.get(key)
    	get    key     ,     key,  undefined
    Map.has(key)
    	has         ,           Map     。
    Map.delete(key)
    	deletetrue。      ,  false
    clear():

    2. 옮 겨 다 니 는 방법
    Map                       。
    
    Map.prototype.keys():        。
    Map.prototype.values():        。
    Map.prototype.entries():          。
    Map.prototype.forEach():   Map      。
            ,Map            。
    

    Map 구 조 를 배열 구조 로 바 꾸 고 빠 른 방법 은 확장 연산 자 (...) 를 사용 하 는 것 입 니 다.
    const map = new Map([
      [1, 'one'],
      [2, 'two'],
      [3, 'three'],
    ]);
    
    [...map.keys()]
    // [1, 2, 3]
    
    [...map.values()]
    // ['one', 'two', 'three']
    
    [...map.entries()]
    // [[1,'one'], [2, 'two'], [3, 'three']]
    
    [...map]
    // [[1,'one'], [2, 'two'], [3, 'three']]
    

    배열 의 map 방법, filter 방법 을 결합 하여 맵 의 옮 겨 다 니 고 여과 할 수 있 습 니 다 (Map 자체 에 map 와 filter 방법 이 없습니다).
    const map0 = new Map()
      .set(1, 'a')
      .set(2, 'b')
      .set(3, 'c');
    
    const map1 = new Map(
      [...map0].filter(([k, v]) => k < 3)
    );
    //    Map    {1 => 'a', 2 => 'b'}
    
    const map2 = new Map(
      [...map0].map(([k, v]) => [k * 2, '_' + v])
        );
    //    Map    {2 => '_a', 4 => '_b', 6 => '_c'}
    

    4. WeakMap
    	WeakMap   Map    ,            。
    WeakMap Map      。
    	  ,WeakMap         (null  ),             。
    	  ,WeakMap         ,         。
    

    기호
    ES5 의 대상 속성 명 은 모두 문자열 로 속성 명 이 충돌 하기 쉬 우 며 ES6 는 새로운 원본 데이터 형식 Symbol 을 도입 하여 유일한 값 을 표시 합 니 다.이것 은 자 바스 크 립 트 언어의 일곱 번 째 데이터 형식 입 니 다. 여섯 번 째 는 undefined, null, 불 값 (Boolean), 문자열 (String), 수치 (Number), 대상 (Object) 입 니 다.
    Symbol 값 은 Symbol 함 수 를 통 해 생 성 됩 니 다.대상 의 속성 명 은 현재 두 가지 유형 이 있 을 수 있 으 며, 하 나 는 원래 있 던 문자열 이 고, 다른 하 나 는 새로 추 가 된 Symbol 형식 이다.속성 명 이 Symbol 유형 에 속 하 는 것 은 모두 유일무이한 것 으로 다른 속성 명 과 충돌 하지 않 을 것 을 보증 할 수 있 습 니 다.
    let s = Symbol();
    
    typeof s
    // "symbol"
    

    Symbol 성명 의 데 이 터 는 유일 성 을 가지 고 있 습 니 다.
    var s1 = Symbol('blue');
    var s2 = Symbol('blue');
      console.log(s1 == s2); //false
    

    2, 속성 이름 의 Symbol
    모든 Symbol 값 이 같 지 않 기 때문에 Symbol 값 은 식별 자로 사용 할 수 있 고 대상 의 속성 명 에 사용 하면 같은 이름 의 속성 이 나타 나 지 않 음 을 보증 할 수 있 습 니 다.이것 은 한 대상 이 여러 모듈 로 구 성 된 상황 에 매우 유용 하 며, 어떤 키 가 부주의 로 고 쳐 쓰 거나 덮어 쓰 는 것 을 방지 할 수 있다.
    let mySymbol = Symbol();
    
    //      
    let a = {
         };
    a[mySymbol] = 'Hello!';
    
    //      
    let a = {
         
      [mySymbol]: 'Hello!'
    };
    
    //      
    let a = {
         };
    Object.defineProperty(a, mySymbol, {
          value: 'Hello!' });
    
    //            
    a[mySymbol] // "Hello!"
    

    위의 코드 는 괄호 구조 와 Object. defineProperty 를 통 해 대상 의 속성 명 을 Symbol 값 으로 지정 합 니 다.
    Symbol 값 이 대상 속성 명 일 때 점 연산 자 를 사용 할 수 없습니다.
    const mySymbol = Symbol();
    const a = {
         };
    
    a.mySymbol = 'Hello!';
    a[mySymbol] // undefined
    a['mySymbol'] // "Hello!"
    

    위의 코드 에 서 는 점 연산 자 뒤에 항상 문자열 이 있 기 때문에 my Symbol 이 표지 명 으로 가리 키 는 값 을 읽 지 않 습 니 다. 이 로 인해 a 의 속성 명 은 Symbol 값 이 아 닌 문자열 입 니 다.
    마찬가지 로 대상 내부 에서 Symbol 값 으로 속성 을 정의 할 때 Symbol 값 은 괄호 안에 넣 어야 합 니 다.
    let s = Symbol();
    
    let obj = {
         
      [s]: function (arg) {
          ... }
    };
    
    obj[s](123);
    

    위의 코드 에서 s 가 괄호 에 넣 지 않 으 면 이 속성의 키 이름 은 s 가 대표 하 는 Symbol 값 이 아 닌 문자열 s 입 니 다.

    좋은 웹페이지 즐겨찾기