介绍

什么是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 descriptionconst 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 Symboltry {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有一个用于键值对的表注册表，它检索现有的符号描述，否则将创建一个新的符号描述。

JavaScript符号基础相关推荐

JavaScript正则表达式-基础入门
JavaScript正则表达式-基础入门字符类,如 /w/ 为匹配任何ASCII字符组成的字符重复, 如 /w{1,3}/ 为匹配一到三个单词选择.分组和引用指定匹配位置修饰符直接量字符 ...
JavaScript语言基础(二)
一.之前介绍了JavaScript语言基础的关键字.标识符.常用的数据类型,文章地址:JavaScript语言基础(一) ,下面来介绍JavaScript基础中的常量和变量. 1.常量:当程序运行时, ...
JavaScript语言基础(一)
1.通过学习JavaScript语言基础,我们应该了解关键字与标识符.掌握JavaScript常用的数据类型.熟悉常量与变量.熟悉运算符和表达式. JavaScript语言基础知识框架如下图所示: 此 ...
JavaScript - 语言基础
JavaScript - 语言基础一.用法 HTML 中的脚本必须位于 <script> 与 </script> 标签之间,script标签中可以写执行代码.可以写函数.也可 ...
HTML，css和JavaScript的基础学习—css篇
HTML,css和JavaScript的基础学习-css篇 1.css是什么?由什么组成? 层叠样式表,定制html元素的显示样式,美化页面,对于前端页面的搭建十分重要. 由三部分组成:选择器,属性, ...
ArcGIS API for JavaScript之基础篇（二）
ArcGIS API for JavaScript之基础篇(二) 上一篇文章介绍了Map MapView SceneView的基本知识以及简单的demo.最近几天学习了WebMap WebScene ...
javascript 符号_掌握javascript es6符号
javascript 符号 JavaScript is one of the cores of web development. JavaScript, also known as ECMAScrip ...
JavaScript入门基础知识
JavaScript入门基础学习 1.三种引用JavaScript的方式 1.1行内式 <input type = "button" value="点我试试&quo ...
JavaScript的基础学习(一)
文章目录 JavaScript 的基础学习(一) 1 JavaScript 概述 1.1 JavaScript 的历史 1.2 ECMAScript 1.3 JavaScript的引入方式 2 Jav ...

JavaScript符号基础

介绍

什么是JavaScript符号？

JavaScript Symbol的好处和用法？

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

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

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

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

JavaScript Symbol类型并转换为字符串

使用typeof运算符检查类型

在alert函数内调用类型Symbol

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

使用JavaScript符号作为对象键

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

直接访问符号属性

Symbol.for方法

防止属性名称冲突

摘要

JavaScript符号基础相关推荐

最新文章

热门文章