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



3 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.

javascript jquery variables properties object-literal

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.




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!




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);



Related