¿Hay alguna forma de usar claves de variables en un objeto literal de JavaScript?

82

Tengo un código como este.

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

Quiero saber si hay una manera de reemplazar eso keycon "cualquier cosa".

me gusta

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

javascript

— Yuan gordiano
fuente

197

En ES6, use nombres de propiedad calculados .

const key = "anything";   

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

Tenga en cuenta los corchetes alrededor key. De hecho, puede especificar cualquier expresión entre corchetes, no solo una variable.

5

también funciona en cromo. respuesta más simple y mejor (y)

— Anum Sheraz

1

Eso está bien para ES6, pero ¿qué pasa con las versiones anteriores (IE11 se bloqueará en el código anterior)?

— pascalzon

117

Si. Puedes usar:

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

O simplemente use su segundo método si tiene los valores a mano al escribir el programa.

— tvanfosson
fuente

15

En Javascript moderno (ECMAScript 6) puede rodear la variable con corchetes:

var key = "anything";

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

— Jorge Barroso
fuente

12

Esto debería funcionar:

var key = "anything";

var json = {};

json[key] = "key attribute";

— D. Evans
fuente

Pero quiere hacer esto en el contexto de un objeto literal.

4

Solución:

var key = "anything";

var json = {};

json[key] = "key attribute";

— Aatif Bandey
fuente

Explique su solución.

— Martin Zabel

1

@MartinZabel Apenas parece necesitar explicación.

-2

Los cierres funcionan muy bien para esto.

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

var key = keyValue(key);
key(value);

— Almiar
fuente

El cierre es simplemente el mecanismo que se utiliza aquí. El concepto es HOF.

1

HOF = Funciones de orden superior.

— Rick

-2

Recientemente se necesitaba una solución para configurar las cookies pasando los valores clave de json dinámicos. Usando https://github.com/js-cookie/js-cookie#json , se puede hacer fácilmente. Quería almacenar cada valor de opción seleccionado del usuario en la cookie, para que no se pierda en caso de que la pestaña o el navegador se apague.

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

Luego, puede recuperar cada valor de clave de cookie en cada carga de página usando

Cookies.getJSON('option_values');

— Alexey Vorobyov
fuente

-3

Bueno, no hay una forma "directa" de hacer esto ...

pero esto debería hacerlo:

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

Es un poco complicado, pero bueno, ¡funciona!

— jrharshath
fuente