記号の使い方を詳しく解説

Symbol は、JavaScript の 7 番目のデータ型である新しいプリミティブ データ型です。シンボル値は、構文 "let s = Symbol();typeof s;" を使用して、Symbol 関数を通じて生成されます。ここで、typeof は、s がシンボル データ型であることを示します。

#Symbol() の使用方法

はじめに: ES5 オブジェクトの属性名はすべて文字列なので、簡単です。属性名の競合を引き起こす可能性があります。たとえば、プロジェクトが非常に大きく、一人で開発していない場合、変数名の競合が発生する可能性があります。属性名の競合を根本的に防ぐために、一意の名前があれば素晴らしいと思います。 . .これが、ES6 が Symbol を導入した理由です。

ES6 では、一意性を表す新しいプリミティブ データ型 Symbol が導入されており、JavaScript の 7 番目のデータ型です。シンボル値は Symbol 関数によって生成され、属性名が Symbol タイプに属している限り、一意であり、他の属性名と競合しないことが保証されます。

let s = Symbol();
typeof s;
//"symbol"

上記のコードでは、s は一意の値であり、typeof は s がシンボル データ型であることを示します。

注: 新しいキーワードは、symbol 関数の前では使用できません。それ以外の場合、エラーが報告されます。これは、symbol がオブジェクトではなくプリミティブ データ型であるため、属性を追加できないためです。

symbol は、主にコンソールに表示されるときに区別しやすくするために、シンボルの説明を表す文字列をパラメータとして受け入れることができます。

var s1 = Symbol("foo");
var s2 = Symbol("bar");
s1 // Symbol("foo")
s2 // Symbol("bar")
s1.toString() // "Symbol(foo)"
s2.toString() // "Symbol(bar)

このパラメータは省略できます。 2 つの Symbol() は区別に役立たないため、それらを区別するためにパラメータが追加されているだけです。

パラメータのない 2 つのシンボルは等しくありません。たとえば、

// 没有参数的情况
var s1 = Symbol();
var s2 = Symbol();
s1 == s2 // false
// 有参数的情况
var s1 = Symbol("foo");
var s2 = Symbol("foo");
s1 == s2 // false

パラメータの有無に関係なく、これらは等しくありません。

シンボルは他の値で操作できません。そうでない場合は、エラー

var s1 = Symbol("My Symbol");
"your symbol is" + s1;
// TypeError: can't convert symbol to string
`your symbol is ${s1}`
// TypeError: can't convert symbol to string

シンボルは文字列またはブール値に変換して表示できますが、数値に変換することはできません

// 转为字符串
var s1 = Symbol("My Symbol");
String(s1) // "Symbol(My Symbol)"
s1.toString() // "Symbol(My Symbol)"
//转为布尔值
var s1 = Symbol();
Boolean(s1) //true
!s1 //false
if(s1) {
 //  ...  
}
//转为数值就会报错

各シンボルは異なるため、シンボルとして使用できます。同じ名前の属性が表示されないようにするため、識別子とオブジェクトの属性名として使用されます。

var mySymbol = Symbol();
//第一种写法
var a = {};
a[mySymbol] = "Hello!";
//第二种写法
var a = {
     [mySymbol]: "Hellow!"
}
//第三种写法
var a = {};
Object.defineProperty(a, mySymbol, { value: "Hellow!" });
//以上写法的结果都相同
a[mySymbol] // "Hellow!"

注: オブジェクトの属性名として使用される場合、シンボル値にドット演算子を使用することはできません。同様に、オブジェクト内で Symbol 値を使用する場合は、角括弧で囲む必要があります。

let s = Symbol();
let obj = {
    [s]: function(arg) {...}  
}
//如果s不放在[]中，该属性名就是字符串，而不是Symbol
//可以采用增强的方式在书写上面的代码
let s = Symbol();
let obj = {
    [s](arg) {...}
}

Symbol では、定数のグループを定義して、この定数グループの値が確実に適用されるようにすることもできます。等しくない

const COLOR_RED = Symbol();
const COLOR_GREEN = Symbol();
function getComponent(color) {
    switch(color) {
        case: COLOR_RED:
               return "red";
        case: COLOR_GREEN:
              return "green";
        default:
              throw new Error("Undefind color")
    }  
}

定数にシンボル値を使用する最大の利点は、他の値がそれらと一致できないことです。

マジック ストリングの削除

マジック ストリングとは、コード内に複数回出現し、コードとの強い結合を形成する特定の文字列または数値を指します。優れたコーディング スタイルでは、マジック ストリングを削除し、置き換える必要があります。明確な意味を持つ変数を使用します。

function getArea(shape, options) {
     var area = 0;
     switch(shape) {
          case: "Tringel":     // 魔术字符串
              area = 5*options.width*options.height;
              break;
     }
     return area;
}
getArea("Tringel", {width: 100, height: 100});    // 魔术字符串

Tringel 上の文字列はマジック文字列であり、複数回出現し、コードとの強い結合を形成するため、将来のメンテナンスには役立ちません。

var shapeType = {
   triangle: "Tringel"
}
function getArea(shape, options) {
     var area = 0;
     switch(shape) {
          case: shapeType.triangle:     // 消除魔术字符串
              area = 5*options.width*options.height;
              break;
     }
     return area;
}
getArea(shapeType.triangle, {width: 100, height: 100});    //消除魔术字符串

代わりに Symbol を使用するのが非常に適しています

var shapeType = {
   triangle: Symbol()
}

関連知識の詳細については、

PHP 中国語 Web サイトをご覧ください。

以上が記号の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。