ES6中Symbol的详述

这篇文章运用了实例代码展示了ES6中Symbol的具体内容，代码非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

Symbol 是 ES6 引入的一种新的原始数据类型，表示独一无二的值。

Symbol 特性

1.Symbol 通过工厂函数创建，不能以 new 的方式创建，所以使用 instanceof 运算符返回的结果为 false

var sym = Symbol();var sym1 = new Symbol(); // TypeErrorsym 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 // TypeErrorSymbol("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 classclass 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)); // Foundconsole.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的介绍，详细使用情况还需要大家自己使用过才领会。如果想了解更多，欢迎关注行业资讯频道！