資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學什麼是 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 中符號的概念，並透過一些示例進行了講解。
609 次瀏覽
