Photo from Ruan Yifeng’s blog

ES6 added the seventh primitive data type Symbol, a brief introduction to its use methods and use scenarios.

Symbol meaning and use method

The symbol is a unique value, and it looks simple after understanding its meaning.

To create a value of type symbol, do the following

const s = Symbol(a);console.log(typeof s);  // "symbol"
Copy the code

Note that the Symbol method does not use the new operator when creating values. The reason is that the result of the new instantiation is an object object, not the Symbol of the original type

The Symbol method takes a parameter that represents a description of the generated Symbol value

const s = Symbol('foo');
Copy the code

Even if the same argument is passed in, the resulting symbol value is not equal, because symbol is meant to be unique

const foo = Symbol('foo');
const bar = Symbol('foo');

console.log(foo === bar); // false

Copy the code

The symbol. for method checks if a Symbol value created using the method with the same parameters already exists in the context, returns the value if it exists, and creates a new value if it does not.

const s1 = Symbol.for('foo');
const s2 = Symbol.for('foo');

console.log(s1 === s2); // true
Copy the code

The symbol. keyFor method returns a key of the Symbol value created using the symbol. for method

const foo = Symbol.for("foo");
const key = Symbol.keyFor(foo);

console.log(key) // "foo"
Copy the code

Usage scenarios

The above briefly introduces several common methods, so in what kind of scenarios can be used, then introduce several more suitable use scenarios

  1. Erase magic character

Tens of thousands of lines of code, maintenance first difficult. Code is not standard, two lines of tears colleagues.

When code is filled with a lot of magic characters, it can be hard to understand even after a while for the original developer to look back on, let alone for later developers to maintain.

Suppose you have a Tabs switch

if (type === 'basic') {
    return <div>basic tab</div>
}

if (type === 'super') {
    return <div>super tab</div>
}
Copy the code

The strings basic and super in the above code are magic characters unrelated to the business code. Next, Symbol is used to transform the code

const tabTypes = {
    basic: Symbol(),
    super: Symbol(),
}

if (type === tabTypes.basic) {
    return <div>basic tab</div>
}

if (type === tabTypes.super) {
    return <div>super tab</div>
}
Copy the code

When a complex object contains more than one attribute, it is easy to overwrite the attribute name. Using Symbol value as attribute name can avoid this phenomenon.

const name = Symbol('name');
const obj = {
    [name]: 'ClickPaas',}Copy the code

Mock class private methods

Classes in ES6 do not have the private keyword to declare class private methods and variables, but we can use the uniqueness of Symbol to simulate this.

const speak = Symbol(a);class Person { [speak]() { ... }}Copy the code

This method cannot be called because the user cannot create an identical Speak externally

The last

If there are any mistakes in this article, please correct them in the comments section. Thank you for reading