Let’s talk about the symbol data type in ES6 in detail

Symbol Data Type

In the js language, there are 6 data types before ES6.

ES6 newly proposes the symbol data type, so symbol is the seventh data type of js, representing a unique value. Is a data type similar to a string.

The purpose is to prevent attribute name conflicts and ensure that each attribute name in the object is unique.

let s1 = Symbol('foo');
let s2 = Symbol('foo');

s1 === s2 // false

The Symbol type can have a string parameter that represents the description of the Symbol instance. Therefore, two Symbol type instances with the same description are not equal.

The reason why symbol appears

The object property names of ES5 are all strings, which can easily cause property name conflicts. For example, if you use an object provided by someone else, but want to add a new method to this object (mixin mode), the name of the new method may conflict with the existing method. It would be nice if there was a mechanism to ensure that each attribute name is unique, thus preventing attribute name conflicts from occurring. This is why ES6 introduced Symbol

Symbol Features

• Symbol values ​​are unique and are used to resolve naming conflicts.
• Slymbol values ​​cannot be operated on with other data
• The object properties defined by Symbol cannot be traversed using the fr..in loop, but Reflect.ownKeys can be used to obtain all the key names of the object
• The new command cannot be used before the Symbol function, otherwise an error will be reported. This is because the generated Symbol is a primitive value, not an object. That is, since a Symbol value is not an object, you cannot add properties to it. Basically, it is a data type similar to a string.

//Create Symbol
let s = Symbol();
console.log(s, typeof s);


// Try to create 2 symbols with the same name let s2 = Symbol(' 辣鸡rb');
let s3 = Symbol(' 辣鸡rb');
console.log(s2 === s3); //false


//Use Symbol.for to create the same symbol
let s4 = Symbol.for('spicy chicken rb');
let s5 = Symbol.for('spicy chicken rb');
console.log(s4 === s5); //true


//Cannot perform operations with other data let result = s + 100; //Error,

At the end of the article, let's review the data types of js

A mnemonic from Silicon Valley

// USONB =>you are so .niubility You are so awesome // u=>undefined

// s=>string symbol

// 0=>object

// n=>null number

// b=>boolean

After thinking about it, I decided to write more.

Application of symbols

Add up and down methods to the rb object

Method 1

let rb = {
    name: 'Japanese war criminals',
    age: 500,
};
// Processing with symbol // Declare an object, which contains two methods. The methods are written with symbol() let methods = {
    up: Symbol(),
    down: Symbol()
};
// Add the method rb[methods.up] = function () {
    console.log('Forgive me for talking about people');
};
rb[methods.down] = function () {
    console.log('This beast has no shame and asks the Chinese people to forgive it');
};
console.log(rb);

Method 2

Add sb and dsb methods to rb object

let rb = {
    name: 'Japanese war criminals',
    age: 500,
    [Symbol('sb')]: function () {
        console.log('I like Japanese animation');
    },
     [Symbol('dsb')]: function () {
         console.log('But it doesn't stop me from hating the crimes they committed in China');
     },
};

console.log(rb);

Symbol built-in property values

• Symbol.hasInstance: When other objects use the instanceof operator, they use the internal method pointed to by the property name.
• Symbol.isConcatSpreadable
• Symbol.species
• Symbol.match
• Symbol.replace
• Symbol.search
• Symbol.split
• Symbol.iterator
• Symbol.toPrimitive
• Symbol.toStringTag
• Symbol.unscopables
  

Summarize

This is the end of this article about the symbol data type in ES6. For more information about the symbol data type in ES6, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!