Javascript ES6 의 데이터 형식 Symbol 사용 에 대한 자세 한 설명
Symbol 은 특수 하고 가 변 적 이지 않 은 데이터 형식 으로 대상 속성의 식별 자로 사용 할 수 있 으 며 유일한 값 을 표시 합 니 다.Symbol 대상 은 symbol primitive data type 의 암시 적 대상 포장 기 입 니 다.
이것 은 자 바스 크 립 트 언어의 일곱 번 째 데이터 형식 으로 앞의 6 가 지 는 Undefined,Null,Boolean,String,Number,Object 이다.
문법
Symbol([description])
Parametersdescription:선택 할 문자열 입 니 다.디 버 깅 에 사용 할 수 있 으 나 기호 자체 의 기호 에 접근 하지 않 는 설명 입 니 다.파 라 메 터 를 추가 하지 않 으 면 콘 솔 에 인쇄 된 것 은 모두 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 개의 속성 에 대해 구체 적 인 예 를 제시 하지 않 았 다.독자 스스로 이 몇 가지 속성 을 이해 하 는 것 은 어떤 방법 을 이해 하 는 데 매우 유용 하 다.
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JavaScript로 카드 놀이를 넘기는 애니메이션을 만들려고했습니다.카드를 넘기는 애니메이션을 만들어 보았습니다. 폴더 구성은 다음과 같습니다. 코드는 다음과 같습니다. card_turning.html 다음은 JavaScript 코드입니다. cardTurning.js 결과는, 이런 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.