Quelle est la fonction des symboles dans es6

Le rôle du symbole dans es6 : 1. Utilisé comme nom d'attribut. Le symbole représente une valeur unique, ce qui peut garantir que les attributs n'ont pas de noms en double et sont également accessibles en dehors de la classe. est un nouveau type de données primitif, la syntaxe est "const name=Symbol("value")".

L'environnement d'exploitation de ce tutoriel : système Windows 10, ECMAScript version 6.0, ordinateur Dell G3.

Quel est le rôle du symbole dans es6

ES6 introduit un nouveau type de données primitif Symbol, qui représente une valeur unique. La plus grande utilisation est de définir le nom d'attribut unique d'un objet.

En plus des types de données Nombre, Chaîne, Booléen, Objet, nul et non défini, les types de données ES6 ajoutent également un symbole.

Utilisation de base

La pile de fonctions Symbol ne peut pas utiliser la nouvelle commande car Symbol est un type de données primitif, pas un objet. Vous pouvez accepter une chaîne comme paramètre pour fournir une description du symbole nouvellement créé, qui peut être affichée sur la console ou utilisée comme chaîne pour une différenciation facile.

let sy = Symbol("KK");
console.log(sy);   // Symbol(KK)
typeof(sy);        // "symbol"
 
// 相同参数 Symbol() 返回的值不相等
let sy1 = Symbol("kk"); 
sy === sy1;       // false

Comme nom d'attribut

Utilisation

Étant donné que la valeur de chaque symbole n'est pas égale, le symbole est utilisé comme nom d'attribut de l'objet pour garantir que les attributs n'ont pas de noms en double.

Le symbole ne peut pas être utilisé comme nom de propriété d'objet. L'opérateur . doit être utilisé et les crochets doivent être utilisés. Étant donné que l'opérateur . est suivi d'une chaîne, l'attribut sy de chaîne est obtenu, et non l'attribut sy de valeur de symbole.

let syObject = {};
syObject[sy] = "kk";
 
syObject[sy];  // "kk"
syObject.sy;   // undefined

Notes

Lorsque la valeur Symbol est utilisée comme nom d'attribut, l'attribut est un attribut public, pas un attribut privé, et est accessible en dehors de la classe. Mais il n'apparaîtra pas dans les boucles de for...in et for...of, et il ne sera pas non plus renvoyé par Object.keys() et Object.getOwnPropertyNames(). Si vous souhaitez lire la propriété Symbol d'un objet, vous pouvez l'obtenir via Object.getOwnPropertySymbols() et Reflect.ownKeys().

let syObject = {};
syObject[sy] = "kk";
console.log(syObject);
 
for (let i in syObject) {
  console.log(i);
}    // 无输出
 
Object.keys(syObject);                     // []
Object.getOwnPropertySymbols(syObject);    // [Symbol(key1)]
Reflect.ownKeys(syObject);                 // [Symbol(key1)]

Définir des constantes

Utilisez des chaînes pour représenter les constantes dans ES5. Par exemple :

const COLOR_RED = "red";
const COLOR_YELLOW = "yellow";
const COLOR_BLUE = "blue";

Mais utiliser des chaînes ne garantit pas que les constantes sont uniques, ce qui posera quelques problèmes :

Mais utilisez Symbol pour définir des constantes, afin que les valeurs de cet ensemble de constantes soient garanties d'être égales. Modifiez l'exemple ci-dessus en utilisant Symbol. La valeur de

const COLOR_RED = Symbol("red");
const COLOR_YELLOW = Symbol("yellow");
const COLOR_BLUE = Symbol("blue");
 
function ColorException(message) {
   this.message = message;
   this.name = "ColorException";
}
function getConstantName(color) {
    switch (color) {
        case COLOR_RED :
            return "COLOR_RED";
        case COLOR_YELLOW :
            return "COLOR_YELLOW ";
        case COLOR_BLUE:
            return "COLOR_BLUE";
        default:
            throw new ColorException("Can't find this color");
    }
}
 
try {
   
   var color = "green"; // green 引发异常
   var colorName = getConstantName(color);
} catch (e) {
   var colorName = "unknown";
   console.log(e.message, e.name); // 传递异常对象到错误处理
}

Symbol est unique, il n'y aura donc pas de constantes avec la même valeur, ce qui garantit que le commutateur s'exécute comme prévu par le code.

【Recommandations associées : tutoriel vidéo javascript, front-end 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!