JavaScript符号基础

目录

介绍

什么是JavaScript符号？

JavaScript Symbol的好处和用法？

创建新的JavaScript Symbol始终是唯一的

带说明的JavaScript符号，主要用于调试

具有相同描述的 JavaScript Symbol不相等

调用新实例时的Symbol()函数

JavaScript Symbol类型并转换为字符串

使用typeof运算符检查类型

在alert函数内调用类型Symbol

.toString（）的显式用法和description属性的用法

使用JavaScript符号作为对象键

让我们尝试使用for-in循环进行枚举

直接访问符号属性

Symbol.for方法

防止属性名称冲突

摘要

---

介绍

在撰写本文时，符号(Symbol)是最新的JavaScript原语。实际上，许多开发人员并不知道此功能的存在，包括我在内。为语言添加新功能意味着对该语言有好处，我们应该了解特定功能的特殊用法。因此，我们将解决JavaScript Symbol的好处及其特殊用法。好，那就开始吧。

什么是JavaScript符号？

JavaScript Symbol是ES6中引入的一种新的原始类型。另外，符号(Symbol)是唯一且不变的值。创建一个新符号(Symbol)非常容易，您只需要调用Symbol()函数即可，该函数每次被调用时都会返回一个唯一的符号(Symbol)。将在后面的部分中介绍示例。

JavaScript Symbol的好处和用法？

创建新的JavaScript Symbol始终是唯一的

如前一节所述，我们说过要创建一个新的JavaScript符号，我们只需要调用Symbol函数即可。值得一提的是，符号(Symbol)没有字面形式。因此，我们只能使用Symbol()函数来创建一个。

请参见下面的示例。

//how to create a Symbol 

const mySymbol1 = Symbol();
const mySymbol2 = Symbol();

console.log(mySymbol1, mySymbol2);
//output: Symbol() Symbol()

带说明的JavaScript符号，主要用于调试

现在，我们已经看到了如何创建一个新的JavaScript Symbol。别忘了，Symbol()函数需要一个可选的字符串参数，该参数代表的描述Symbol。根据我的经验，该描述用于调试目的，而不是访问其Symbol本身。

请参阅以下示例：

//* how to create a Symbol with description

const mySymbolWithDescription1 = Symbol("First description");
const mySymbolWithDescription2 = Symbol("Second description");

console.log(mySymbolWithDescription1, mySymbolWithDescription2);
//output: Symbol(First description) Symbol(Second description)

具有相同描述的 JavaScript Symbol不相等

符号(Symbol)始终保证100％是唯一的。请记住，该描述只是一个不影响任何东西的label。同样，该描述仅是label，不多不少。

请参阅以下示例：

//Symbol with same description aren't equal 

const mySymbol_1 = Symbol("Cat");
const mySymbol_2 = Symbol("Cat");

console.dir(mySymbol_1 === mySymbol_2);
//output: false

调用新实例时的Symbol()函数

第一次学习JavaScript Symbol时，我以为可以使用Symbol()函数创建一个新实例。最终，它引发一个错误：当创建新实例时提示“Symbol is not a constructor”。

请参阅以下示例：

//how not to create a Symbol

try {
    const _newSymbols = new Symbol();
} catch (error) {
    console.dir(error.message);   //output: Symbol is not a constructor
}

因此，如您在上面的示例中看到的那样，使用new关键字创建的Symbol新实例是行不通的，因为基于前面的部分，我们必须直接调用Symbol()函数。

JavaScript Symbol类型并转换为字符串

使用typeof运算符一直很有趣。因此，结果将是一个 symbol而不是对象，因为它是原始的。

根据我的观察，JavaScript类型支持对string的隐式转换。但是，Symbol类型不会自动转换。您确实需要显式调用.toString()方法。

使用typeof运算符检查类型

//Let's check if the type name of Symbol 
const mySymbolType = Symbol();

console.log(typeof mySymbolType);
//output: symbol  

在alert函数内调用类型Symbol

const mySymbolType = Symbol();

alert(mySymbolType);
//output: Uncaught TypeError: Cannot convert a Symbol value to a string

.toString（）的显式用法和description属性的用法

const _newSymbols2 = Symbol("Hello");
console.log(_newSymbols2.toString());  //output: Symbol(Hello)
console.log(_newSymbols2.description); //output: Hello

使用JavaScript符号作为对象键

到目前为止，JavaScript对象属性键可以是字符串或符号。此外，Symbol尝试枚举对象键时，不会列出具有属性类型的对象。因此，我认为，当您枚举时，它看起来是隐藏的，但是当您使用[]token时，它就不那么明显了。

请参阅以下示例：

const customerSymbol = Symbol("Object date created");

let customer = {
    name: "Jin Vincent Necesario",
    [customerSymbol]: new Date()
};

console.log(customer); 

输出：

让我们尝试使用for-in循环进行枚举

for (const key in customer) {
    if (customer.hasOwnProperty(key)) {
        console.log(`customer.${key} is equals to ${customer[key]}`);
    }
}
//output: customer.name is equals to Jin Vincent Necesario
//Note: The symbol-key didn't appear to be part of the object

直接访问符号属性

但是，我们可以通过[]令牌访问包含符号的内容。

console.log("customer[customerSymbol] is equals to " + customer[customerSymbol].getFullYear());
//output: customer[customerSymbol] is equals to 2020

但是，当然，还有使用Object.getOwnPropertySymbols() 方法直接访问符号的另一种方法。

console.log(Object.getOwnPropertySymbols(customer));

输出：

Symbol.for方法

基本上，Symbol对象维护键/值的注册表，其中键是描述，值是符号。现在，使用Symbol.for方法时，它将添加到注册表中，并且该方法返回该符号。因此，如果我们尝试使用现有描述创建符号，则将对其进行检索。

//create a symbol using for method
const mySymbolFor = Symbol.for("My Unique Description");

let product = {
    name: "Toyota",
    [mySymbolFor]: "Toyota Hilux G"
};

const mySymbolFor2 = Symbol.for("My Unique Description");

console.log(mySymbolFor === mySymbolFor2); //output:true    

防止属性名称冲突

现在，您已经走了这么远。实际上，JavaScript Symbol可能会让你的手很脏。而且，您可能会问：“有什么好处？”。

实际上，当库希望向对象添加属性而又不存在名称冲突的风险时，它们非常有用。

摘要

• 当您尝试使用新实例时，将使用Symbol()函数调用符号，这将引发错误。
• JavaScript Symbol始终是唯一的。
• 符号描述是专门用于调试的，具有相同的描述并不意味着符号是等效的。
• 如果需要，应将JavaScript符号显式转换为string。
• 可以在对象属性中使用JavaScript以防止属性名称冲突。
• Symbol.for有一个用于键值对的表注册表，它检索现有的符号描述，否则将创建一个新的符号描述。