ES6 en action: symboles et leurs utilisations-js tutoriel-php.cn

ES6 in Action: Symbols and Their Uses

ES2015 présente certaines fonctionnalités linguistiques auxquelles les développeurs attendent depuis longtemps, mais aussi des fonctionnalités peu connues qui n'ont pas été évidentes, comme le symbole.

Symbole est un nouveau type de données primitif, une balise unique qui est garantie pour ne pas entrer en conflit avec d'autres symboles. En ce sens, vous pouvez considérer le symbole comme une sorte d'uuid (un identifiant unique universel). Voyons comment fonctionne le symbole et ce que nous pouvons en faire.

Points clés

es6 introduit un nouveau symbole de type de données primitif, qui est une balise unique qui ne confronte jamais à d'autres symboles, ce qui en fait une bonne alternative aux chaînes ou aux entiers en tant que constantes de classe / module.
peut être utilisé comme des clés d'attribut d'objet, fournissant des clés uniques qui ne sont pas en conflit avec les attributs ou les méthodes existants, et n'incluront pas ces clés lorsque l'objet est sérialisé.
Le symbole public est une propriété prédéfinie de la fonction symbole utilisée pour personnaliser le comportement de certaines fonctionnalités linguistiques (telles que les itérateurs) et implémenter de nouvelles fonctionnalités.
ES6 contient un registre mondial de symboles qui permet le stockage et la récupération des symboles dans différents contextes d'exécution tels que des documents et des iframes intégrés ou des travailleurs de service.

Créer un nouveau symbole

La création d'un nouveau symbole est très simple, il suffit d'appeler la fonction symbole. Notez qu'il s'agit d'une fonction standard, pas d'un constructeur d'objets. Essayer de l'appeler avec le nouvel opérateur entraîne un type Eerror. Chaque fois que vous appelez la fonction Symbole, vous obtenez une valeur nouvelle et complètement unique.

const foo = Symbol();
const bar = Symbol();

foo === bar // false

Copier après la connexion

Vous pouvez également créer un symbole tagué en passant une chaîne comme premier paramètre. Une balise n'affecte pas la valeur du symbole, mais est utile pour le débogage, et la balise sera affichée si la méthode de symbole ToString () est appelée. Plusieurs symboles peuvent être créés avec les mêmes balises, mais cela n'a aucun avantage, ce qui peut entraîner une confusion.

let foo = Symbol('baz');
let bar = Symbol('baz');

foo === bar // false
// console.log(foo); // Symbol(baz)

Copier après la connexion

But du symbole

Le symbole est un bon remplacement pour les chaînes ou les entiers comme constantes de classe / module:

class Application {
  constructor(mode) {
    switch (mode) {
      case Application.DEV:
        // 设置开发环境的应用程序
        break;
      case Application.PROD:
        // 设置生产环境的应用程序
        break;
      default:
        throw new Error('无效的应用程序模式：' + mode);
    }
  }
}

Application.DEV = Symbol('dev');
Application.PROD = Symbol('prod');

// 使用示例
const app = new Application(Application.DEV);

Copier après la connexion

Les chaînes et les entiers ne sont pas des valeurs uniques; L'utilisation du symbole nous permet d'être plus confiant dans les valeurs fournies.

Une autre utilisation intéressante du symbole est une clé d'attribut d'objet. Si vous avez déjà utilisé des objets JavaScript comme carte de hachage (tableaux d'association en termes PHP et dictionnaires en termes python), vous serez familier avec l'utilisation de la notation du support carré pour obtenir / définir les propriétés:

const foo = Symbol();
const bar = Symbol();

foo === bar // false

Copier après la connexion

Utilisez la notation du support carré, nous pouvons également utiliser le symbole comme clé d'attribut. Il y a plusieurs avantages à le faire. Tout d'abord, vous pouvez être sûr que les clés basées sur des symboles ne sont jamais en conflit, contrairement aux clés de chaîne qui peuvent entrer en conflit avec les propriétés ou les méthodes existantes de l'objet. Deuxièmement, ils ne sont pas énumérés dans le pour ... en boucle et sont ignorés par des fonctions telles que object.keys (), object.getownpropertyNames () et json.strifify (). Cela les rend idéaux pour les propriétés que vous ne souhaitez pas inclure lors de la sérialisation des objets.

let foo = Symbol('baz');
let bar = Symbol('baz');

foo === bar // false
// console.log(foo); // Symbol(baz)

Copier après la connexion

Cependant, il convient de noter que l'utilisation du symbole comme clé ne garantit pas la confidentialité. De nouveaux outils sont disponibles pour vous permettre d'accéder aux clés de propriété basées sur des symboles. Object.getownPropertySymbols () renvoie un tableau de toutes les clés basées sur des symboles, tandis que Reflect.ownKeys () renvoie un tableau de toutes les clés, y compris le symbole.

class Application {
  constructor(mode) {
    switch (mode) {
      case Application.DEV:
        // 设置开发环境的应用程序
        break;
      case Application.PROD:
        // 设置生产环境的应用程序
        break;
      default:
        throw new Error('无效的应用程序模式：' + mode);
    }
  }
}

Application.DEV = Symbol('dev');
Application.PROD = Symbol('prod');

// 使用示例
const app = new Application(Application.DEV);

Copier après la connexion

Symbole public

Les propriétés de clé de symbole sont en fait invisibles au code avant ES6, elles sont idéales pour ajouter de nouvelles fonctionnalités aux types de JavaScript existants sans casser la compatibilité en arrière. Le soi-disant symbole "public" est une propriété prédéfinie de la fonction symbole utilisée pour personnaliser le comportement de certaines fonctionnalités linguistiques et implémenter de nouvelles fonctions telles que les itérateurs.

symbol.iterator est un symbole public utilisé pour attribuer une méthode spéciale à un objet qui permet l'itération:

const data = [];

data['name'] = 'Ted Mosby';
data['nickname'] = 'Teddy Westside';
data['city'] = 'New York';

Copier après la connexion

Types intégrés String, Array, TypedArray, Map et Set ont une méthode Symbol.iterator par défaut qui est appelée lors de l'utilisation des instances de ces types dans un ... de boucle ou lorsque vous utilisez des opérateurs d'extension. Les navigateurs ont également commencé à utiliser la touche symbole.iterator pour permettre d'itérer les structures DOM (telles que NodeList et HTMLCollection) de la même manière.

Enregistrement global

La spécification

définit également un registre de symboles à l'échelle de l'exécution, ce qui signifie que vous pouvez stocker et récupérer des symboles dans différents contextes d'exécution, comme entre un document et un iframe ou un travailleur de service intégré.

symbole.for (key) récupère le symbole de la clé donnée du registre. Si la clé n'existe pas de symbole, un nouveau symbole est renvoyé. Comme vous pouvez vous y attendre, les appels ultérieurs à la même clé renverront le même symbole.

symbol.keyfor (symbole) vous permet de récupérer les touches pour un symbole donné. Appeler la méthode avec un symbole qui n'existe pas dans le registre renverra indéfini:

const user = {};
const email = Symbol();

user.name = 'Fred';
user.age = 30;
user[email] = 'fred@example.com';

Object.keys(user); // ['name', 'age']
Object.getOwnPropertyNames(user); // ['name', 'age']
JSON.stringify(user); // {"name":"Fred","age":30}

Copier après la connexion

case utilisateur

Dans certains cas d'utilisation, l'utilisation du symbole peut fournir des avantages. Un cas d'utilisation qui a été mentionné dans l'article précédent est lorsque vous souhaitez ajouter une propriété "cachée" à un objet qui ne sera pas inclus lorsque l'objet est sérialisé.

Les auteurs de la bibliothèque peuvent également utiliser le symbole pour ajouter en toute sécurité des propriétés ou des méthodes aux objets clients sans se soucier de l'écrasement des clés existantes (ou leurs clés sont écrasées par un autre code). Par exemple, les composants du widget (tels que les sélecteurs de date) sont souvent initialisés à l'aide de diverses options et doivent être stockés dans un état quelque part. Il n'est pas idéal d'attribuer une instance de widget à un objet d'élément DOM car la propriété peut entrer en conflit avec une autre clé. L'utilisation de touches basées sur des symboles peut contourner intelligemment ce problème et vous assurer que votre instance de widget n'est pas écrasée. Pour un aperçu plus détaillé du billet de blog de Mozilla Hacks ES6 en profondeur: Symboles.

Prise en charge du navigateur

Si vous souhaitez expérimenter avec Symbole, le support des navigateurs grand public est assez bon. Comme vous pouvez le voir, les versions actuelles de Chrome, Firefox, Microsoft Edge et Opera prennent tous en charge le type de symbole nativement, ainsi que Android 5.1 et iOS 9 sur les appareils mobiles. Si vous devez prendre en charge les anciens navigateurs, vous pouvez également utiliser Polyfill.

Conclusion

Bien que la principale raison de l'introduction du symbole semble être de faciliter l'ajout de nouvelles fonctionnalités à la langue sans casser le code existant, ils ont des utilisations intéressantes. Tous les développeurs devraient au moins avoir une compréhension de base d'eux et se familiariser avec les symboles publics les plus couramment utilisés et leurs utilisations.

FAQ sur le symbole ES6

Quelle est l'utilisation pratique du symbole ES6?

Le symbole

ES6 est un nouveau type de données primitif introduit dans ES6 (ECMAScript 6). Ce sont des types de données uniques et immuables qui peuvent être utilisés comme identificateurs pour les propriétés des objets. Ils peuvent être utilisés pour créer des propriétés privées pour les objets, implémenter des concepts de programmation de méta-niveau et éviter de nommer les conflits. Ils peuvent également être utilisés pour définir un comportement itératif personnalisé pour les objets.

Comment créer un nouveau symbole dans JavaScript?

Vous pouvez utiliser la fonction symbole () pour créer un nouveau symbole. Cette fonction renvoie un symbole unique à chaque fois qu'il est appelé, même si vous y transmettez le même argument. Par exemple, let symbol1 = Symbol('symbol'); let symbol2 = Symbol('symbol'); ici, Symbol1 et Symbol2 sont des symboles différents, même si le même paramètre "symbole" est transmis à la fonction symbole ().

Comment utiliser le symbole comme clé d'objet?

Vous pouvez utiliser le symbole entre crochets comme clé d'objet. Par exemple, let symbol = Symbol('key'); let obj = {}; obj[symbol] = 'value'; ici, le symbole "symbole" est utilisé comme clé de l'objet "obj".

Quel est le registre mondial des symboles en JavaScript?

Le registre mondial des symboles est un environnement partagé où vous pouvez créer, accéder et partager des symboles à travers différents domaines tels que IFRAMES ou les travailleurs de service. Vous pouvez créer un symbole dans le registre global à l'aide de symbol.for (key) et y accéder à l'aide de symbol.keyfor (symbole).

Comment utiliser le symbole avec des objets?

Vous pouvez utiliser un symbole avec des objets pour créer des clés uniques. Ceci est utile pour éviter les conflits de nommage, car le symbole est toujours unique. Par exemple, let symbol = Symbol('key'); let obj = { [symbol]: 'value' }; ici, le symbole "symbole" est utilisé comme clé de l'objet "obj".

peut être converti le symbole en une chaîne?

Oui, vous pouvez convertir le symbole en une chaîne en appelant la méthode toString () dessus. Cela renvoie une chaîne au format "Symbole (Description)", où "Description" est une description facultative que vous transmettez à la fonction symbole ().

peut-on utiliser le symbole avec des tableaux?

Oui, vous pouvez utiliser un symbole avec des tableaux. Par exemple, vous pouvez utiliser le symbole comme clé d'attribut unique pour stocker les métadonnées sur un tableau. Cependant, le symbole n'est pas inclus dans la propriété de longueur du tableau, et la plupart des méthodes de tableau ne les renvoient pas.

peut-on utiliser le symbole avec des fonctions?

Oui, vous pouvez utiliser le symbole avec des fonctions. Par exemple, vous pouvez utiliser le symbole comme clé d'attribut unique pour stocker les métadonnées sur une fonction. Cependant, le symbole n'est pas inclus dans la propriété de longueur de la fonction et la plupart des méthodes de fonction ne les renvoient pas.

peut-on utiliser le symbole avec des classes?

Oui, vous pouvez utiliser le symbole avec des classes. Par exemple, vous pouvez utiliser le symbole comme clé d'attribut unique pour stocker les métadonnées sur une classe. Cependant, le symbole n'est pas inclus dans la propriété de longueur de la classe et la plupart des méthodes de classe ne les renvoient pas.

peut-on utiliser le symbole avec des chaînes?

Oui, vous pouvez utiliser le symbole avec des chaînes. Par exemple, vous pouvez utiliser le symbole comme clé d'attribut unique pour stocker les métadonnées à propos d'une chaîne. Cependant, le symbole n'est pas inclus dans la propriété de longueur de la chaîne et la plupart des méthodes de chaîne ne les renvoient pas.

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!