Javascript ES6 의 데이터 형식 Symbol 사용 에 대한 자세 한 설명

소개 하 다.
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
속성 명 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 문 구 를 디자인 하 는 것 이 좋 은 방식 이다.예 를 들 어 마술 문자열 을 없 애 라.
Symbol.for(),Symbol.keyFor()Symbol.for() Symbol.for방법 에 대해 두 가 지 를 기억 해 야 한다.
  • Symbol.for()되 돌아 오 는 Symbol 값 의 역할 도 메 인 은 전체 코드 라 이브 러 리(서로 다른 iframe 이나 service worker 포함)로 전체적인 변수 로 처음 생 겼 을 때 등록 합 니 다.
  • 호출Symbol.for()할 때 전역 환경 에서 주어진 키 가 존재 하 는 지 검색 하면 존재 하지 않 으 면 새 값 을 만 들 고Symbol()하지 않 으 면Symbol()매번 돌아 오 는 값 이 다 릅 니 다.Symbol.keyFor()4567918)
    
    Symbol.for('foo') === Symbol.for('foo'); //true
    Symbol('foo') === Symbol('foo'); //false
    Symbol.keyFor Object.keys()등 록 된 Symbol 형식의 값 키 를 되 돌려 줍 니 다.
    
    var s1 = Symbol.for('foo');
    Symbol.keyFor(s1) //"foo"
    var s2 = Symbol('foo');
    Symbol.keyFor(s2);//undefiend
    위의 코드 에서 변수 s2 는 등록 되 지 않 은 Symbol 값 에 속 하기 때문에 undefined 로 돌아 갑 니 다.
    속성 이름 옮 겨 다 니 기
    Symbol 은 속성 명 으로 개인 속성 은 아니 지만 for...in,for...of 순환 에서Object.getOwnPropertyNames(),Object.getOwnPropertySymbols를 얻 을 수 없습니다.보통 두 가지 방법 으로 Symbol 속성 을 옮 겨 다 닙 니 다.Reflect.ownKeys()방법 은 하나의 배열 을 되 돌려 줍 니 다.구성원 은 현재 대상 의 모든 Symbol 값 의 속성 입 니 다.Object.keys(x) 일반적인 키 이름과 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.getOwnPropertyNames(x),String.prototype.match()가 져 올 수 없습니다.이것 은 비 사유 적 인 내부 방법의 효 과 를 가 져 왔 다.만약 에 ES6 정의 류 에 대해 잘 모 르 면 이 부분 을 보지 않 거나 스스로 자 료 를 찾 아 볼 수 있 습 니 다.뒤의 글 도 공유 할 것 입 니 다.전체적으로 보면 현재 자 바스 크 립 트 의 새로운 기준 은 자바 와 점점 비슷 해 지고 있 습 니 다.예 를 들 어 새로 추 가 된 const,let 블록 급 역할 도 메 인,class 정의 류 등 입 니 다.
    내 장 된 Symbol 값
    자신 이 정의 한 Symbol 값 을 제외 하고 JavaScript 는 내 장 된 Symbol 이 표시 하 는 내부 언어 행 위 는 ECMAScript 5 및 이전에 개발 자 에 게 노출 되 지 않 았 습 니 다.이 Symbol 은 다음 속성 에 접근 할 수 있 습 니 다.
    1、Symbol.iterator
    대상 의 기본 교체 기 를 되 돌려 주 는 방법.피 for...of 사용
    2、Symbol.math
    문자열 과 일치 하 는 방법 은 대상 이 정규 표현 식 으로 사용 할 수 있 는 지 판단 하 는 데 도 사 용 됩 니 다.String.prototype.replace()사용 되 었 습 니 다.
    3、Symbol.replace
    일치 하 는 문자열 의 하위 문자열 을 대체 하 는 방법String.prototype.search()사용 되 었 습 니 다.
    4、Symbol.search
    정규 표현 식 과 일치 하 는 문자열 에서 색인 을 되 돌려 주 는 방법 을 되 돌려 줍 니 다.String.prototype.split()사용 되 었 습 니 다.
    5、Symbol.split
    정규 표현 식 과 일치 하 는 색인 에서 문자열 을 나 누 는 방법 입 니 다.Array.prototype.concat()사용 되 었 습 니 다.
    6、Symbol.hasInstance
    구조 함수 대상 이 대상 을 인 스 턴 스 로 식별 하 는 방법 을 확인 합 니 다.instanceof 에서 사용 됨
    7、Symbol.isConcatSpreadable
    불 값,지시 대상 이 배열 요소 로 평면 화 되 어야 하 는 지 여부Object.prototype.toString()사용 되 었 습 니 다.
    8、Symbol.unscopables
    관련 대상 의 환경 바 인 딩 에서 자신 과 계승 하 는 속성 이름 의 대상 값 을 제거 합 니 다.사용되다
    9、Symbol.species
    파생 대상 을 만 드 는 구조 함수 입 니 다.
    10、Symbol.toPrimitive
    대상 을 원시 값 으로 바 꾸 는 방법.
    11、Symbol.toStringTag
    대상 의 기본 설명 에 사용 할 문자열 값 입 니 다.(4567914)사용 되 었 습 니 다.
    나 는 이 11 개의 속성 에 대해 구체 적 인 예 를 제시 하지 않 았 다.독자 스스로 이 몇 가지 속성 을 이해 하 는 것 은 어떤 방법 을 이해 하 는 데 매우 유용 하 다.
    총결산
    이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
  • 좋은 웹페이지 즐겨찾기