Comment attribuer dynamiquement des noms de propriété dans des littéraux d'objet JavaScript ?

Comprendre le comportement des littéraux d'objet en JavaScript

Lorsqu'ils travaillent avec des littéraux d'objet en JavaScript, les développeurs peuvent rencontrer des situations où il est souhaitable de définir des noms de propriété de manière dynamique. Cependant, cela peut prêter à confusion si le comportement souhaité n'est pas compris.

Considérez l'exemple fourni :

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

Dans ce cas, le code attribue avec succès la propriété 'top' au valeur 10 dans un objet littéral. En effet, le nom de la propriété est placé entre guillemets simples, indiquant une chaîne littérale comme clé de propriété.

En revanche, lorsque vous utilisez une variable comme nom de propriété :

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

Le code échoue car JavaScript ne prend pas en charge les noms de propriétés générés dynamiquement pour les littéraux d'objet de cette manière. Avant ES5, le seul moyen d'y parvenir était de construire manuellement le littéral d'objet en attribuant la valeur à un nom de propriété variable :

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

Cependant, avec l'introduction d'ES6, les développeurs ont désormais accès à Computed Noms de propriété pour les littéraux d’objet. Grâce à cette nouvelle syntaxe, les noms de propriétés peuvent être spécifiés dynamiquement sous forme d'expressions entre crochets :

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

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

Cette syntaxe permet aux développeurs de créer des littéraux d'objet avec des noms de propriété attribués dynamiquement, un peu comme l'exemple original avec la chaîne littérale comme clé de propriété.

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!