Come utilizzare una variabile per una chiave in un oggetto JavaScript letterale?


Answers

Con ECMAScript 2015 ora sei in grado di farlo direttamente nella dichiarazione dell'oggetto con la notazione delle parentesi:

var obj = {
  [key]: value
}

Dove la key può essere qualsiasi tipo di espressione (ad es. Una variabile) che restituisce un valore.

Quindi qui il tuo codice sarà simile a:

<something>.stop().animate({
  [thetop]: 10
}, 10)

Dove thetop sarà sostituito dal valore variabile.

Question

Perché funziona il seguente?

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

Mentre questo non funziona:

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

Per renderlo ancora più chiaro: al momento non sono in grado di passare una proprietà CSS alla funzione di animazione come variabile.




Codice dato:

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

Traduzione:

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

Come puoi vedere, la { thetop : 10 } non fa uso della variabile thetop . Invece crea un oggetto con una chiave chiamata thetop . Se vuoi che la chiave sia il valore della variabile thetop , dovrai usare parentesi quadre attorno a thetop :

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

La sintassi della parentesi quadra è stata introdotta con ES6. Nelle versioni precedenti di JavaScript, dovresti fare quanto segue:

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



Ho usato quanto segue per aggiungere una proprietà con un nome "dinamico" a un oggetto:

var key = 'top';
$('#myElement').animate(
   (function(o) { o[key]=10; return o;})({left: 20, width: 100}),
   10
);

key è il nome della nuova proprietà.

L'oggetto delle proprietà passate per l' animate sarà {left: 20, width: 100, top: 10}

Questo è solo usando la notazione [] richiesta come raccomandato dalle altre risposte, ma con meno righe di codice!




Links