JavaScript Symbol是什么

JavaScript 中的符号是一种原始数据类型，在 ES6 版本更新中引入，表示一个不可变的且唯一的标识符。与字符串、布尔值、数字等其他原始类型不同，符号是保证唯一的。这意味着即使两个符号具有相同的内容，它们也是不同的实体，而不是彼此相等的。符号的主要用途是在向对象添加属性时避免命名冲突。在本教程中，我们将学习 JavaScript 中的符号。除此之外，我们还将学习如何使用它们在对象中添加属性而不会发生命名冲突。

在 JavaScript 中有两种创建符号的方法：

使用 Symbol() 方法创建符号

const mySymbol = Symbol();

使用Symbol.for()方法创建符号

const mySymbol1 = Symbol.for('myKey');

让我们通过一些示例来理解上述概念。

示例1

在以下示例中，我们将使用符号作为对象的属性名称来添加非可迭代属性。这些属性在for循环中无法访问，例如mySymbol，以避免任何命名冲突的风险。非可迭代，或非可枚举，属性在迭代过程中不可见。

文件名：index.html

<html lang="en">
<head>
   <title>What are JavaScript symbols?</title>
</head>
<body>
   <h3>What are JavaScript symbols?</h3>
   <pre id="code"></pre>

   <script>
      const code = document.getElementById("code");

      const mySymbol = Symbol("myProperty");

      const obj = {
         [mySymbol]: "This is a hidden property",
         otherProperty: "Visible property",
      };

      console.log(obj.otherProperty); // Output: Visible property
      console.log(obj[mySymbol]); // Output: This is a hidden property

      code.innerHTML = `output:  ${obj.otherProperty} <br> output:$ {obj[mySymbol]}`;
   </script>
</body>
</html>

输出

JavaScript Symbol是什么

示例2

在这个示例中，我们将使用内置的JavaScript符号，这些符号可以通过Symbol对象的静态属性访问，例如Symbol.iterator用于定义对象的默认可迭代（在for循环中可访问）属性，或者Symbol.toStringTag用于自定义对象的toString()行为。

文件名：index.html

<html lang="en">
<head>
   <title>What are JavaScript symbols?</title>
</head>
<body>
   <h3>What are JavaScript symbols?</h3>
   <pre id="code"></pre>

   <script>
      const code = document.getElementById("code");

      const arr = [1, 2, 3];

      console.log(arr[Symbol.iterator]); // Output: [Function: values]

      code.innerHTML = `output: ${arr[Symbol.iterator]}`;
   </script>
</body>
</html>

输出

JavaScript Symbol是什么

示例3

在这个示例中，我们将创建符号firstName和lastName来表示一个人对象的属性。通过使用符号作为属性名，我们可以确保这些属性是唯一的，从而避免属性名冲突。

文件名：index.html

<html lang="en">
<head>
   <title>What are JavaScript symbols?</title>
</head>
<body>
   <h3>What are JavaScript symbols?</h3>
   <pre id="code"></pre>

   <script>
      const code = document.getElementById("code");

      const firstName = Symbol("firstName");
      const lastName = Symbol("lastName");

      const person = {
         [firstName]: "John",
         [lastName]: "Doe",
      };

      console.log(person[firstName]); // Output: John
      console.log(person[lastName]); // Output: Doe

      console.log(Object.getOwnPropertySymbols(person)); // Output: [Symbol(firstName), Symbol(lastName)]

      code.innerHTML = `output:  ${person[firstName]};$ {
         person[lastName]
      };`;
   </script>
</body>
</html>