


Explication détaillée du type de symbole JavaScript, des attributs cachés et du registre global
Cet article vous apporte des connaissances pertinentes sur javascript, qui présente principalement des problèmes liés aux types de symboles, aux attributs cachés et au registre global, y compris la description des types de symboles, et le symbole ne sera pas implicitement converti en chaînes si vous avez d'autres questions. , jetons-y un coup d'œil ci-dessous. J'espère que cela sera utile à tout le monde.
[Recommandations associées : Tutoriel vidéo Javascript, front-end Web]
Introduction aux symboles
Le type Symbol
est un type spécial en JavaScript
Tapez, d'autant plus que toutes les valeurs de type Symbole
sont différentes les unes des autres. Nous pouvons utiliser "Symbol" pour représenter une valeur unique. Voici un exemple de création d'un objet Symbol
: Symbol
类型是JavaScript
中的一种特殊的类型,特殊在所有的Symbol
类型值都互不相同。我们可以使用“Symbol”来表示唯一的值,下面是创建Symbol
对象的案例:
let id = Symbol();
这样我们就创建了一个Symbol
类型的值,并把这个值存储在了变量id
中。
Symbol类型的描述
我们在创建一个Symbol
类型变量的时候,可以在参数中传入一些秒属性的字符串,用于描述这个变量的用途信息。
例如:
let id1 = Symbol('狂拽酷炫吊炸天的小明的id'); let id2 = Symbol('低调奢华有内涵的婷婷的id');
Symbol
类型在任何时候都是不同的,即使他们拥有相同的描述信息,描述只是一个标签,除此之外就没有别的用途了,例如:
let id1 = Symbol('id'); let id2 = Symbol('id'); console.log(id1==id2);//false
这个标签存在的意义,个人认为和Symbol
不能直观的看到内部具体值的特性有关,通过添加一个描述信息,让我们对变量的用途有更直观的了解。
Symbol不会隐式转字符串
JavaScript
中的大多数类型都可以直接转换成字符串类型输出,所以我们不能直观的看到它的值到底是什么,例如我们可以直接用alert(123)
把数字123
转换成字符串弹出。
但是Symbol
类型比较特殊,它不能直接转换,例如:
let id = Symbol(); alert(id);//报错,不能把Symbol类型转为字符串
JavaScript
中的Symbol
类型不能转成字符串是由于其内在的防治语言混乱的“语言保护”机制,因为字符串和Symbol
在本质上有着区别,不应该将其中一个转换成另一个。
试想一下,如果Symbol
可以转为字符串,那么它就变成了一个生成独一无二字符串的函数,就不再具备独立数据类型的必要。
如果我们真的想知道Symbol
变量的值,我们可以使用.toString()
方法,如下所示:
let id = Symbol('this is identification'); console.log(id.toString());//Symbol(this is identification);
或者使用.description
属性,获取描述信息:
let id = Symbol('加油,奥利给'); console.log(id.description);//加油,奥利给”
Symbol类似作为对象的属性键
根据JavaScript
的规范,只有两种类型的值可以作为对象的属性键:
- 字符串
- Symbol
如果使用其他类型,则会隐式的转为字符串类型。对象的键在前面的章节有详细的介绍,这里不再重复。
创建Symbol键
将Symbol
作为键值有两种方法:
例1:
let id = Symbol('id'); let user = {}; user[id] = 'id value';//添加Symbol键 console.log(user[id]);//id value
例2:
let id = Symbol('id'); let user = { [id]:'id value',//注意这里的方括号 }; console.log(user[id]);
以上两个案例展示了在对象中插入Symbol
类型作为键的用法,需要注意的是,在访问属性时需要使用obj[id]
而不是obj.id
,因为obj.id
代表的是obj[‘id’]
。
如果我们使用Symbol
作为对象的键会有什么效果呢?
for…in中被跳过
Symbol
非常明显的一个特征是,如果对象中使用Symbol
作为键,那么使用for…in
语句是访问不到Symbol
类型的属性的。
举个例子:
let id = Symbol('id'); let user = { name : 'xiaoming', [id] : 'id', }; for (let key in user) console.log(user[key]);
执行以上代码,得到以下结果:
> xiaoming
可以发现,[id]
对象的值没有被打印出来,说明在对象属性列表中,使用for … in
会自动忽略Symbol
类型的键。
同样的,Object.keys(user)
也会忽略所有的Symbol
类型的键。
这样的特性能带来非常有用的效果,例如我们可以创建只能自己能用的属性。
虽然我们没有办法直接获取到Symbol
键,但是Object.assign
方法能够复制所有的属性:
let id = Symbol(); let obj = { [id] : '123' } let obj2 = Object.assign({},obj); console.log(obj2[id]);
这并不影响Symbol
的隐藏属性,因为复制后的对象仍然无法获取Symbol
let tool = {//张三写好了的Tool usage : "Can do anything", } let name = Symbol("My tool obj"); tool[name] = "This is my tool"; console.log(tool[name]);
Symbol
. > et put Cette valeur est stockée dans la variable id
. 🎜Description du type de symbole
🎜Lorsque nous créons une variable de typeSymbol
, nous pouvons transmettre certaines chaînes avec des attributs de secondes dans les paramètres Informations utilisées pour. décrire le but de cette variable. Par exemple : 🎜
let tool = {//张三写好了的Tool usage : "Can do anything", } tool.usage = "Boom Boom"; console.log(tool.usage);
Symbole
sont différents à tout moment, même s'ils ont les mêmes informations de description, la description n'est qu'une étiquette et n'a aucun autre but. Par exemple : 🎜. let id1 = Symbol.for('id');//注册表内没有名为id的Symbol,创建并返回 let id2 = Symbol.for('id');//注册表内已有名为id的Symbol,直接返回 console.log(id1===id2);//true
Symbol
ne peut pas voir intuitivement la valeur spécifique interne. En ajoutant des informations de description, nous pouvons avoir une compréhension plus intuitive de l'utilisation des variables d'apprentissage. . 🎜Le symbole ne sera pas converti implicitement en chaîne
🎜La plupart des types enJavaScript
peuvent être directement convertis en sortie de type chaîne, nous ne pouvons donc pas le faire intuitivement. voir quelle est sa valeur. Par exemple, nous pouvons utiliser directement alert(123)
pour convertir le nombre 123
en une chaîne et l'afficher. Cependant, le type
Symbol
est spécial et ne peut pas être converti directement. Par exemple : 🎜let id = Symbol.for('id');//注册表内没有名为id的Symbol,创建并返回 let name = Symbol.keyFor(id); console.log(name);//id
Symbol
en JavaScript
ne peut pas. Les chaînes doivent être converties en caractères en raison de leur mécanisme inhérent de « protection de la langue » pour éviter toute confusion de langue. Étant donné que les chaînes et le Symbole
sont intrinsèquement différents, l'une ne doit pas être convertie en l'autre. 🎜🎜Imaginez, si Symbol
peut être converti en chaîne, alors il devient une fonction qui génère une chaîne unique et il n'est pas nécessaire d'avoir un type de données indépendant. 🎜🎜Si nous voulons vraiment connaître la valeur de la variable Symbol
, nous pouvons utiliser la méthode .toString()
comme suit : 🎜let id = Symbol('id');//局部Symbol let name = Symbol.keyFor(id); console.log(name);//undefined
. attribut description
, obtenez les informations de description : 🎜rrreee🎜Le symbole est similaire à la clé d'attribut d'un objet🎜🎜Selon les spécifications de JavaScript
, seuls deux types de valeurs peuvent être utilisés comme clés d'attribut d'un objet : 🎜- String
- Symbol
Créer une clé de symbole
🎜Il existe deux façons d'utiliserSymbole
comme valeur de clé :Exemple 1 :🎜rrreee🎜Exemple 2 :🎜 rrreee🎜Les deux cas ci-dessus montrent l'utilisation de l'insertion du type
Symbol
comme clé dans un objet. Il convient de noter que lors de l'accès aux propriétés, vous devez utiliser obj[id].
au lieu de obj.id
, car obj.id
représente obj['id']
. 🎜🎜Quel sera l'effet si nous utilisons Symbole
comme clé de l'objet ? 🎜for…in est ignoré
🎜Symbol
Une caractéristique très évidente est que si Symbol
est utilisé dans l'objet As une clé, vous ne pouvez pas accéder aux attributs de type Symbol
à l'aide de l'instruction for...in
. 🎜🎜Par exemple : 🎜rrreee🎜Exécutez le code ci-dessus et obtenez les résultats suivants :🎜rrreee🎜On peut constater que la valeur de l'objet [id]
n'est pas imprimée, indiquant que dans le liste d'attributs d'objet, utilisez for … in ignorera automatiquement les clés de type Symbol
. 🎜🎜De même, Object.keys(user)
ignorera également toutes les clés de type Symbol
. 🎜🎜Une telle fonctionnalité peut apporter des effets très utiles, par exemple, nous pouvons créer des attributs qui ne peuvent être utilisés que par nous-mêmes. 🎜🎜Bien que nous n'ayons aucun moyen d'obtenir directement la clé Symbol
, la méthode Object.assign
peut copier tous les attributs : 🎜rrreee🎜Cela n'affecte pas Symbol code>, car l'objet copié ne peut toujours pas obtenir la clé <code>Symbol
. 🎜隐藏自定义属性
由于Symbol
既不能直接转为字符串,我们没有办法直观的获得它的值,又不能通过for … in
获得对象的Symbol
属性,也就是说,如果没有Symbol
变量本身,我们就没有办法获得对象内部的对应属性。
因此,通过Symbol
类型的键值,我们可以隐藏属性,这些属性只能我们自己访问,其他人都看不到我们的属性。
举个例子:
我们在开发的过程中,需要和同事“张三”合作,而这个张三创建了一个非常好用的工具Tool
,Tool
是一个对象类型,我们想白嫖张三的Tool
,并在此基础上添加一些自己的属性。
我们就可以通过添加Symbol
类型的键:
let tool = {//张三写好了的Tool usage : "Can do anything", } let name = Symbol("My tool obj"); tool[name] = "This is my tool"; console.log(tool[name]);
以上示例展示了如何在别人写好的对象上添加自己的属性,那么为什么要使用Symbol
类型而不是常规的字符串呢?
原因如下:
- 对象
tool
是别人写好的代码,原则上我们不应该去修改别人的代码,这样会造成风险; - 避免命名冲突,我们直接使用字符串很有可能会和别人原有的属性键冲突,造成严重的后果;
- 使用
Symbol
永远不会发生命名冲突,因为Symbol
都是不同的; - 别人无法访问
Symbol
类型的键,相当于不会和别人的代码冲突;
错误示范:
如果我们不使用Symbol
类型,很可能出现以下情况:
let tool = {//张三写好了的Tool usage : "Can do anything", } tool.usage = "Boom Boom"; console.log(tool.usage);
以上代码由于重复使用”usage”,从而重写了原属性,会造成对象原功能异常。
Symbol全局注册表
所有的Symbol
变量都是不同的,即使他们有用相同的标签(描述)。
有些时候,我们希望通过一个字符串名称(标签),访问同一个Symbol
对象,例如我们在代码的不同地方访问相同的Symbol
。
JavaScript
会维护一个全局的Symbol
注册表,我们可以通过向注册表中插入Symbol
对象,并为对象起一个字符串名称访问该对象。
向注册表插入或者读取Symbol
对象需要使用Symbol.for(key)
方法,如果注册表中有名为key
的对象,就返回该对象,否则就插入新对象再返回。
举个例子:
let id1 = Symbol.for('id');//注册表内没有名为id的Symbol,创建并返回 let id2 = Symbol.for('id');//注册表内已有名为id的Symbol,直接返回 console.log(id1===id2);//true
我们通过Symbol.for(key)
就能以全局变量的方式使用Symbol
对象,并使用一个字符串标记对象的名字。
相反的,我们还可以使用Symbol.keyFor(Symbol)
反向的从对象获取名称。
举个例子:
let id = Symbol.for('id');//注册表内没有名为id的Symbol,创建并返回 let name = Symbol.keyFor(id); console.log(name);//id
Symbol.keyFor()
函数只能用在全局Symbol
对象上(使用Symbol.for
插入的对象),如果用在非全局对象上,就会返回undefined
。
举个例子:
let id = Symbol('id');//局部Symbol let name = Symbol.keyFor(id); console.log(name);//undefined
系统Symbol
JavaScript
有许多系统Symbol
,例如:
Symbol.hasInstance
Symbol.iterator
Symbol.toPrimitive
它们各有用途,我们在后面的会逐步介绍道这些独特的变量。
总结
-
Symbol
对象的值是唯一的; -
Symbol
可以添加一个标签,并通过标签在全局注册表中查询对象的实体; -
Symbol
作为对象的键无法被for … in
探测到; - 我们可以通过
Symbol
到全局注册表访问全局的Symbol
对象;
但是,Symbol
并不是完全隐藏的,我们可以通过Object.getOwnPropertySymbols(obj)
获取对象所有的Symbol
,或者通过Reflect.ownKeys(obj)
获取对象所有的键。
【相关推荐:javascript视频教程、web前端】
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de reconnaissance vocale en ligne Introduction : Avec le développement continu de la technologie, la technologie de reconnaissance vocale est devenue une partie importante du domaine de l'intelligence artificielle. Le système de reconnaissance vocale en ligne basé sur WebSocket et JavaScript présente les caractéristiques d'une faible latence, d'un temps réel et d'une multiplateforme, et est devenu une solution largement utilisée. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de reconnaissance vocale en ligne.

WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de réservation en ligne. À l'ère numérique d'aujourd'hui, de plus en plus d'entreprises et de services doivent fournir des fonctions de réservation en ligne. Il est crucial de mettre en place un système de réservation en ligne efficace et en temps réel. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de réservation en ligne et fournit des exemples de code spécifiques. 1. Qu'est-ce que WebSocket ? WebSocket est une méthode full-duplex sur une seule connexion TCP.

Introduction à l'utilisation de JavaScript et de WebSocket pour mettre en œuvre un système de commande en ligne en temps réel : avec la popularité d'Internet et les progrès de la technologie, de plus en plus de restaurants ont commencé à proposer des services de commande en ligne. Afin de mettre en œuvre un système de commande en ligne en temps réel, nous pouvons utiliser les technologies JavaScript et WebSocket. WebSocket est un protocole de communication full-duplex basé sur le protocole TCP, qui peut réaliser une communication bidirectionnelle en temps réel entre le client et le serveur. Dans le système de commande en ligne en temps réel, lorsque l'utilisateur sélectionne des plats et passe une commande

JavaScript et WebSocket : Construire un système efficace de prévisions météorologiques en temps réel Introduction : Aujourd'hui, la précision des prévisions météorologiques revêt une grande importance pour la vie quotidienne et la prise de décision. À mesure que la technologie évolue, nous pouvons fournir des prévisions météorologiques plus précises et plus fiables en obtenant des données météorologiques en temps réel. Dans cet article, nous apprendrons comment utiliser la technologie JavaScript et WebSocket pour créer un système efficace de prévisions météorologiques en temps réel. Cet article démontrera le processus de mise en œuvre à travers des exemples de code spécifiques. Nous

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

Utilisation : En JavaScript, la méthode insertBefore() est utilisée pour insérer un nouveau nœud dans l'arborescence DOM. Cette méthode nécessite deux paramètres : le nouveau nœud à insérer et le nœud de référence (c'est-à-dire le nœud où le nouveau nœud sera inséré).

Introduction à la méthode d'obtention du code d'état HTTP en JavaScript : Dans le développement front-end, nous devons souvent gérer l'interaction avec l'interface back-end, et le code d'état HTTP en est une partie très importante. Comprendre et obtenir les codes d'état HTTP nous aide à mieux gérer les données renvoyées par l'interface. Cet article explique comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournit des exemples de code spécifiques. 1. Qu'est-ce que le code d'état HTTP ? Le code d'état HTTP signifie que lorsque le navigateur lance une requête au serveur, le service
