literales - recorrer array de objetos javascript

¿Cómo usar una variable para una clave en un objeto literal de JavaScript?

Question

¿Por qué funciona lo siguiente?

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

Considerando que esto no funciona:

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

Para que sea aún más claro: en este momento no puedo pasar una propiedad CSS a la función animada como una variable.

Answer 1

Agregar corchete alrededor de la variable funciona bien para mí. Prueba esto

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

Answer 2

Código dado:

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

Traducción:

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

Como puede ver, la declaración { thetop : 10 } no hace uso de la variable thetop . En su lugar, crea un objeto con una clave llamada thetop . Si desea que la clave sea el valor de la variable thetop , entonces tendrá que usar corchetes alrededor de la parte thetop :

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

La sintaxis de corchete se ha introducido con ES6. En versiones anteriores de JavaScript, tendría que hacer lo siguiente:

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

Answer 3

Con ECMAScript 2015 ahora puede hacerlo directamente en la declaración de objetos con la notación de corchetes:

var obj = {
  [key]: value
}

Donde key puede ser cualquier tipo de expresión (por ejemplo, una variable) que devuelve un valor.

Así que aquí su código se vería así:

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

Donde el thetop será reemplazado por el valor variable.

Answer 4

De esta manera también se puede lograr la salida deseada.

var jsonobj={};
var count=0;
$(document).on(''click'',''#btnadd'', function() {
    jsonobj[count]=new Array({ "1"  : $("#txtone").val()},{ "2"  : $("#txttwo").val()});
    count++;
    console.clear();
    console.log(jsonobj);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>value 1</span><input id="txtone" type="text"/>
<span>value 2</span><input id="txttwo" type="text"/>
<button id="btnadd">Add</button>

Answer 5

He usado lo siguiente para agregar una propiedad con un nombre "dinámico" a un objeto:

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

key es el nombre de la nueva propiedad.

El objeto de las propiedades pasadas a animate será {left: 20, width: 100, top: 10}

Esto es solo usando la notación requerida [] como lo recomiendan las otras respuestas, ¡pero con menos líneas de código!

Answer 6

La implementación de ES5 para asignar claves está abajo:

var obj = Object.create(null),
    objArgs = (
      (objArgs = {}),
      (objArgs.someKey = {
        value: ''someValue''
      }), objArgs);

Object.defineProperties(obj, objArgs);

He adjuntado un fragmento que solía convertir a objeto desnudo.

var obj = {
  ''key1'': ''value1'',
  ''key2'': ''value2'',
  ''key3'': [
    ''value3'',
    ''value4'',
  ],
  ''key4'': {
    ''key5'': ''value5''
  }
}

var bareObj = function(obj) {

  var objArgs,
    bareObj = Object.create(null);

  Object.entries(obj).forEach(function([key, value]) {

    var objArgs = (
      (objArgs = {}),
      (objArgs[key] = {
        value: value
      }), objArgs);

    Object.defineProperties(bareObj, objArgs);

  });

  return {
    input: obj,
    output: bareObj
  };

}(obj);

if (!Object.entries) {
  Object.entries = function(obj){
    var arr = [];
    Object.keys(obj).forEach(function(key){
      arr.push([key, obj[key]]);
    });
    return arr;
  }
}

console(bareObj);

Answer 7

Podrías hacer lo siguiente para ES5:

var theTop = ''top''
<something>.stop().animate(
  JSON.parse(''{"'' + theTop + ''":'' + JSON.stringify(10) + ''}''), 10
)

O extraer a una función:

function newObj (key, value) {
  return JSON.parse(''{"'' + key + ''":'' + JSON.stringify(value) + ''}'')
}

var theTop = ''top''
<something>.stop().animate(
  newObj(theTop, 10), 10
)

Answer 8

{ thetop : 10 } es un objeto literal válido. El código creará un objeto con una propiedad llamada thetop que tiene un valor de 10. Los dos siguientes son los mismos:

obj = { thetop : 10 };
obj = { "thetop" : 10 };

En ES5 y versiones anteriores, no puede usar una variable como nombre de propiedad dentro de un objeto literal. Tu única opción es hacer lo siguiente:

var thetop = "top";

// create the object literal
var aniArgs = {};

// Assign the variable property name with a value of 10
aniArgs[thetop] = 10; 

// Pass the resulting object to the animate method
<something>.stop().animate(
    aniArgs, 10  
);  

ES6 defines ComputedPropertyName como parte de la gramática para literales de objetos, lo que le permite escribir el código de esta manera:

var thetop = "top",
    obj = { [thetop]: 10 };

console.log(obj.top); // -> 10

Puede utilizar esta nueva sintaxis en las últimas versiones de cada navegador general.

Answer 9

ES5 cita que dice que no debería funcionar

Especificación: http://www.ecma-international.org/ecma-262/5.1/#sec-11.1.5

Nombre de la propiedad :

• Nombre del identificador
• StringLiteral
• Numérico literal

[...]

La propiedad PropertyName: IdentifierName se evalúa de la siguiente manera:

1. Devuelve el valor de cadena que contiene la misma secuencia de caracteres que el nombre de identificador.

La propiedad PropertyName: StringLiteral se evalúa de la siguiente manera:

1. Devuelve el SV [valor de cadena] de StringLiteral.

La propiedad PropertyName: NumericLiteral se evalúa de la siguiente manera:

1. Sea nbr el resultado de formar el valor de NumericLiteral.
2. Vuelve a ToString (nbr).

Esto significa que:

• { theTop : 10 } es exactamente igual que { ''theTop'' : 10 }

  PropertyName theTop es un IdentifierName , por lo que se convierte al valor de cadena ''theTop'' , que es el valor de cadena de ''theTop'' .

• No es posible escribir inicializadores de objetos (literales) con claves variables.

  Las únicas tres opciones son IdentifierName (se expande a cadena literal), StringLiteral y NumericLiteral (también se expande a una cadena).

Las reglas han cambiado para ES6: https://.com/a/2274327/895245