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

Affectation dynamique de valeurs-clés dans les littéraux d'objet JavaScript

Malgré son utilisation répandue dans l'animation, JavaScript pose un défi lorsqu'il s'agit d'utiliser des variables comme clés dans les littéraux d'objet. Tandis qu'une syntaxe telle que ".stop().animate({ 'top' : 10 }, 10);" attribue de manière transparente des valeurs aux clés entre guillemets, en essayant d'utiliser des variables comme clés, comme dans "var thetop = 'top'; .stop().animate({ thetop : 10 }, 10);", rencontre un échec .

La raison derrière l'écart

{ thetop : 10 } constitue un objet valide syntaxe littérale. Le code demande à JavaScript de créer un objet avec une propriété appelée thetop, en lui attribuant une valeur de 10. Notamment, { thetop : 10 } et { "thetop" : 10 } produisent des structures d'objet identiques.

Contourner la limitation dans ES5 et versions antérieures

Avant ES6, exploiter les variables comme noms de propriété dans l'objet les littéraux étaient impossibles. La solution de contournement impliquait d'abord de créer un littéral d'objet, puis d'attribuer des valeurs à ses propriétés en utilisant la variable comme clé, illustrée par :

var thetop = "top";
var aniArgs = {};
aniArgs[thetop] = 10;
<something>.stop().animate(aniArgs, 10);

ES6 et l'avènement des noms de propriétés calculés

ES6 a révolutionné ce paysage en introduisant ComputedPropertyNames dans la syntaxe littérale des objets. Cette avancée permet un codage similaire à :

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

Cette syntaxe modernisée permet aux développeurs d'utiliser de manière transparente des variables comme noms de propriétés dans les littéraux d'objet dans les versions contemporaines des navigateurs grand public.

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!