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，所以就無法呼叫該方法

最後

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

ES6 Symbol 使用場景

Symbol 含義及使用方法

使用場景

最後

相關文章