Shulou(Shulou.com)06/03 Report--

This article uses easy-to-understand examples to introduce how to use symbol, the code is very detailed, interested friends can refer to, hope to be helpful to you.

Symbol is a new primitive data type, which is the seventh data type of JavaScript. The symbol value is generated by the Symbol function, using the syntax "let s = Symbol (); typeof s;", where typeof indicates that s is the symbol data type.

How to use Symbol ()

Introduction: ES5 object attribute names are strings, which can easily cause property name conflicts, such as a project is very large, not developed by one person, it is possible to cause variable name conflicts, if there is a unique name, so that you can fundamentally prevent property name conflicts. This is why ES6 introduced Symbol.

ES6 introduces a new primitive data type, Symbol, which means unique, which is the seventh data type of JavaScript. The Symbol value is generated by the Symbol function, which is unique as long as the attribute name is of type Symbol, and is guaranteed not to conflict with other attribute names.

Let s = Symbol (); typeof snatch / "symbol"

In the above code, s is a unique value, and typeof indicates that s is of the symbol data type.

Note: the new keyword cannot be used before the symbol function, otherwise an error will be reported, because symbol is the original data type, not an object, so attributes cannot be added.

Symbol can accept a string as a parameter to represent the description of the Symbol, which is easy to distinguish when displayed on the console.

Var S1 = Symbol ("foo"); var S2 = Symbol ("bar"); S1 / / Symbol ("foo") S2 / / Symbol ("bar") s1.toString () / / "Symbol (foo)" s2.toString () / / "Symbol (bar)"

This parameter can not be added, if not added to the console output is the two Symbol () is not conducive to the distinction, plus the parameter is to distinguish.

Two Symbol without parameters are not equal, for example

/ / if there are no parameters, var S1 = Symbol (); var S2 = Symbol (); S1 = = S2 / / false// with parameters var S1 = Symbol ("foo"); var S2 = Symbol ("foo"); S1 = = S2 / / false

With or without parameters, they are not equal.

Symbol cannot operate with other values, otherwise an error will be reported

Var S1 = Symbol ("My Symbol"); "your symbol is" + S1 / TypeError: can't convert symbol to string`your symbol is ${S1} `/ / TypeError: can't convert symbol to string

Symbole can be displayed as a string, a Boolean, but not a number.

/ / converted to the string var S1 = Symbol ("My Symbol"); String (S1) / / "Symbol (My Symbol)" s1.toString () / / "Symbol (My Symbol)" / / to Boolean var S1 = Symbol (); Boolean (S1) / / trueaccouns1 / / falseif (S1) {/ /...} / / converted to a value will result in an error

Since each Symbol is different, it can be used as an identifier as the property name of the object to ensure that attributes with the same name will not appear.

Var mySymbol = Symbol (); / / the first way of writing var a = {}; a [mySymbol] = "Hello!"; / / the second way of writing var a = {[mySymbol]: "Hellow!"} / / the third way of writing var a = {}; Object.defineProperty (a, mySymbol, {value: "Hellow!"}); / / the result of all the above is the same a [mySymbol] / / "Hellow!"

Note: symbol value cannot be used as the property name of an object. Similarly, symbol value must be placed in square brackets when using symbol value inside an object.

Let s = Symbol (); let obj = {[s]: function (arg) {...}} / / if s is not in [], the attribute name is a string, rather than Symbol// can enhance the way to write the above code let s = Symbol (); let obj = {[s] (arg) {...}}

Symbol can also define a set of constants to ensure that the values of these constants are not equal.

Const COLOR_RED = Symbol (); const COLOR_GREEN = Symbol (); function getComponent (color) {switch (color) {case: COLOR_RED: return "red"; case: COLOR_GREEN: return "green"; default: throw new Error ("Undefind color")}}

The biggest advantage of using symbol values for constants is that no other value can be the same.

Eliminate magic string

Magic string refers to a specific string or number that appears many times in the code and forms a strong coupling with the code. A good code style should eliminate the magic string and replace it with clear variables.

Function getArea (shape, options) {var area = 0; switch (shape) {case: "Tringel": / / Magic string area = 5 magic options.widthroomoptions.height; break;} return area;} getArea ("Tringel", {width: 100, height: 100}); / / Magic string

The Tringel in the above string is a magic string, which appears many times and is strongly coupled with the code, which is not conducive to future maintenance.

Var shapeType = {triangle: "Tringel"} function getArea (shape, options) {var area = 0; switch (shape) {case: shapeType.triangle: / / eliminate the magic string area = 5 magic options.widthoptions.height; break;} return area;} getArea (shapeType.triangle, {width: 100, height: 100}); / / eliminate the magic string

Here, it is very suitable to use Symbol instead.

Var shapeType = {triangle: Symbol ()} on how to use symbol to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.