Pourquoi JavaScript n'autorise-t-il pas directement les clés d'objet dynamiques dans les littéraux d'objet ?

Clé d'objet JavaScript de l'énigme des variables

Lors de l'utilisation de littéraux d'objet en JavaScript, vous pouvez rencontrer un comportement particulier où l'attribution d'une variable à une dynamique la clé de propriété ne fonctionne pas. Considérez ces deux extraits de code :

<something>.stop().animate({ 'top': 10 }, 10); // Works
var thetop = 'top';
<something>.stop().animate({ thetop: 10 }, 10); // Doesn't work

Pourquoi cet écart ?

Le premier extrait définit avec succès la propriété "top" d'un objet, en utilisant la notation par points. Cependant, le deuxième extrait échoue car JavaScript ne permet pas d'utiliser des variables pour définir des noms de propriétés d'objet dynamiques directement dans les littéraux d'objet.

Solution dans ES5 et versions antérieures

Pour attribuer des valeurs dynamiques noms de propriétés à partir de variables dans ES5 et versions antérieures, vous devez construire le littéral d'objet manuellement :

var thetop = "top";
var aniArgs = {};
aniArgs[thetop] = 10; // Assign value to variable property name
<something>.stop().animate(aniArgs, 10);

Solution dans ES6 et versions ultérieures

ES6 a introduit "ComputedPropertyName" dans la grammaire littérale des objets, permettant l'attribution directe de noms de propriétés dynamiques à partir de variables :

var thetop = "top",
    obj = { [thetop]: 10 };
console.log(obj.top); // -> 10

Cette syntaxe est prise en charge dans la dernière version versions des principaux navigateurs.

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!