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('foo');
 
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，所以就無法調用該方法

最後
文中如有錯誤，歡迎在評論區指正，謝謝閱讀

轉載於:https://juejin.im/post/5ca389a85188253ee741fd55