ホームページ >ウェブフロントエンド >フロントエンドQ&A >es6 のシンボルの機能は何ですか

es6 のシンボルの機能は何ですか

WBOY
WBOYオリジナル
2022-04-08 10:39:423887ブラウズ

es6 におけるシンボルの役割: 1. 属性名として使用されます。シンボルは一意の値を表し、これにより属性の名前が重複せず、クラス外からもアクセスできるようになります。2. 次の目的で使用されます。定数を定義します。これは、構文「const name=Symbol("value")」を持つ新しいプリミティブ データ型です。

es6 のシンボルの機能は何ですか

このチュートリアルの動作環境: Windows 10 システム、ECMAScript バージョン 6.0、Dell G3 コンピューター。

ES6 におけるシンボルの役割とは

ES6 では、一意の値を表す新しいプリミティブ データ型 Symbol が導入されています。最大の用途は、オブジェクトの一意の属性名を定義することです。

数値、文字列、ブール値、オブジェクト、null、未定義に加えて、ES6 データ型にはシンボルも追加されます。

基本的な使用法

Symbol はオブジェクトではなくプリミティブ データ型であるため、Symbol 関数スタックでは新しいコマンドを使用できません。文字列をパラメータとして受け入れて、新しく作成したシンボルの説明を指定できます。これは、コンソールに表示したり、区別しやすいように文字列として使用したりできます。

let sy = Symbol("KK");
console.log(sy);   // Symbol(KK)
typeof(sy);        // "symbol"
 
// 相同参数 Symbol() 返回的值不相等
let sy1 = Symbol("kk"); 
sy === sy1;       // false

属性名として

使用法

各シンボルの値が等しくないため、シンボルは次のように使用されます。オブジェクトの属性名により、属性の名前が重複しないようにすることができます。

es6 のシンボルの機能は何ですか

#シンボルをオブジェクト プロパティ名として使用することはできません。. 演算子を使用し、角括弧を使用する必要があります。 . 演算子の後に文字列が続くため、シンボル値の sy 属性ではなく、文字列の sy 属性が取得されます。

let syObject = {};
syObject[sy] = "kk";
 
syObject[sy];  // "kk"
syObject.sy;   // undefined

注意事項

シンボル値がプロパティ名として使用されている場合、プロパティはプライベート プロパティではなくパブリック プロパティであり、クラスの外部からアクセスできます。 。ただし、これは for...in および for...of のループには表示されず、Object.keys() および Object.getOwnPropertyNames() によって返されません。オブジェクトの Symbol プロパティを読み取りたい場合は、Object.getOwnPropertySymbols() および Reflect.ownKeys() を通じて取得できます。

let syObject = {};
syObject[sy] = "kk";
console.log(syObject);
 
for (let i in syObject) {
  console.log(i);
}    // 无输出
 
Object.keys(syObject);                     // []
Object.getOwnPropertySymbols(syObject);    // [Symbol(key1)]
Reflect.ownKeys(syObject);                 // [Symbol(key1)]

定数の定義

ES5 では文字列を使用して定数を表します。例:

const COLOR_RED = "red";
const COLOR_YELLOW = "yellow";
const COLOR_BLUE = "blue";

ただし、文字列を使用すると定数が一意であることを保証できないため、いくつかの問題が発生します:

しかし、Symbol を使用して定数を定義すると、この定数セットの値が保証されます。ユニークであり、等しい。シンボルを使用して上記の例を変更します。

const COLOR_RED = Symbol("red");
const COLOR_YELLOW = Symbol("yellow");
const COLOR_BLUE = Symbol("blue");
 
function ColorException(message) {
   this.message = message;
   this.name = "ColorException";
}
function getConstantName(color) {
    switch (color) {
        case COLOR_RED :
            return "COLOR_RED";
        case COLOR_YELLOW :
            return "COLOR_YELLOW ";
        case COLOR_BLUE:
            return "COLOR_BLUE";
        default:
            throw new ColorException("Can't find this color");
    }
}
 
try {
   
   var color = "green"; // green 引发异常
   var colorName = getConstantName(color);
} catch (e) {
   var colorName = "unknown";
   console.log(e.message, e.name); // 传递异常对象到错误处理
}

Symbol の値は一意であるため、同じ値を持つ定数は存在せず、スイッチはコードの期待どおりに実行されます。

【関連する推奨事項: JavaScript ビデオ チュートリアル Web フロントエンド

以上がes6 のシンボルの機能は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。