JavaScript 的 Symbol 入門

前言

  最近發現 JavaScript 有 Symbol 這個資料型態，抽空作個學習，在此做個紀錄。

內容

  Symbol 這個資料型態提供一種新的方法提取 Object 的成員，以前成員都是用 String 來提取，現在多一種透過 Symbol 來提取，使用的範例如下

let symbolA = Symbol();
let symbolB = Symbol('member');
let symbolC = Symbol('member');
console.log( symbolA === symbolB );//false
console.log( symbolB === symbolC );//false
console.log( symbolB.description === symbolC.description );//true

//
let obj = {
  num : 1234,
  str : 'abc'
};
//
obj[ symbolA ] = 5678;
console.log( obj[ symbolA ] );//5678

//
for(let key in obj)
  console.log(`${key}:${obj[key]}`);
//
// "num:1234"
// "str:abc"
//
Object.getOwnPropertySymbols( obj ).forEach( sym => 
  console.log( obj[sym] )
);
//5678

Symbol 雖然是資料型態，但沒辦法用 new 來使用，只能用 Symbol() 這個"函式"來產生，產生可以帶有字串參數，這個參數讓它看起來很像是命名，但可以看到 SymbolB 與 SymbolC ，雖然參數一樣但卻不相等，該參數其實是設定 Symbol.description 的內容，每一個透過 Symbol() 產生的 Symbol 其實都是不一樣的!範例接著透過 Symbol 來新增成員與取得成員，用起來跟字串時很像，只是把原本透過字串來存取換成 Symbol ，要注意透過 Symbol 來存取的成員沒辦法透過 . 加名稱來存取。在一般的瀏覽物件可以看到無法取得透過 Symbol 來存取的成員，如果要瀏覽物件裡的 Symbol 成員可以透過 Object.getOwnPropertySymbols() 來瀏覽。

 

參考資料

[ developer.mozilla.org ] Symbol