Rumah hujung hadapan web tutorial js ES6中Symbol的详细介绍(代码示例)

ES6中Symbol的详细介绍(代码示例)

Mar 13, 2019 pm 01:34 PM
es6

本篇文章给大家带来的内容是关于ES6中Symbol的详细介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

Symbol 特性

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

1

2

3

var sym = Symbol();

var sym1 = new Symbol(); // TypeError

sym instanceof Symbol // false

Salin selepas log masuk

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

1

2

var sym = Symbol('foo');

typeof sym;     // "symbol"

Salin selepas log masuk

3.Symbol 工厂函数能支持一个可选的参数,用于描述当前的 symbol

1

2

var sym2 = Symbol('foo');

var sym3 = Symbol('foo');

Salin selepas log masuk

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

1

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

Salin selepas log masuk

5.Symbol 与数值或字符串进行运算时,会抛出异常

1

2

sym | 0 // TypeError

Symbol("foo") + "bar" // TypeError

Salin selepas log masuk

6.Symbol 工厂函数返回的 symbol,可作为对象的属性名,可以避免属性冲突,在 for...in 迭代中不可枚举

1

2

3

4

5

6

7

8

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"

}

Salin selepas log masuk

7.Symbol 工厂函数返回的值,可作为对象属性名,当使用 JSON.stringify() 进行序列化时,该属性会被忽略

1

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

Salin selepas log masuk

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

1

2

3

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

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

mySymbol1 == mySymbol2 //true

Salin selepas log masuk

Symbol 实战

对象字面量私有属性和方法

1

2

3

4

5

6

7

8

9

10

11

12

13

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());

Salin selepas log masuk

除了在创建对象字面量时可以使用 Symbol 外,在定义类的私有属性和方法时也可以使用。

类的私有属性和方法

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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());

Salin selepas log masuk

在 ES6 中,引入了一些全局的 Symbols,比如:Symbol.match,Symbol.replace,Symbol.search,Symbol.iterator 和 Symbol.split。这里我们简单介绍一下 Symbol.search 和 Symbol.iterator。

Symbol.iterator

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

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}`);

}

Salin selepas log masuk

Symbol.search

先来简单看个示例:

1

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

Salin selepas log masuk

该示例的执行流程:

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

把 ‘angular’ 转换为字符串对象 new String('angular')

把 ‘ng’ 转换为正则对象 new Regexp('ng')

调用 ‘angular’ 字符串对象的 search 方法,该方法内部会自动调用 ng 正则对象的 Symbol.search 方法

具体可以参考以下伪代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

// 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);

    }

}

Salin selepas log masuk

此外利用 Symbol.search 我们还可以让 String.prototype.search() 方法调用我们自定义对象内部的 Symbol.search() 方法,从而实现自定义 search 逻辑:

1

2

3

4

5

6

7

8

9

10

11

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

Salin selepas log masuk

以上示例的执行流程:

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

把 ‘Angular7’ 转换为字符串对象 new String("Angular7")

由于 article 是对象,这里不需要进行转换

调用 ‘Angular7’ 字符串对象的 search 方法,该方法会自动调用 article 对象内部的 Symbol.search 方法,比如 article[Symbol.search]('Angular7')

Atas ialah kandungan terperinci ES6中Symbol的详细介绍(代码示例). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Adakah async untuk es6 atau es7? Adakah async untuk es6 atau es7? Jan 29, 2023 pm 05:36 PM

Adakah async untuk es6 atau es7?

Bagaimana untuk membalikkan tatasusunan dalam ES6 Bagaimana untuk membalikkan tatasusunan dalam ES6 Oct 26, 2022 pm 06:19 PM

Bagaimana untuk membalikkan tatasusunan dalam ES6

Bagaimana untuk mencari item yang berbeza dalam dua tatasusunan dalam es6 Bagaimana untuk mencari item yang berbeza dalam dua tatasusunan dalam es6 Nov 01, 2022 pm 06:07 PM

Bagaimana untuk mencari item yang berbeza dalam dua tatasusunan dalam es6

Mengapakah program mini perlu menukar es6 kepada es5? Mengapakah program mini perlu menukar es6 kepada es5? Nov 21, 2022 pm 06:15 PM

Mengapakah program mini perlu menukar es6 kepada es5?

Adakah memerlukan sintaks es6? Adakah memerlukan sintaks es6? Oct 21, 2022 pm 04:09 PM

Adakah memerlukan sintaks es6?

Apakah maksud zon mati sementara es6? Apakah maksud zon mati sementara es6? Jan 03, 2023 pm 03:56 PM

Apakah maksud zon mati sementara es6?

Adakah es2015 sama dengan es6? Adakah es2015 sama dengan es6? Oct 25, 2022 pm 06:51 PM

Adakah es2015 sama dengan es6?

Adakah peta es6 dipesan? Adakah peta es6 dipesan? Nov 03, 2022 pm 07:05 PM

Adakah peta es6 dipesan?

See all articles