Quelle est l'utilisation du symbole dans es6

Dans es6, Symbol peut être utilisé comme nom d'attribut, variable définie ou constante pour représenter une valeur unique. Il s'agit d'un nouveau type de données dans es6. Deux variables déclarées via Symbol ne peuvent jamais être égales. Symbole("valeur")".

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

Quelle est l'utilisation du symbole dans es6 ?

Qu'est-ce que le symbole ?

Le symbole est un type de données nouvellement ajouté dans es6, qui représente une valeur unique. Dans es5, nous divisons les types de données en types de données de base (chaîne, nombre, booléen, non défini, nul) et types de données de référence (objet). Le nouveau type de données Symbole dans es6 est divisé en types de données de base

Pourquoi y a-t-il quoi ? un tel type de données ?

//别人给了你一个定义好的对象
var obj = {
    name: "xiaoqiang",
    showName: function(){alert(1)}
}
//你拿到对象想给这对象添加新的属性和方法的时候，可能会创建出一个name属性和showName方法
obj.name = "nodeing"
obj.showName = function(){alert(2)}

//这个时候，新增加的方法和属性就会去把原有的方法覆盖，这样就产生了冲突

Étant donné que les propriétés et les méthodes des objets sont composées de chaînes, il peut y avoir des conflits lors de l'ajout de méthodes et de propriétés. Dans es6, un nouveau type de données est ajouté pour représenter des valeurs uniques

Vous pouvez créer un unique via la fonction Symbole. valeur. Chaque fois que la fonction Symbol est exécutée, un objet est renvoyé

let s1 = Symbol()
let s2 = Symbol()

console.log(s1 === s2) //false 说明创建出来的s1和s2 并不是相同的
console.log(s1, s2); //Symbol() Symbol()

Dans le code ci-dessus, les valeurs imprimées sont toutes Symbol(). Comment pouvons-nous distinguer qui est s1 et qui est s2 ? Nous pouvons résoudre ce problème en passant des paramètres

//传入的参数就是对当前Symbol的描述，用来区分Symbol
let s1 = Symbol("s1")
let s2 = Symbol("s2")
console.log(s1, s2);  //Symbol(s1) Symbol(s2)

Scénarios d'application

Le symbole est généralement utilisé pour définir le nom de propriété ou la méthode de l'objet afin d'éviter que les propriétés ou méthodes nouvellement ajoutées n'entrent en conflit avec les propriétés ou méthodes d'origine

let name = Symbol("name");
let show = Symbol("show");

let obj = {
    //设置属性
    [name]: 'xiaoqiang',
    [show](){alert(1)}
};
//取值
console.log(obj[name]);
//调用方法
obj[show]()

ici Notez que la valeur du nom doit être exprimée en [] et est une variable qui peut être modifiée

Remarques

Remarque 1 : Les paramètres dans Symbol ne sont que des descriptions de symboles et n'ont donc aucune autre signification, même si les descriptions le sont. de même, Symbol est également différent

Ici, vous pouvez deviner que la valeur de retour de la fonction Symbol est un objet

console.log(Symbol("nodeing") === Symbol("nodeing")) //false

Remarque 2 : La fonction Symbol ne peut pas être appelée à l'aide du mot-clé New

let s1 = new Symbol(); //报错

Remarque 3 : Le type Symbol ne peut pas être converti en nombre lors de la conversion de type

let s1 = Symbol("s1");
console.log(String(s1));  //Symbol(s1)
console.log(Boolean(s1));  //true
console.log(Number(s1)) //报错

Remarque 4 : Le symbole ne peut effectuer aucune opération (peut-être que la valeur de retour ne peut pas être utilisée)

console.log(Symbol("s1") + "nodeing") //报错
console.log(Symbol("s1") - 100) //报错

Remarque 5 : Lorsque le symbole est utilisé comme attribut ou méthode d'objet, s'il n'est pas attribué à une variable, il n'y a aucun moyen d'obtenir la valeur

let obj = {
    //设置属性
    [Symbol("name")]: 'xiaoqiang'
};
//取值
console.log(obj[Symbol("name")]);

Remarque 6 : Le symbole ne peut pas être traversé par for en boucle

let name = Symbol('name')
let age = Symbol('age')
let obj = {
    a: 1,
    b: 2,
    [name]: 'xiaoqiang',
    [age]: 18
};
for(let attr in obj){
    console.log(attr,obj[attr])  //a b
}

Vous pouvez utiliser Object.getOwnPropertySymbols pour afficher toutes les propriétés du symbole sur l'objet

console.log(Object.getOwnPropertySymbols(obj))

[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!