JavaScript has a whole new type of data: Symbol

Data type

Before introducing symbol, let's briefly describe the JavaScript data type:

JavaScript has 6 data types, namely:

• string literal type

• Number numeric type

• Object type

• Boolean Boolean value type

• Null empty value

• Undefined Not defined

• These 6 types of code-writing students are not unfamiliar, they have their own purposes. And ES6 brings us a whole new type of data:Symbol.

every new thing is born to solve some kind of problem.

Designed to explore its design, let's talk about a real-world development scenario:

In a multi-player team, programmer a wrote an object for other people to use, and one day programmer B used the object, and added several new properties and methods to it, and everything was done so smoothly.

The next day, the test told a product has Bug,a: "How can, yesterday also good, I have not changed anything AH ~ ~ ~".

Helpless A as long as the slow troubleshooting, and finally found that the object is B to add a method, where a method name and a write a method name is the same, is overwritten.

Object properties are overwritten, which is often seen in everyday development, and in order to solve the naming problem fundamentally, we need to give the attribute or method a unique name so that the problem of attribute name conflict can be prevented fundamentally.

This is what ES6 designed a symbol for: resolving the object's property name conflict . Now that we know what symbol is designed for, that's what it does. Next, let's look at what it's used for:

1 // Define a symbol type variable
2 let sm = Symbol ();
3
4 console.log (sm);
5 // Print result: Symbol ()
6
7 console.log (typeof sm);
8 // Print result: symbol
As you can see from the above code example, we use a Symbol () function to create a symbol type variable. We print the variable sm and the result is the console output: Symbol (), which represents a unique value, We can't see what it looks like, but basically, it's a bit like a string.

  Next, we use typeof to check the type of variable sm, and the result is: symbol.

  How to judge that it is a unique value? Let's take a look:

1 let sm1 = Symbol ();
2 let sm2 = Symbol ();
3
4 sm1 === sm2 // Result: false
5
6 console.log (sm1); // Result: Symbol ()
7 console.log (sm2); // Result: Symbol ()
We define two symbol type variables sm1, sm2, and then use the congruent symbol === for comparison, the result is false. That is, they are all unique values, not equal.

  Next, we print two variables separately. The console output is Symbol (), which looks exactly the same, but is actually not equal.

   The two different values output the same on the console, which undoubtedly brings us some inconvenience in development and debugging. Is there a way to make them look different?

   Yes, the Symbo () function accepts parameters and is used to describe instance values. Let's try:

1 let sm1 = Symbol (‘sm1’);
2 let sm2 = Symbol (‘sm2’);
3
4 console.log (sm1);
5 // Result: Symbol (sm1)
6
7 console.log (sm2);
8 // Result: Symbol (sm2)
Using the strings sm1 and sm2 as parameters, the resulting variables sm1 and sm2 are Symbol (sm1) and Symbol (sm2), which is equivalent to the description, which is easy to distinguish.

  It should be noted that even if the parameters are the same and the description is the same, the two values obtained are not equal. If you do n’t believe us, let ’s take a look:

1 let sm1 = Symbol (‘sm’);
2 let sm2 = Symbol (‘sm’);
3
4 sm1 === sm2 // Result: false
 Even if the description of both variables is "sm", the corresponding value is still different after all, the symbol will always be a unique value, remember.

After understanding the characteristics of these symbol type values, as mentioned earlier, Symbol is to solve the problem of object attribute name conflicts, then we will combine objects to learn:

 1 let name = Symbol ();
 2 let person = {
 3 [name]: "Zhang San"
 4};
 5
 6
 7 console.log (person [name]);
 8 // Result: Zhang San
 9 
10 console.log (person.name);
11 // Result: undefined
Looking at the code, from top to bottom, first, we define a variable name of the symbol type, which is used as an attribute of the object person, the corresponding value is "Zhang San";

 Next, we obtain the value of name in two ways. The first one can be obtained correctly with square brackets [name], and the second one with dot operator, the acquisition fails. The reason is: when the symbol value is used as the attribute name of the object, the corresponding value cannot be obtained with the dot operator.

  In addition, it should be noted that when a symbol type value is used as the property name of an object, you must use square brackets [], and you cannot use the dot operator, because using the dot operator will cause javascript to put the property name behind To understand as a string type, not a symbol type. See the code specifically:

1 let name = Symbol ();
2 let person = {};
3
4 person.name = "Zhang San";
5
6 person [name]; // Result: undefined
7 person [‘name’]; // Result: Zhang San
8 person.name; // Result: Zhang San
 The variable name is a symbol, but when setting properties for the person object, the dot operator person.name is used instead of the brackets person [name]. What will happen? This will cause the attribute name in the person object to actually be of type string, which explains the printing results of the last three lines of code.

    The code of person [name] is equivalent to asking javascript to find a symbol type attribute name in the person object. Sorry, no, it cannot be found. The person object has only one attribute name of type string; therefore, if you use person [‘name’] or peroson.name, you can find the corresponding attribute name.

It turns out that the value of the symbol type is used as the attribute of the object so much, well, I recognize it! Who is calling you ECMAScript, you have the final say!

  In addition to guaranteeing a unique value, what other characteristics of using symbol type attributes?

 Property name traversal

  When the value of the symbol type is used as the attribute name, the attribute will not appear in for ... in and for ... of, nor will it be obtained by Object.keys (). Let's look at the case:

 1 // Define a variable name of symbol type
 2 let name = Symbol ();
 3
 4 // Define an object with two types of attributes
 5 let person = {
 6 [name]: "Zhang San", // symbol type
 7 "age": 12 // string type
 8     };
 9 
10 Object.keys (person); // Result: ["age"]
11
12 for (let key in person) {
13 console.log (key);
14}
15 // Print result: age
  The person object has two attributes, and the attribute name has two types: symbol type and string string type. The attributes we get through the keys () function, only the attribute age, we print it through the for ... in loop, also only The attribute age is printed out. (For ... of also belongs to the new knowledge of ES6, and there will be a special section later), the above types of methods can not get the attributes of the symbol type.

getOwnPropertySymbols () function

  What if we really want to get the properties of the symbol type? We can use a method: Object.getOwnPropertySymbols (), it will find the symbol type property and return an array, the members of the array is the symbol type property value, see the code:

 1 // Define two symbol type variable name, age
 2 let name = Symbol ("name");
 3 let age = Symbol ("age");
 4
 5
 6 let person = {
 7 [name]: "Zhang San", // symbol type
 8 [age]: 12 // symbol type
 9     };
10
11 Object.getOwnPropertySymbols (person);
12 // Result: [Symbol (name), Symbol (age)]
 The two properties of the person object are of the symbol type, we also know that we can't get it using Object.keys () and for ... in, we use the getOwnPropertySymbols () method, the result is successful, an array is obtained, The contents of the array are the values Symbol (name) and Symbol (age) corresponding to the two symbol type variables.

 Reflect.ownKeys () function

 In this case, there are two different ways to obtain the attributes of the string type and the attributes of the symbol type. It is inevitable that sometimes it will be very inconvenient. Is there any way for us to get all types of attributes at once Is it a string type or a symbol type?

    Yes, we can use the Reflect.ownKeys () method to achieve:

1 // Define an object with two types of attributes
2 let person = {
3 [Symbol (‘name‘)]: "Zhang San",
4 "age": 21
5};
6
7 Reflect.ownKeys (person);
8 // Result: ["age", Symbol (name)]
In the above code, we first define an object person, which contains two attributes, one of type symbol and one of type string.

  Next, we pass the object person into the Reflect.ownKeys () function, and the function returns an array to us. The contents of the array are the properties of the object, including the symbol type and string type.

In addition, Symbol also provides two very useful functions, let's learn.

 Symbol.for () function

 Function function: According to the parameter name, go to the global environment to search whether there is a symbol value with the name of the parameter, return it if there is, and create a new symbol value with the parameter name if not.

 The text description is always so weak, so add a case:

1 let n1 = Symbol.for (‘name’);
2 let n2 = Symbol.for (‘name’);
3 console.log (n1 === n2);
4 // Result: true
   In the last sentence of the code above, we use the equality to compare the two variables and get: true; indicating that n2 is n1 and the two are equal.

   But careful students will notice that in the above code, it is Symbol.for () instead of Symbol () when defining two symbols worth using.

 Is there any difference between the two when creating the symbol value? The difference between them is: the symbol value created by Symbol.for () will be registered in the global environment for later search using Symbol.for (), and the variables created by Symbol () have no such effect.

 In other words, the symbol value created with Symbol () will not be found after searching with Symbol.for (). Do not believe it, let's demonstrate it, or use the above code, let's change the first line slightly:

1 let n1 = Symbol (‘name’);
2 let n2 = Symbol.for (‘name’);
3 console.log (n1 === n2);
4 // Result: false
    In the first line, we use Symbol () to create a symbol value. According to the above, it will not be registered in the global environment; therefore, when we use Symbol.for () to find the second line, it is What can't be found? At this time, Symbol.for () will automatically create a new symbol value, that is to say, n1 and n2 are two different symbol values, so when performing an equality comparison, it will return: false.

 Symbol.keyFor () function

        Function: return a key with the symbol value registered in the global environment, or return undefined if it is not. Note a keyword in this sentence: "registered in the global environment", which means that this symbol value was created by Symbol.for (), not by Symbol ().

1 let n1 = Symbol.for (‘name’);
2 Symbol.KeyFor (n1);
3// Result: name
  The above variable n1 was created by Symbol.for (), not by Symbol (), so use Symbol.keyFor () to find it, and it will return the key of the symbol value, which is its description: name.

  Let's make a slight modification to the above case:

1  
2 let n1 = Symbol (‘name’);
3 Symbol.KeyFor (n1);
4 // Result: undefined
  The variable n1 of this code is created with Symbol (), and the final result is undefined; this proves two knowledge points: 1. The value of symbol created by Symbol () will not be registered in the global environment for Symbol.for ( ) And Symbol.keyFor () search; 2, Symbol.keyFor () function can not find the corresponding symbol in the global environment, it returns undefined.

     The above is the seventh data type that ES6 brings to us: Symbol; Symbol has more little knowledge. It is enough for beginners or novices to understand the above points for daily use, as long as they enter the door Deepening is natural, and any knowledge is the same.

Summary of this section

Summary: JavaScript has a seventh data type: Symbol, to create a unique value; it is used for the properties of objects, the original design is to avoid the problem of conflicting object properties. To get the properties of the object symbol type, use Object.getOwnPropertySymbols (); the Symbol.for () and Symbol.keyFor () methods are also provided for searching the corresponding symbol value.

JavaScript has a new data type: Symbol