什么是 JavaScript 符号？

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>

输出

示例 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>

输出

示例 3

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

文件名：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>

输出

结论

JavaScript 符号是 ES6 中引入的一种唯一的原始数据类型。它提供了一种创建唯一且不可变标识符的好方法。这些符号广泛用于向对象添加不可枚举属性，而不会出现命名冲突的风险。我们学习了 JavaScript 中符号的概念，并通过一些示例进行了讲解。

更新于：2023年8月16日

609 次浏览

启动您的职业生涯

通过完成课程获得认证

开始学习
广告