什麼是 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 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始學習
廣告