ES6中Symbol的詳述

這篇文章運用了實例代碼展示了ES6中Symbol的具體內容，代碼非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下。

Symbol 是 ES6 引入的一種新的原始數據類型，表示獨一無二的值。

Symbol 特性

1.Symbol 通過工廠函數創建，不能以 new 的方式創建，所以使用 instanceof 運算符返回的結果為 false

var sym = Symbol();
var sym1 = new Symbol(); // TypeError
sym instanceof Symbol // false

2.Symbol 使用 typeof 運算符返回 “symbol”

var sym = Symbol('foo');
typeof sym;     // "symbol"

3.Symbol 工廠函數能支持一個可選的參數，用于描述當前的 symbol

var sym2 = Symbol('foo');
var sym3 = Symbol('foo');

4.Symbol 是唯一的，Symbol("foo") == Symbol("foo") 返回 false

Symbol('foo') === Symbol('foo'); // false

5.Symbol 與數值或字符串進行運算時，會拋出異常

sym | 0 // TypeError
Symbol("foo") + "bar" // TypeError

6.Symbol 工廠函數返回的 symbol，可作為對象的屬性名，可以避免屬性沖突，在 for...in 迭代中不可枚舉

var obj = {};
obj[Symbol("a")] = "a";
obj[Symbol.for("b")] = "b";
obj["c"] = "c";
obj.d = "d";
for (var i in obj) {
   console.log(i); // logs "c" and "d"
}

7.Symbol 工廠函數返回的值，可作為對象屬性名，當使用 JSON.stringify() 進行序列化時，該屬性會被忽略

JSON.stringify({[Symbol("foo")]: "foo"});  // '{}'

8.Symbol 是唯一的，但可以使用 Symbol.for() 共享同一個 Symbol 值

var mySymbol1 = Symbol.for('some key'); 
var mySymbol2 = Symbol.for('some key');
mySymbol1 == mySymbol2 //true

Symbol 實戰

對象字面量私有屬性和方法

const myPrivateMethod = Symbol("myPrivateMethod");
const myPrivateProperty = Symbol("myPrivateProperty");
const obj = {
    [myPrivateProperty]: "semlinker",
    [myPrivateMethod]() {
        return `Hello ${this[myPrivateProperty]}!!!`;
    },
    hello() {
        console.log(this[myPrivateMethod]()); 
    }
};
console.log(Object.keys(obj));
console.log(obj.hello());

除了在創建對象字面量時可以使用 Symbol 外，在定義類的私有屬性和方法時也可以使用。

類的私有屬性和方法

const myPrivateMethod = Symbol("myPrivateMethod");
const myPrivateProperty = Symbol("myPrivateProperty");
class MyClass {
    constructor() {
        this[myPrivateProperty] = "semlinker";
    }
    [myPrivateMethod]() {
        return `Hello ${this[myPrivateProperty]}!!!`;
    }
    hello() {
        console.log(this[myPrivateMethod]()); 
    }
}
const myCls = new MyClass();
console.log(myCls.hello());

在 ES6 中，引入了一些全局的 Symbols，比如：Symbol.match，Symbol.replace，Symbol.search，Symbol.iterator 和 Symbol.split。這里我們簡單介紹一下 Symbol.search 和 Symbol.iterator。

Symbol.iterator

class Skill {
    constructor() {
        this.skills = ['Angular', 'React', 'Vue', 'Koa', 'Ionic'];
    }
    [Symbol.iterator]() {
        let index = 0;
        return {
            next: () => {
                const value = this.skills[index++];
                const done = index === this.skills.length + 1;
                return {
                    value,
                    done
                };
            }
        }
    }
}
const mySkills = new Skill();
console.log([...mySkills]);
for (let skill of mySkills) {
    console.log(`My skill is ${skill}`);
}

Symbol.search

先來簡單看個示例：

'angular'.search('ng') // 4

該示例的執行流程：

解析 'angular'.search('ng')

把 ‘angular’ 轉換為字符串對象 new String('angular')

把 ‘ng’ 轉換為正則對象 new Regexp('ng')

調用 ‘angular’ 字符串對象的 search 方法，該方法內部會自動調用 ng 正則對象的 Symbol.search 方法

具體可以參考以下偽代碼：

// pseudo code for String class
class String {
    constructor(value) {
        this.value = value;
    }
    search(obj) {
        obj[Symbol.search](this.value);
    }
}
class RegExp {
    constructor(value) {
        this.value = value;
    }
    [Symbol.search](string) {
        return string.indexOf(this.value);
    }
}

此外利用 Symbol.search 我們還可以讓 String.prototype.search() 方法調用我們自定義對象內部的 Symbol.search() 方法，從而實現自定義 search 邏輯：

class Article {
    constructor(tag) {
        this.tag = tag;
    }
    [Symbol.search](string) {
        return string.indexOf(this.tag) >= 0 ? 'Found' : 'Not_Found';
    }
}
var article = new Article('Angular');
console.log('Angular7'.search(article)); // Found
console.log('重溫ES6'.search(article)); // Not_Found

以上示例的執行流程：

解析 'Angular7'.search(article) 語句

把 ‘Angular7’ 轉換為字符串對象 new String("Angular7")

由于 article 是對象，這里不需要進行轉換

調用 ‘Angular7’ 字符串對象的 search 方法，該方法會自動調用 article 對象內部的 Symbol.search 方法，比如 article[Symbol.search]('Angular7')

以上就是ES6中Symbol的介紹，詳細使用情況還需要大家自己使用過才領會。如果想了解更多，歡迎關注億速云行業資訊頻道！