Comment puis-je utiliser des variables comme clés d'objet dans les littéraux d'objet JavaScript ?

Utilisation de variables comme clés d'objet dans les littéraux JavaScript

En JavaScript, il est possible de définir des littéraux d'objet à l'aide de paires clé-valeur. Cependant, lorsque vous tentez d'utiliser une variable comme clé, certaines limitations existent.

Considérez l'extrait de code suivant :

<something>.stop().animate({ 'top' : 10 }, 10);

Ce code met à jour avec succès la propriété CSS "top" d'un élément . Cependant, lorsque vous essayez d'utiliser une variable à la place :

var thetop = 'top';
<something>.stop().animate({ thetop : 10 }, 10);

le code échoue. La raison en est que les littéraux d'objet nécessitent que les clés soient placées entre guillemets simples ou doubles, contrairement aux noms de variables.

ES5 et versions antérieures :

Dans ES5 et versions antérieures de JavaScript, il n'existe pas de moyen simple d'utiliser directement des variables comme clés d'objet. Une solution de contournement consiste à créer un littéral d'objet vide, puis à attribuer la variable à la clé souhaitée :

var thetop = "top";

// Create the object literal
var aniArgs = {};

// Assign the variable property name with a value of 10
aniArgs[thetop] = 10; 

// Pass the resulting object to the animate method
<something>.stop().animate(
    aniArgs, 10  
);  

ES6 et versions ultérieures :

ES6 introduit la syntaxe ComputedPropertyName, qui permet d'utiliser des expressions variables comme clés d'objet :

var thetop = "top",
    obj = { [thetop]: 10 };

console.log(obj.top); // -> 10

Cette syntaxe permet un code plus propre et plus concis, notamment lorsqu'il s'agit de clés d'objet dynamiques. Il est pris en charge dans les versions modernes de tous les 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!