ES6 행동 : 기호와 그 용도

ES2015는 개발자가 오랫동안 예상했던 일부 언어 기능뿐만 아니라 상징과 같이 명확하지 않은 일부 언어 기능을 소개합니다.

기호는 새로운 기본 데이터 유형으로, 다른 기호와 충돌하지 않도록 보장되는 고유 한 태그입니다. 이런 의미에서, 당신은 상징을 일종의 UUID (보편적 인 고유 식별자)로 생각할 수 있습니다. 상징이 어떻게 작동하는지, 우리가 할 수있는 일을 봅시다.

키 포인트

es6는 새로운 기본 데이터 유형 기호를 소개합니다. 이는 다른 기호와 절대 충돌하지 않는 고유 한 태그로, 문자열이나 정수를 클래스/모듈 상수로 대안으로 대안으로합니다.

기호는 객체 속성 키로 사용할 수 있으며 기존 속성이나 메소드와 충돌하지 않는 고유 한 키를 제공하며 객체가 직렬화 될 때는 이러한 키를 포함하지 않습니다. 공개 기호는 특정 언어 기능 (예 : 반복자)의 동작을 사용자 정의하고 새로운 기능을 구현하는 데 사용되는 기호 함수의 사전 정의 된 속성입니다. es6에는 문서 및 임베디드 iframes 또는 서비스 작업자와 같은 다양한 실행 컨텍스트에서 기호를 저장하고 검색 할 수있는 전역 심볼 레지스트리가 포함되어 있습니다.

새 기호를 만듭니다
• 새 기호를 만드는 것은 매우 간단합니다. 심볼 함수를 호출하십시오. 이것은 객체 생성자가 아닌 표준 함수 일뿐입니다. 새로운 연산자와 함께 호출하려고하면 TypeError가 발생합니다. 기호 함수를 호출 할 때마다 새롭고 완전히 고유 한 값이 나타납니다.
• 문자열을 첫 번째 매개 변수로 전달하여 태그 기호를 만들 수도 있습니다. 태그는 기호의 값에 영향을 미치지 않지만 디버깅에 유용하며 ToString () 메소드의 기호가 호출되면 태그가 표시됩니다. 동일한 태그로 여러 기호를 만들 수 있지만 이점은 없으므로 혼란을 초래할 수 있습니다.
기호의 목적
• 기호는 클래스/모듈 상수로 문자열 또는 정수를 잘 대체합니다.
문자열과 정수는 예를 들어 고유 한 값이 아닙니다. 기호를 사용하면 제공된 값에 대해 더 자신감을 가질 수 있습니다.

기호의 또 다른 흥미로운 사용은 객체 속성 키입니다. JavaScript 객체를 해시 맵으로 사용한 적이 있다면 (PHP 용어의 협회 어레이 및 Python 용어의 사전)를 사용하는 경우 Square Bracket 표기법을 사용하여 속성을 얻는 데 익숙합니다 :

.

<code class="language-javascript">const foo = Symbol();
const bar = Symbol();

foo === bar // false</code>

정사각형 브래킷 표기법을 사용하면 기호를 속성 키로 사용할 수도 있습니다. 이를 수행하는 데는 몇 가지 장점이 있습니다. 첫째, 기존 속성이나 객체의 방법과 충돌 할 수있는 문자열 키와 달리 심볼 기반 키가 절대 충돌하지 않도록 할 수 있습니다. 둘째, for ... in loop에서 열거되지 않으며 Object.keys (), object.getOrpropertyNames () 및 json.stringify ()와 같은 함수에 의해 무시됩니다. 따라서 객체를 직렬화 할 때 포함시키지 않으려는 속성에 이상적입니다.

그러나 키로 기호를 사용한다고해서 개인 정보를 보장하지는 않습니다. 심볼 기반 속성 키에 액세스 할 수있는 새로운 도구가 있습니다. object.getOwnPropertySymbols ()는 모든 기호 기반 키 배열을 반환하고, 반사시 ()는 기호를 포함한 모든 키의 배열을 반환합니다.

<code class="language-javascript">let foo = Symbol('baz');
let bar = Symbol('baz');

foo === bar // false
// console.log(foo); // Symbol(baz)</code>

공개 기호

<code class="language-javascript">class Application {
  constructor(mode) {
    switch (mode) {
      case Application.DEV:
        // 设置开发环境的应用程序
        break;
      case Application.PROD:
        // 设置生产环境的应用程序
        break;
      default:
        throw new Error('无效的应用程序模式：' + mode);
    }
  }
}

Application.DEV = Symbol('dev');
Application.PROD = Symbol('prod');

// 使用示例
const app = new Application(Application.DEV);</code>

기호 키 속성은 실제로 ES6 전에 코드에 보이지 않으며, 뒤로 호환성을 깨지 않고 기존 유형의 JavaScript에 새로운 기능을 추가하는 데 이상적입니다. 소위 "공개"기호는 특정 언어 기능의 동작을 사용자 정의하고 반복자와 같은 새로운 기능을 구현하는 데 사용되는 기호 함수의 사전 정의 된 속성입니다. symbol.iterator는 반복을 허용하는 객체에 특수 메소드를 할당하는 데 사용되는 공개 기호입니다. 내장형 유형 문자열, 배열, 타임 라 레이, 맵 및 세트에는 기본 기호가 있습니다. 브라우저는 또한 동일한 방식으로 DOM 구조 (예 : Nodelist 및 Htmlcollection)를 반복 할 수 있도록 Symbol.erator Key를 사용하기 시작했습니다.

글로벌 등록

사양은 또한 런타임 전체 기호 레지스트리를 정의합니다. 즉, 문서와 내장 된 iframe 또는 서비스 작업자 사이와 같은 다른 실행 컨텍스트에 기호를 저장하고 검색 할 수 있습니다.

(키) for (key)는 레지스트리에서 주어진 키의 기호를 검색합니다. 키가 존재하지 않으면 기호가 있으면 새 기호가 반환됩니다. 예상대로, 동일한 키에 대한 후속 호출은 동일한 기호를 반환합니다.

<code class="language-javascript">const data = [];

data['name'] = 'Ted Mosby';
data['nickname'] = 'Teddy Westside';
data['city'] = 'New York';</code>

symplic.keyfor (Symbol)를 사용하면 주어진 기호의 키를 검색 할 수 있습니다. 레지스트리에 존재하지 않는 기호로 메소드를 호출하십시오.

사용자 사례

일부 사용 사례에서 상징을 사용하면 장점을 제공 할 수 있습니다. 이전 기사에서 언급 된 하나의 사용 사례는 객체가 직렬화 될 때 포함되지 않을 객체에 "숨겨진"속성을 추가하려는 경우입니다.

라이브러리 저자는 기존 키를 덮어 쓰는 것에 대해 걱정하지 않고도 기호를 사용하여 클라이언트 객체에 속성 또는 메소드를 안전하게 추가 할 수 있습니다 (또는 키는 다른 코드로 덮어 씁니다). 예를 들어, 위젯 구성 요소 (예 : 날짜 선택기)는 종종 다양한 옵션을 사용하여 초기화되며 어딘가에 상태에 저장해야합니다. 속성이 다른 키와 충돌 할 수 있으므로 위젯 인스턴스를 DOM 요소 개체에 할당하는 것은 이상적이지 않습니다. 기본 기반 키를 사용하면이 문제를 영리하게 우회하고 위젯 인스턴스를 덮어 쓰지 않도록 할 수 있습니다. Mozilla Hacks 블로그 게시물 ES6의 깊이 : 기호를 자세히 살펴 보려면.

브라우저 지원

기호를 실험하려면 주류 브라우저에 대한 지원이 매우 좋습니다. 보시다시피, 현재 버전의 Chrome, Firefox, Microsoft Edge 및 Opera는 모두 모바일 장치의 Android 5.1 및 iOS 9뿐만 아니라 기본 유형을 기본적으로 지원합니다. 이전 브라우저를 지원 해야하는 경우 Polyfill을 사용할 수도 있습니다.

결론 기호를 도입하는 주된 이유는 기존 코드를 깨지 않고 언어에 새로운 기능을 추가하는 것을 용이하게하는 것 같습니다. 몇 가지 흥미로운 용도가 있습니다. 모든 개발자는 최소한 기본적인 이해를 가져야하며 가장 일반적으로 사용되는 공개 상징과 그 용도에 익숙해야합니다.

es6 기호에 대한 FAQS

ES6 기호의 실질적인 사용은 무엇입니까?

es6 기호는 ES6 (ECMAScript 6)에 도입 된 새로운 원시 데이터 유형입니다. 객체 속성의 식별자로 사용할 수있는 독특하고 불변의 데이터 유형입니다. 객체에 대한 개인 속성을 만들고 메타 레벨 프로그래밍 개념을 구현하며 이름 지정 충돌을 피하는 데 사용될 수 있습니다. 또한 객체에 대한 맞춤형 반복 동작을 정의하는 데 사용될 수 있습니다. JavaScript에서 새 기호를 만드는 방법은 무엇입니까? Symbol () 함수를 사용하여 새 기호를 만들 수 있습니다. 이 함수는 동일한 인수를 전달하더라도 호출 할 때마다 고유 한 기호를 반환합니다. 예를 들어,

여기서, Symbol1과 Sympart2는 동일한 매개 변수 "Symbol"이 Symbol () 함수로 전달 되더라도 다른 기호입니다.

객체 키로 기호를 사용하는 방법은 무엇입니까?

정사각형 브래킷의 기호를 객체 키로 사용할 수 있습니다. 예를 들어,

여기서, 기호 "기호"는 객체 "obj"의 키로 사용됩니다. JavaScript의 글로벌 심볼 레지스트리는 무엇입니까? Global Symbol Registry는 IFRAME 또는 서비스 작업자와 같은 다른 영역에서 기호를 생성, 액세스 및 공유 할 수있는 공유 환경입니다. 기호 (키)를 사용하여 글로벌 레지스트리에서 기호를 만들고 symplic.keyfor (symbol)를 사용하여 액세스 할 수 있습니다.

객체와 함께 기호를 사용하는 방법은 무엇입니까?

객체와 함께 기호를 사용하여 고유 키를 만들 수 있습니다. 상징은 항상 독특하기 때문에 이름 지정 충돌을 피하는 데 유용합니다. 예를 들어,

여기서, 기호 "기호"는 객체 "obj"의 키로 사용됩니다.

기호를 문자열로 변환 할 수 있습니까? let symbol = Symbol('key'); let obj = { [symbol]: 'value' }; 예, Tostring () 메소드를 호출하여 기호를 문자열로 변환 할 수 있습니다. "Symplic (description)"형식으로 문자열을 리턴합니다. 여기서 "description"은 symbol () 함수로 전달되는 선택적 설명입니다.

기호를 배열과 함께 사용할 수 있습니까?

예, 배열과 함께 기호를 사용할 수 있습니다. 예를 들어, 배열에 대한 메타 데이터를 저장하기 위해 기호를 고유 한 속성 키로 사용할 수 있습니다. 그러나 기호는 배열의 길이 속성에 포함되지 않으며 대부분의 배열 메소드는 반환되지 않습니다.

기호는 함수와 함께 사용할 수 있습니까?

예, 함수와 함께 기호를 사용할 수 있습니다. 예를 들어, 함수에 대한 메타 데이터를 저장하는 고유 속성 키로 기호를 사용할 수 있습니다. 그러나 기호는 함수의 길이 속성에 포함되지 않으며 대부분의 기능 메소드는 반환되지 않습니다.

기호는 클래스와 함께 사용할 수 있습니까?

예, 클래스와 함께 기호를 사용할 수 있습니다. 예를 들어, 클래스에 대한 메타 데이터를 저장하기 위해 Symbol을 고유 한 속성 키로 사용할 수 있습니다. 그러나 기호는 클래스의 길이 속성에 포함되지 않으며 대부분의 클래스 방법은이를 반환하지 않습니다.

기호는 문자열과 함께 사용할 수 있습니까?

예, 문자열과 함께 기호를 사용할 수 있습니다. 예를 들어, 문자열에 대한 메타 데이터를 저장하는 고유 속성 키로 기호를 사용할 수 있습니다. 그러나 기호는 문자열의 길이 속성에 포함되지 않으며 대부분의 문자열 메소드는 반환되지 않습니다.

위 내용은 ES6 행동 : 기호와 그 용도의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!