Detailed introduction to Symbol in ES6 (code example)-JS Tutorial-php.cn

Detailed introduction to Symbol in ES6 (code example)

不言

Release： 2019-03-13 13:34:10

forward

2625 people have browsed it

This article brings you a detailed introduction (code example) about Symbol in ES6. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Symbol is a new primitive data type introduced in ES6 to represent unique values.

Symbol Features

1.Symbol is created through the factory function and cannot be created by new, so the result returned by the instanceof operator is false

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

Copy after login

2.Symbol use The typeof operator returns "symbol"

var sym = Symbol(&#39;foo&#39;);
typeof sym;     // "symbol"

Copy after login

3.Symbol factory function can support an optional parameter to describe the current symbol

var sym2 = Symbol(&#39;foo&#39;);
var sym3 = Symbol(&#39;foo&#39;);

Copy after login

4.Symbol is unique, Symbol(" foo") == Symbol("foo") returns false

Symbol(&#39;foo&#39;) === Symbol(&#39;foo&#39;); // false

Copy after login

5. When Symbol is operated with a numerical value or string, an exception will be thrown

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

Copy after login

6.Symbol returned by the factory function symbol, can be used as the attribute name of the object, which can avoid attribute conflicts. It cannot be enumerated in the for...in iteration

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"
}

Copy after login

7. The value returned by the Symbol factory function can be used as the object attribute name. When using JSON When .stringify() is used for serialization, this attribute will be ignored

JSON.stringify({[Symbol("foo")]: "foo"});  // &#39;{}&#39;

Copy after login

8.Symbol is unique, but you can use Symbol.for() to share the same Symbol value

var mySymbol1 = Symbol.for(&#39;some key&#39;); 
var mySymbol2 = Symbol.for(&#39;some key&#39;);
mySymbol1 == mySymbol2 //true

Copy after login

Symbol actual combat

Object literal private properties and methods

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

Copy after login

In addition to using Symbol when creating object literals, you can also use it when defining private properties and methods of a class.

Private properties and methods of classes

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

Copy after login

In ES6, some global Symbols are introduced, such as: Symbol.match, Symbol.replace, Symbol.search, Symbol.iterator and Symbol. split. Here we briefly introduce Symbol.search and Symbol.iterator.

Symbol.iterator

class Skill {
    constructor() {
        this.skills = [&#39;Angular&#39;, &#39;React&#39;, &#39;Vue&#39;, &#39;Koa&#39;, &#39;Ionic&#39;];
    }
    [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}`);
}

Copy after login

Symbol.search

Let’s take a brief look at an example:

&#39;angular&#39;.search(&#39;ng&#39;) // 4

Copy after login

The execution process of this example:

Parse 'angular'.search('ng')

Convert 'angular' to a string object new String('angular')

Convert 'ng' to a regular object new Regexp ('ng')

Call the search method of the 'angular' string object, which will automatically call the Symbol.search method of the ng regular object

For details, please refer to the following pseudocode:

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

Copy after login

In addition, using Symbol.search we can also let the String.prototype.search() method call the Symbol.search() method inside our custom object to implement custom search logic:

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

Copy after login

Execution process of the above example:

Parse the 'Angular7'.search(article) statement

Convert 'Angular7' into a string object new String("Angular7")

Since article is an object, no conversion is required here

Call the search method of the 'Angular7' string object, which will automatically call the Symbol.search method inside the article object, such as article[Symbol.search]( 'Angular7')

The above is the detailed content of Detailed introduction to Symbol in ES6 (code example). For more information, please follow other related articles on the PHP Chinese website!