symbol的用法詳解

symbol是一種新的原始資料類型，它是JavaScript的第七種資料類型，Symbol值透過Symbol函數生成，使用語法為“let s = Symbol();typeof s;”，其中typeof表明s是symbol資料型態。

Symbol() 的使用方法

##簡介：ES5的物件屬性名稱都是字串，這就很容易造成屬性名的衝突，例如一個專案很龐大，又不是一個人開發的，就有可能會造成變數名衝突，如果有獨一無二的名字就好了，這樣就能從根本上防止屬性名衝突。這就是ES6引進Symbol的原因。

ES6引進的是一種新的原始資料類型Symbol，表示獨一無二的，它是JavaScript的第七種資料類型。 Symbol值透過Symbol函數生成，只要屬性名稱是屬於Symbol類型的，就是獨一無二的，可以保證不會與其他屬性名稱產生衝突。

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

上面的程式碼中s 就是一個獨一無二的值，typeof顯示s 是symbol資料類型的。

注意：symbol函數前不能使用new關鍵字，否則會報錯，這是因為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)

這個參數可以不加，如果不加在控制台輸出就是兩個Symbol()不利於區分，加上參數就是為了加以區分。

沒有參數的兩個Symbol是不相等的，例如

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

無論有沒有參數都是不相等的

Symbol不能與其他值運算，否則會報錯

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

Symbole 可以顯示的轉為字串，布林值，但是不能轉為數字

// 转为字符串
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) {
 //  ...  
}
//转为数值就会报错

由於每一個Symbol都不相同，那麼可以作為標識符作為對象的屬性名，保證不會出現同名的的屬性

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

注意：Symbol值作為物件的屬性名稱時不能使用點運算符，同理，在物件的內部使用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")
    }  
}

常數使用Symbol值最大的好處就是，其他任何值都不可能與之相同。

消除魔術字串

魔術字串就是指，在程式碼之中多次出現，與程式碼形成強耦合的某一個具體的字串或數字，良好的程式碼風格應該消除魔術字串，由含義清晰的變數取代。

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中文網！

以上是symbol的用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！