ES6 Symbol 使用場景
圖片來源於阮一峰部落格
ES6 新增了第 7 種原始資料型別 Symbol，簡單介紹一下它的使用方法及使用場景。
Symbol 含義及使用方法
symbol 英文意思為 符號、象徵、標記、記號，在 js 中更確切的翻譯應該為 獨一無二的值 ，理解了它的意思之後再看起來就簡單多了。
可以通過下面的方式來建立一個 symbol 型別的值
const s = Symbol(); console.log(typeof s);// "symbol" 複製程式碼
需要注意的是通過 Symbol 方法建立值的時候不用使用 new 操作符，原因是通過 new 例項化的結果是一個 object 物件，而不是原始型別的 symbol
Symbol 方法接收一個引數，表示對生成的 symbol 值的一種描述
const s = Symbol('foo');
複製程式碼
即使是傳入相同的引數，生成的 symbol 值也是不相等的，因為 Symbol 本來就是獨一無二的意思
const foo = Symbol('foo');
const bar = Symbol('bar');
console.log(foo === bar); // false
複製程式碼
Symbol.for 方法可以檢測上下文中是否已經存在使用該方法且相同引數建立的 symbol 值，如果存在則返回已經存在的值，如果不存在則新建。
const s1 = Symbol.for('foo');
const s2 = Symbol.for('foo');
console.log(s1 === s2); // true
複製程式碼
Symbol.keyFor 方法返回一個使用 Symbol.for 方法建立的 symbol 值的 key
const foo = Symbol.for("foo");
const key = Symbol.keyFor(foo);
console.log(key) // "foo"
複製程式碼
使用場景
上面簡單介紹一下幾個常用的方法，那麼在什麼樣的場景下能夠使用到呢，接下來介紹幾個比較適合的使用場景
- 消除魔法字元
程式碼千萬行，維護第一難。編碼不規範，同事兩行淚。
當代碼中充斥著大量的魔法字元時，縱使是原開發者在經過一段時間後再回頭看也會變得難以理解，更不必說是交由後來開發者維護。
假如現有一個 Tabs 切換的功能
if (type === 'basic') {
return <div>basic tab</div>
}
if (type === 'super') {
return <div>super tab</div>
}
複製程式碼
上面程式碼中字串 basic、super 就是與業務程式碼無關的魔法字元，接下來使用 Symbol 對這塊程式碼進行改造
const tabTypes = {
basic: Symbol(),
super: Symbol(),
}
if (type === tabTypes.basic) {
return <div>basic tab</div>
}
if (type === tabTypes.super) {
return <div>super tab</div>
}
複製程式碼
2、作為物件屬性 當一個複雜物件中含有多個屬性的時候，很容易將某個屬性名覆蓋掉，利用 Symbol 值作為屬性名可以很好的避免這一現象。
const name = Symbol('name');
const obj = {
[name]: 'ClickPaas',
}
複製程式碼
3、模擬類的私有方法
ES6 中的類是沒有 private 關鍵字來宣告類的私有方法和私有變數的，但是我們可以利用 Symbol 的唯一性來模擬。
const speak = Symbol();
class Person {
[speak]() {
...
}
}
複製程式碼
因為使用者無法在外部創建出一個相同的 speak，所以就無法呼叫該方法