Czy istnieje sposób używania kluczy zmiennych w literale obiektu JavaScript?

82

Mam taki kod.

var key = "anything";   
var object = {   
    key: "key attribute"  
};

Chcę wiedzieć, czy istnieje sposób na zastąpienie tego wyrażeniem key„cokolwiek”.

lubić

var object = {  
    "anything": "key attribute"     
};
Gordian Yuan
źródło

Odpowiedzi:

197

W ES6 użyj obliczonych nazw właściwości .

const key = "anything";   

const object = {   
    [key]: "key attribute"
//  ^^^^^  COMPUTED PROPERTY NAME
};

Zwróć uwagę na nawiasy kwadratowe wokół key. W nawiasach kwadratowych można określić dowolne wyrażenie, a nie tylko zmienną.


źródło
5
działa również na chrome. najprostsza i najlepsza odpowiedź (y)
Anum Sheraz
1
To dobrze dla ES6, ale co ze starszymi wersjami (IE11 ulegnie awarii na powyższym kodzie)
pascalzon
117

Tak. Możesz użyć:

var key = "anything";
var json = { };
json[key] = "key attribute";

Lub po prostu użyj drugiej metody, jeśli masz pod ręką wartości podczas pisania programu.

tvanfosson
źródło
15

We współczesnym Javascript (ECMAScript 6) zmienną można zaokrąglić w nawiasach kwadratowych:

var key = "anything";

var json = {
    [key]: "key attribute"
};
Jorge Barroso
źródło
12

To powinno załatwić sprawę:

var key = "anything";

var json = {};

json[key] = "key attribute";
D. Evans
źródło
Ale chce to zrobić w kontekście dosłowności obiektu.
4

Rozwiązanie:

var key = "anything";

var json = {};

json[key] = "key attribute";
Aatif Bandey
źródło
Proszę wyjaśnić swoje rozwiązanie.
Martin Zabel
1
@MartinZabel To raczej nie wymaga wyjaśnienia.
-2

Zamknięcia świetnie się do tego sprawdzają.

function keyValue(key){
  return function(value){
    var object = {};
    object[key] = value;
    return object;
  }
}

var key = keyValue(key);
key(value);
Stóg
źródło
Zamknięcie to jedynie zastosowany tutaj mechanizm. Koncepcja to HOF.
1
HOF = funkcje wyższego rzędu.
Rick
-2

Ostatnio potrzebowaliśmy rozwiązania, jak ustawić pliki cookie przekazujące wartości dynamicznego klucza JSON. Korzystając z https://github.com/js-cookie/js-cookie#json , można to łatwo zrobić. Chciał przechowywać każdą wybraną wartość opcji użytkownika w pliku cookie, aby nie został utracony w przypadku wyłączenia karty lub przeglądarki.

var json = { 
        option_values : {}
    };
    $('option:selected').each(function(index, el) {
        var option = $(this);
        var optionText = option.text();
        var key = 'option_' + index;
        json.option_values[key] = optionText;
        Cookies.set('option_values', json, { expires: 7 } );
    }); 

Następnie możesz pobrać każdą wartość klucza cookie przy każdym ładowaniu strony za pomocą

Cookies.getJSON('option_values');
Alexey Vorobyov
źródło
-3

Cóż, nie ma na to „bezpośredniego” sposobu ...

ale to powinno wystarczyć:

json[key] = json.key;
json.key = undefined;

To trochę trudne, ale hej, to działa!

jrharshath
źródło