Javascript 简明教程
JavaScript - The Symbol Object
JavaScript Symbol
在 JavaScript 中, Symbol 是原始数据类型,它在 ECMAScript 6 (ES6) 中引入。可以使用“Symbol”构造函数创建它。
In JavaScript, Symbol is a primitive data type and it was introduced in ECMAScript 6 (ES6). It can be created using the 'Symbol' constructor.
与字符串或数字等其他原始数据类型不同,符号是不可变且唯一的。它们在需要唯一标识符的情况下特别有用,因为它们提供了一种创建私有对象属性并避免命名冲突的方法。在这里,我们列出了与符号相关的属性和方法。
Symbols are immutable and unique, unlike to other primitive data types like strings or numbers. They are especially helpful in situations where a unique identifier is required since they offer a way to create private object properties and avoid naming conflicts. Here, we have listed the properties and methods related to the symbol.
在使用符号时,应记住以下几点。
The points given below you should keep in mind while using the symbol.
-
Each symbol contains unique values.
-
The symbol is immutable. It means you can’t update the value of the symbol.
-
Symbols are used to define unique object properties.
-
The type of the symbol can’t be changed.
Syntax
你可以按照以下语法使用 Symbol() 函数创建新符号。−
You can follow the syntax below to create a new symbol using the Symbol() function. −
const sym = Symbol([description]);
这里 description 是可选参数。它指定符号描述,你可以使用 'description' 属性访问该描述。
Here description is an optional parameter. It specifies the symbol description, which you can access using the 'description' property.
Symbol Properties
在以下表格中,我们列出了 Symbol 的所有属性−
In the following table, we have listed all the properties of Symbol −
Sr.No. |
Name & Description |
1 |
descriptionTo get an optional description of the symbol object. |
2 |
asyncIteratorIt changes the object to async iterable. |
3 |
hasInstanceTo check whether the constructor object counts the object as its instance. |
4 |
isConcatSpreadableIt determines that while using the array.concat() method array should be concatenated as an object or flattened array. |
5 |
iteratorReturns an iterator of the symbol. |
6 |
matchMatches the regular expression with the string. |
7 |
matchAllReturns all matches of the regular expression with the string. |
8 |
replaceTo replace a substring. |
9 |
searchTo get an index of the matches value. |
10 |
speciesTo create a derived object. |
11 |
splitIt specifies the method that splits string from the indices where regular expression matches. |
12 |
toStringTagTo create a default string description for the object. |
Symbol Methods
在以下表格中,我们列出了 Symbol 的所有方法:
In the following table, we have listed all the methods of Symbol −
Sr.No. |
Name & Description |
1 |
for()To search for a given symbol. |
2 |
keyFor()To retrieve a key from the global symbol registry. |
3 |
toString()To convert the symbol into the string. |
4 |
valueOf()To get the primitive value of the symbol object. |
Examples
Example: Creating a Symbol
在下面的示例中,我们使用 Symbol() 函数创建一个新符号。此外,在定义 sym2 符号时,我们传递了字符串参数。
In the example below, We used the Symbol() function to create a new symbol. Also, we have passed the string argument while defining the sym2 symbol.
你可以观察到 'sym1' 的类型是 'symbol',它是一个原始值。
You can observe the type of the 'sym1', which is 'symbol', a primitive value.
<html>
<body>
<p id="output"></p>
<script>
const sym1 = Symbol();
document.getElementById("output").innerHTML =
"The sym1 is: " + sym1.toString() + "<br>" +
"The type of sym1 is: " + typeof sym1 + "<br>";
const sym2 = Symbol("description");
document.getElementById("output").innerHTML += "The sym2 is: " + sym2.toString();
</script>
</body>
</html>
当我们执行上面的脚本时,它将生成一个由网页上显示的文本组成的输出。
When we execute the above script, it will generate an output consisting of the text displayed on the webpage.
The sym1 is: Symbol()
The type of sym1 is: symbol
The sym2 is: Symbol(description)
Example: Accessing Symbol Description
让我们看一个例子,在例子中,我们使用 .description 获得符号的描述。
Let’s look at the following example, where we are going to use the .description to get the description of the symbol.
<html>
<body>
<p id="output"></p>
<script>
const sym = Symbol("Welcome to Tutorials Point...");
document.getElementById("output").innerHTML =
"The sym description of the symbol is : " + sym.description;
</script>
</body>
</html>
在执行上面脚本后,输出窗口将弹出,显示网页上的文本。
On executing the above script, the output window will pop up, displaying the text on the webpage.
The sym description of the symbol is : Welcome to Tutorials Point...
Example: Each Symbol is Unique
在下面的代码中,我们定义了 sym1 和 sym2 符号。然后,我们比较这两个变量,然后根据需要打印消息。
In the example below, we have defined the sym1 and sym2 symbols. After that, we compare both variables and print the message accordingly.
这两个符号看起来很相似,但是是不同的,你可以从输出中看到。
Both symbols look similar but are different, which you can see in the output.
<html>
<body>
<p id="output"></p>
<script>
const sym1 = Symbol();
const sym2 = Symbol();
if (sym1 == sym2) {
document.getElementById("output").innerHTML += "Sym1 and Sym2 are equal.";
} else {
document.getElementById("output").innerHTML += "Sym1 and Sym2 are not equal.";
}
</script>
</body>
</html>
执行之后,它返回一段文本,表示两个符号不相等。
After executing, it returns a text indicating that the both the symbols are not equal.
Sym1 and Sym2 are not equal.
Example: Using Symbol as an Object Key
符号的主要目的是用作对象键。此处,我们使用了 'objId' 符号作为键。
The main purpose of the symbol is to use it as an object key. Here, we have used the 'objId' symbol as a key.
当我们将对象转换为字符串或者遍历对象属性时,它不会打印符号。因此,符号可以帮助开发人员将对象属性设为私有。
When we print the object by converting it to string or traversing the object properties, it won’t print the symbol. So, the symbol can help developers to make object properties private.
<html>
<body>
<p id="output">The object is: </p>
<script>
const objId = Symbol();
const person = {
name: "John Doe",
age: 30,
[objId]: "abcd123",
}
document.getElementById("output").innerHTML += JSON.stringify(person);
</script>
</body>
</html>
如果我们执行上述程序,它会生成由网页上显示的文本组成的输出。
If we execute the above program, it will generate an output consisting of the text displayed on the webpage.
The object is: {"name":"John Doe","age":30}
Benefits of using Symbols
此处,我们解释了在实时开发中使用符号的好处。
Here, we have explained the benefits of using symbols in real-time development.
-
Unique property keys − Each symbol is unique, even if its description is different. So, you can use the symbol as a key to avoid accidental collision between the keys with the same name. Mainly, it is useful when you need to use the same instance of the object in two different code snippets and need to insert the same properties.
-
Non-iterable properties − When you add the symbol as a key in JavaScript and traverse the object properties using the for…in loop, the loop doesn’t traverse through the symbol keys.
-
Private Members − You can use the symbol to define the private properties in JavaScript classes.
-
Avoid overWriting − The symbol is unique, so it avoids overwriting similar properties.