ES6 의 길 -- Symbol

제 개인 사이트 에 오신 것 을 환영 합 니 다.
1. 개술
간단 한 소개
Symbol 은 특수 하고 가 변 적 이지 않 은 데이터 형식 으로 대상 속성의 식별 자로 사용 할 수 있 으 며 유일한 값 을 표시 합 니 다.Symbol 대상 은 symbol primitive data type 의 암시 적 대상 포장 기 입 니 다.이것 은 자 바스 크 립 트 언어의 일곱 번 째 데이터 형식 으로 앞의 6 가 지 는 Undefined, Null, Boolean, String, Number, Object 이다.
문법
Symbol([description])
Parameters
description: 선택 할 문자열 입 니 다.디 버 깅 에 사용 할 수 있 으 나 기호 자체 의 기호 에 접근 하지 않 는 설명 입 니 다.파 라 메 터 를 추가 하지 않 으 면 콘 솔 에 인쇄 된 것 은 모두 Symbol 로 구분 하기에 불리 합 니 다.
demo

var s1 = Symbol('symbol1');
s1 //Symbol(symbol1); 

Symbol 함수 가 되 돌아 오 는 값 은 모두 유일무이한 것 이기 때문에 Symbol 함수 가 되 돌아 오 는 값 은 모두 같 지 않 습 니 다.

//   
var s1 = Symbol();
var s2 = Symbol();

s1 === s2 // false

//   
 var s1 = Symbol('symbol');
 var s2 = Symbol('symbol');
 
 s1 === s2 //false

2. 속성 명 Symbol
모든 Symbol 값 이 같 지 않 기 때문에 속성 식별 자로 서 좋 은 선택 입 니 다.
정의 방식:

let symbolProp = Symbol();

var obj = {};
obj[symbolProp] = 'hello Symbol';

//  
var obj = {
    [symbolProp] : 'hello Symbol';
}

//  
var obj = {};
Object.defineProperty(obj,symbolProp,{value : 'hello Symbol'});

주의 하 다.
속성 을 정의 할 때 Symbol 값 을 괄호 안에 넣 을 수 있 습 니 다. 그렇지 않 으 면 속성의 키 이름 은 Symbol 값 이 아 닌 문자열 로 사 용 됩 니 다.마찬가지 로 Symbol 속성 에 접근 할 때 도 점 연산 자 를 통 해 접근 할 수 없습니다. 점 연산 자 뒤에 항상 문자열 이 있 습 니 다. Symbol 값 이 식별 자로 서 가리 키 는 값 을 읽 지 않 습 니 다.
Symbol 형식 정의 상수
상수 적 으로 Symbol 값 을 사용 하 는 가장 큰 장점 은 다른 어떤 값 도 같은 값 을 가 질 수 없다 는 것 이다. switch 문 구 를 디자인 하 는 것 이 좋 은 방식 이다.예 를 들 어 마술 문자열 을 없 애 라.
3. Symbol.for(),Symbol.keyFor()
Symbol.for()
Symbol. for 방법 에 대해 서 는 두 가 지 를 기억 해 야 합 니 다.

Symbol. for () 가 되 돌아 오 는 Symbol 값 의 역할 도 메 인 은 = = 전체 코드 라 이브 러 리 = = (서로 다른 iframe 이나 service worker 포함) 로 전역 적 인 변수 로 처음 생 겼 을 때 등록 합 니 다.

Symbol. for () 를 호출 할 때 전역 환경 에서 주어진 key 가 존재 하 는 지 검색 하면 존재 하지 않 으 면 새 값 을 만 들 고 Symbol () 은 그렇지 않 으 며 Symbol () 은 매번 다른 값 으로 되 돌아 갑 니 다.

Symbol.for('foo') === Symbol.for('foo'); //true
 
Symbol('foo') === Symbol('foo'); //false

Symbol.keyFor()
Symbol. keyFor 방법 은 등 록 된 Symbol 형식의 값 을 되 돌려 줍 니 다.

var s1 = Symbol.for('foo');
Symbol.keyFor(s1) //"foo"

var s2 = Symbol('foo');
Symbol.keyFor(s2);//undefiend

위의 코드 에서 변수 s2 는 등록 되 지 않 은 Symbol 값 에 속 하기 때문에 undefined 로 돌아 갑 니 다.
4. 속성 명 옮 겨 다 니 기
Symbol 은 속성 명 으로 개인 속성 은 아니 지만 for... in, for... of 순환 에 서 는 Object. keys (), Object. getOWn Property Names () 를 얻 을 수 없습니다.보통 두 가지 방법 으로 Symbol 속성 을 옮 겨 다 닙 니 다.

Object. getOWn Property Symbols 방법 은 하나의 배열 을 되 돌려 줍 니 다. 구성원 은 현재 대상 의 모든 Symbol 값 의 속성 입 니 다.

Reflect. ownKeys () 는 일반적인 키 이름과 Symbol 키 를 포함 하여 모든 종류의 키 이름 을 되 돌려 줄 수 있 습 니 다.

다음은 위의 모든 것 을 설명 하 는 예 를 들 어 보 겠 습 니 다.

var obj = {};
var a = Symbol('a');
var b = Symbol('b');

obj[a] = 'hello';
obj[b] = 'world';

//    
for(var i in obj){
    console.log(i); //   
}

Object.getOwnPropertyNames(obj);//[]


//    
var objectSymbols = Object.getOwnPropertySymbols(obj);
objectSymbols// [Symbol(a), Symbol(b)]

Reflect.ownKeys(obj);//[Symbol(a), Symbol(b)]

Symbol 값 을 이름 으로 하 는 속성 은 일반적인 방법 으로 옮 겨 다 니 지 않 습 니 다.우 리 는 이 특성 을 이용 하여 대상 에 게 비 사유 적 이면 서도 내부 적 인 방법 만 을 정의 할 수 있다.

var size = Symbol('size');

class Collection {
    constructor(){
        this[size] = 0;
    }
    
    add(item){
        this[this[size]] = item;
        this[size]++;
    }
    
    static sizeOf(instance){
        return instance[size];
    }
}

var x = new Collection();
Collection.sizeOf(x); //0

x.add('foo');
Collection.sizeOf(x); //1

Object.keys(x)//['0']
Object.getOwnPropertyNames(x) //['0']
Object.getOwnPropertySymbols(x) //[Symbol(size)]

위의 코드 에서 대상 x 의 size 속성 은 Symbol 값 이기 때문에 Object. keys (x), Object. getOwnProperty Names (x) 를 가 져 올 수 없습니다.이것 은 비 사유 적 인 내부 방법의 효 과 를 가 져 왔 다.만약 에 ES6 정의 류 에 대해 잘 모 르 면 이 부분 을 보지 않 거나 스스로 자 료 를 찾 아 볼 수 있 습 니 다. 뒤의 글 도 공유 할 것 입 니 다. 전체적으로 보면 현재 자 바스 크 립 트 의 새로운 기준 은 자바 와 점점 비슷 해 지고 있 습 니 다. 예 를 들 어 새로 추 가 된 const, let 블록 급 역할 도 메 인, class 정의 류 등 입 니 다.
내 장 된 Symbol 값
자신 이 정의 한 Symbol 값 을 제외 하고 JavaScript 는 내 장 된 Symbol 이 표시 하 는 내부 언어 행 위 는 ECMAScript 5 및 이전에 개발 자 에 게 노출 되 지 않 았 습 니 다.이 Symbol 은 다음 속성 에 접근 할 수 있 습 니 다.
1. Symbol.iterator
대상 의 기본 교체 기 를 되 돌려 주 는 방법.피 for... of 사용
2. Symbol.math
문자열 과 일치 하 는 방법 은 대상 이 정규 표현 식 으로 사용 할 수 있 는 지 판단 하 는 데 도 사 용 됩 니 다. String. prototype. match () 에서 사 용 됩 니 다.
3. Symbol.replace
일치 하 는 문자열 의 하위 문자열 을 대체 하 는 방법String. prototype. replace () 에서 사 용 됩 니 다.
4. Symbol.search
정규 표현 식 과 일치 하 는 문자열 에서 색인 을 되 돌려 주 는 방법 을 되 돌려 줍 니 다.String. prototype. search () 에서 사 용 됩 니 다.
5. Symbol.split
정규 표현 식 과 일치 하 는 색인 에서 문자열 을 나 누 는 방법 입 니 다.String. prototype. split () 에 의 해 사 용 됩 니 다.
6. Symbol.hasInstance
구조 함수 대상 이 대상 을 인 스 턴 스 로 식별 하 는 방법 을 확인 합 니 다.instanceof 에서 사용 됨
7. Symbol.isConcatSpreadable
불 값, 지시 대상 이 배열 요소 로 평면 화 되 어야 하 는 지 여부Array. prototype. concat () 에서 사 용 됩 니 다.
8. Symbol.unscopables
관련 대상 의 환경 바 인 딩 에서 자신 과 계승 하 는 속성 이름 의 대상 값 을 제거 합 니 다.사용되다
9. Symbol.species
파생 대상 을 만 드 는 구조 함수 입 니 다.
10. Symbol.toPrimitive
대상 을 원시 값 으로 바 꾸 는 방법.
11. Symbol.toStringTag
대상 의 기본 설명 에 사용 할 문자열 값 입 니 다.Object. prototype. toString () 에 의 해 사 용 됩 니 다.
나 는 이 11 개의 속성 에 대해 구체 적 인 예 를 제시 하지 않 았 다.독자 가 스스로 이 몇 가지 속성 을 이해 하 는 것 을 잊 는 것 은 어떤 방법 을 이해 하 는 데 매우 유용 하 다.
참고 자료:
완 일 봉 의 < >
Symbol|-JavaScript|MDN