Detailed introduction to Symbol in ES6 (code example)

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

2.Symbol use The typeof operator returns "symbol"

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

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

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

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

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

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

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

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

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

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

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

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

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

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 = ['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

Let’s take a brief look at an example:

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

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

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 ? 'Found' : 'Not_Found';
    }
}
var article = new Article('Angular');
console.log('Angular7'.search(article)); // Found
console.log('重温ES6'.search(article)); // Not_Found

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!