What is the usage of symbol in es6-Front-end Q&A-php.cn

What is the usage of symbol in es6

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Release： 2022-04-25 18:27:11

Original

2026 people have browsed it

In es6, Symbol can be used as an attribute name, defined variable or constant to represent a unique value. It is a new data type in es6. Two variables declared through Symbol can never be equal. The syntax is: "const name=Symbol("value")".

What is the usage of symbol in es6

The operating environment of this tutorial: Windows 10 system, ECMAScript version 6.0, Dell G3 computer.

What is the usage of symbol in es6

What is Symbol?

Symbol is a newly added data type in es6, which represents uniqueness value. In es5, we divide data types into basic data types (string, number, Boolean, undefined, null) and reference data types (Object). The new Symbol data type in es6 is divided into basic data types

Why is there such a data type?

//别人给了你一个定义好的对象
var obj = {
    name: "xiaoqiang",
    showName: function(){alert(1)}
}
//你拿到对象想给这对象添加新的属性和方法的时候，可能会创建出一个name属性和showName方法
obj.name = "nodeing"
obj.showName = function(){alert(2)}
 
//这个时候，新增加的方法和属性就会去把原有的方法覆盖，这样就产生了冲突

Copy after login

Since the properties and methods of objects are composed of strings, there may be conflicts when adding new methods and properties. In es6, a new data type is added to represent unique values

A unique value can be created through the Symbol function. Every time the Symbol function is executed, an object is returned.

let s1 = Symbol()
let s2 = Symbol()
 
console.log(s1 === s2) //false 说明创建出来的s1和s2 并不是相同的
console.log(s1, s2); //Symbol() Symbol()

Copy after login

In the above code, the printed values are all Symbol(). How can we distinguish who is the one? It's s1, who is s2? We can solve this problem by passing parameters

//传入的参数就是对当前Symbol的描述，用来区分Symbol
let s1 = Symbol("s1")
let s2 = Symbol("s2")
console.log(s1, s2);  //Symbol(s1) Symbol(s2)

Copy after login

Application scenario

Symbol is usually used to set the property name or method of the object to prevent new The added attributes or methods conflict with the original attributes or methods

let name = Symbol("name");
let show = Symbol("show");
 
let obj = {
    //设置属性
    [name]: &#39;xiaoqiang&#39;,
    [show](){alert(1)}
};
//取值
console.log(obj[name]);
//调用方法
obj[show]()

Copy after login

It should be noted here that the value of name must be a variable that can be changed in [].

Notes

Note 1: The parameters in Symbol are only descriptions of Symbol and have no other meaning. Therefore, even if the descriptions are the same, Symbols are different.

It can be guessed that the return value of the Symbol function is an object.

1	`console.log(Symbol("nodeing") === Symbol("nodeing"))` `//false`

Copy after login

Note 2: The Symbol function cannot be called using the New keyword

1	`let s1 =` `new` `Symbol();` `//报错`

Copy after login

Note 3: The Symbol type cannot be converted into a number during type conversion

let s1 = Symbol("s1");
console.log(String(s1));  //Symbol(s1)
console.log(Boolean(s1));  //true
console.log(Number(s1)) //报错

Copy after login

Note 4: Symbol cannot perform any operations (maybe the return value cannot be operated)

1 2	`console.log(Symbol("s1") +` `"nodeing")` `//报错` `console.log(Symbol("s1") - 100)` `//报错`

Copy after login

Note 5: When Symbol is used as an object property or method, there is no way to get the value if it is not assigned to a variable

let obj = {
    //设置属性
    [Symbol("name")]: &#39;xiaoqiang&#39;
};
//取值
console.log(obj[Symbol("name")]);

Copy after login

Note 6: Symbol cannot be traversed by for in loop

let name = Symbol(&#39;name&#39;)
let age = Symbol(&#39;age&#39;)
let obj = {
    a: 1,
    b: 2,
    [name]: &#39;xiaoqiang&#39;,
    [age]: 18
};
for(let attr in obj){
    console.log(attr,obj[attr])  //a b
}

Copy after login

You can use Object.getOwnPropertySymbols to view all symbol properties on the object

1	`console.log(Object.getOwnPropertySymbols(obj))`

Copy after login

[Related recommendations: javascript video tutorial 、web front end】

The above is the detailed content of What is the usage of symbol in es6. For more information, please follow other related articles on the PHP Chinese website!