Comment utiliser une variable comme clé dans un objet JavaScript littéral ?

Question

Pourquoi ce qui suit fonctionne-t-il ?

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

Alors que cela ne fonctionne pas :

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

Pour être encore plus clair : Pour le moment, je ne suis pas en mesure de passer une propriété CSS à la fonction animate en tant que variable.

Answer 1

L'ajout de crochets autour de la variable fonctionne bien pour moi. Essayez ceci

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

Answer 2

Je n'ai pas pu trouver un exemple simple sur les différences entre ES6 et ES5, alors j'en ai fait une. Les deux exemples de code créent exactement le même objet. Mais l'exemple ES5 fonctionne également dans les anciens navigateurs (comme IE11), alors que l'exemple ES6 ne fonctionne pas.

ES6

var matrix = {};
var a = 'one';
var b = 'two';
var c = 'three';
var d = 'four';

matrix[a] = {[b]: {[c]: d}};

ES5

var matrix = {};
var a = 'one';
var b = 'two';
var c = 'three';
var d = 'four';

function addObj(obj, key, value) {
  obj[key] = value;
  return obj;
}

matrix[a] = addObj({}, b, addObj({}, c, d));

Answer 3

Mise à jour : Comme un commentateur l'a fait remarquer, toute version de JavaScript qui supporte les fonctions de flèche sera également soutien ({[myKey]:myValue}) donc cette réponse a aucun cas d'utilisation réel (et, en fait, il pourrait se briser dans certains cas particuliers).

N'utilisez pas la méthode indiquée ci-dessous.

---

I Je ne peux pas croire Ceci n'a pas encore été posté : il suffit d'utiliser les fonctions flèches avec une évaluation anonyme !

Complètement non invasif, qui ne touche pas à l'espace de noms et qui ne prend qu'une ligne :

myNewObj = ((k,v)=>{o={};o[k]=v;return o;})(myKey,myValue);

démo :

var myKey="valueof_myKey";
var myValue="valueof_myValue";
var myNewObj = ((k,v)=>{o={};o[k]=v;return o;})(myKey,myValue);
console.log(myNewObj);

utile dans les environnements qui ne prennent pas en charge le nouveau système de gestion de l'information. {[myKey]: myValue} syntaxe pourtant, telle que - apparemment ; je viens de le vérifier sur ma console de développeur Web - Firefox 72.0.1, sortie 2020-01-08. Je me suis trompé ; il suffit de mettre le truc entre parenthèses et ça marche.

(Je suis sûr que vous pourriez potentiellement créer des solutions plus puissantes/extensibles ou autre, en utilisant intelligemment les éléments suivants reduce mais à ce stade, il serait probablement préférable de séparer la création d'objets en une fonction distincte au lieu de tout mettre en ligne de manière compulsive).

---

non pas que cela ait de l'importance puisque le PO a posé cette question il y a dix ans, mais par souci d'exhaustivité et pour démontrer comment c'est exactement le site Pour répondre à la question telle qu'elle est formulée, je vais la montrer dans le contexte original :

var thetop = 'top';
<something>.stop().animate(
    ((k,v)=>{o={};o[k]=v;return o;})(thetop,10), 10
);

Answer 4

Code donné :

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

Traduction :

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

Comme vous pouvez le voir, le { thetop : 10 } ne fait pas usage de la variable thetop . Au lieu de cela, il crée un objet avec une clé nommée thetop . Si vous voulez que la clé soit la valeur de la variable thetop alors vous devrez utiliser des crochets autour de l'option thetop :

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

La syntaxe des crochets a été introduite avec ES6. Dans les versions antérieures de JavaScript, vous deviez procéder comme suit :

var thetop = 'top';
var config = (
  obj = {},
  obj['' + thetop] = 10,
  obj
); // config.top = 10
<something>.stop().animate(config, 10);

Answer 5

Vous pouvez aussi essayer comme ça :

let array1 = [{
    "description": "THURSDAY",
    "count": "1",
    "date": "2019-12-05"
},
{
    "description": "WEDNESDAY",
    "count": "0",
    "date": "2019-12-04"
}]
let res = array1.map((value, index) => {
    return { [value.description]: { count: value.count, date: value.date } }
})
console.log(res);