在 JavaScript 中,Symbol 是一种原始数据类型,并且是在 ECMAScript 6(ES6)中引入的。它可以使用 Symbol 构造器来创建。
符号是不可变的并且是唯一的,与其他原始数据类型如字符串或数字不同。由于它们提供了一种创建私有对象属性的方式以及避免命名冲突,因此在需要唯一标识符的情况下特别有用。以下是使用符号时应记住的几点:
语法
你可以按照以下语法使用 Symbol() 函数创建一个新的符号:
const sym = Symbol([description]);
这里的 description 是一个可选参数,它指定了符号描述,可以通过 description 属性访问。
Symbol 属性
下表列出了所有符号的属性:
| 序号 | 名称 & 描述 | 
| 1 | description | 
| 2 | asyncIterator | 
| 3 | hasInstance | 
| 4 | isConcatSpreadable | 
| 5 | iterator | 
| 6 | match | 
| 7 | matchAll | 
| 8 | replace | 
| 9 | search | 
| 10 | species | 
| 11 | split | 
| 12 | toStringTag | 
Symbol 方法
下表列出了所有符号的方法:
| 序号 | 名称 & 描述 | 
| 1 | for() | 
| 2 | keyFor() | 
| 3 | toString() | 
| 4 | valueOf() | 
示例
示例:创建 Symbol
在下面的示例中,我们使用 Symbol() 函数创建了一个新的符号。同时,在定义 sym2 符号时,我们还传递了一个字符串参数。
你可以看到 sym1 的类型是 symbol,这是一个原始值。
<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>
输出: 当执行上述脚本时,它会生成包含网页上显示的文本的输出。
The sym1 is: Symbol()
The type of sym1 is: symbol
The sym2 is: Symbol(description)
示例:访问 Symbol 描述
让我们看下面的示例,我们将使用 .description 来获取符号的描述。
<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>
输出: 执行上述脚本后,输出窗口会弹出,显示网页上的文本。
The sym description of the symbol is : Welcome to Tutorials Point...
示例:每个 Symbol 都是唯一的
在下面的示例中,我们定义了 sym1 和 sym2 两个符号。然后比较这两个变量,并相应地打印信息。
虽然这两个符号看起来相似,但实际上是不同的,这一点可以在输出中看到。
<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>
输出: 执行后,返回的文本表明两个符号不相等。
Sym1 and Sym2 are not equal.
示例:将 Symbol 用作对象键
符号的主要用途是作为对象键。在此示例中,我们使用 objId 符号作为键。
当你通过将其转换为字符串或遍历对象属性来打印对象时,它不会打印符号。因此,符号可以帮助开发人员使对象属性私有化。
<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>
输出: 如果执行上述程序,它将生成包含网页上显示的文本的输出。
The object is: {"name":"John Doe","age":30}
使用符号的好处
以下是使用符号在实际开发中的好处:
- 
唯一的属性键 — 每个符号都是唯一的,即使它们的描述不同。因此,你可以使用符号作为键来避免具有相同名称的键之间的意外冲突。主要在你需要在同一对象的不同代码片段中使用相同的实例并且需要插入相同的属性时有用。
- 
非可迭代属性 — 当你在 JavaScript 中将符号添加为键并通过 for...in循环遍历对象属性时,循环不会遍历符号键。
- 
私有成员 — 可以使用符号在 JavaScript 类中定义私有属性。
- 
避免覆盖 — 由于符号是唯一的,因此它可以避免覆盖类似的属性。