Ajouter une propriété à un objet JavaScript en utilisant une variable comme nom ?

Question

J'extrais des éléments du DOM avec jQuery et je veux définir une propriété sur un objet en utilisant la fonction id de l'élément DOM.

Exemple

const obj = {}

jQuery(itemsFromDom).each(function() {
  const element = jQuery(this)
  const name = element.attr('id')
  const value = element.attr('value')

  // Here is the problem
  obj.name = value
})

Si itemsFromDom comprend un élément avec un id de "monId", je veux obj pour avoir une propriété nommée "myId". Ce qui précède me donne name .

Comment nommer une propriété d'un objet à l'aide d'une variable en JavaScript ?

Answer 1

Vous pouvez utiliser cette syntaxe équivalente :

obj[name] = value

Exemple :

let obj = {};
obj["the_key"] = "the_value";

ou avec des fonctionnalités ES6 :

let key = "the_key";
let obj = {
  [key]: "the_value",
};

dans les deux exemples, console.log(obj) reviendra : { the_key: 'the_value' }

Answer 2

Avec ECMAScript 2015 vous pouvez le faire directement dans la déclaration d'objet en utilisant la notation entre crochets :

var obj = {
  [key]: value
}

Où key peut être n'importe quelle sorte d'expression (par exemple une variable) renvoyant une valeur :

var obj = {
  ['hello']: 'World',
  [x + 2]: 42,
  [someObject.getId()]: someVar
}

Answer 3

Vous pouvez même faire des listes d'objets comme ceci

var feeTypeList = [];
$('#feeTypeTable > tbody > tr').each(function (i, el) {
    var feeType = {};

    var $ID = $(this).find("input[id^=txtFeeType]").attr('id');

    feeType["feeTypeID"] = $('#ddlTerm').val();
    feeType["feeTypeName"] = $('#ddlProgram').val();
    feeType["feeTypeDescription"] = $('#ddlBatch').val();

    feeTypeList.push(feeType);
});

Answer 4

Il existe deux notations différentes pour accéder aux propriétés d'un objet

• Point la notation : monObj.prop1
• Console la notation : myObj["prop1"]

La notation par points est rapide et facile mais vous doit utiliser le nom réel de la propriété de manière explicite. Pas de substitution, de variables, etc.

La notation par parenthèses est ouverte. Elle utilise une chaîne de caractères mais vous pouvez produire cette chaîne en utilisant n'importe quel code js légal. Vous pouvez spécifier la chaîne comme littérale (bien que dans ce cas la notation par points soit plus facile à lire) ou utiliser une variable ou calculer d'une manière ou d'une autre.

Donc, tous ces éléments définissent le monObj propriété nommée prop1 à la valeur Bonjour :

// quick easy-on-the-eye dot notation
myObj.prop1 = "Hello";

// brackets+literal
myObj["prop1"] = "Hello";

// using a variable
var x = "prop1"; 
myObj[x] = "Hello";                     

// calculate the accessor string in some weird way
var numList = [0,1,2];
myObj[ "prop" + numList[1] ] = "Hello";     

Les pièges :

myObj.[xxxx] = "Hello";      // wrong: mixed notations, syntax fail
myObj[prop1] = "Hello";      // wrong: this expects a variable called prop1

tl;dnr : Si vous souhaitez calculer ou référencer la clé que vous doit utiliser notation entre crochets . Si vous utilisez la clé explicitement, alors utilisez notation par points pour un code simple et clair.

Note : il y a d'autres bonnes et correctes réponses, mais je les ai personnellement trouvées un peu brèves, étant donné ma faible familiarité avec les bizarreries de JS on-the-fly. Cela pourrait être utile à certaines personnes.

Answer 5

Avec lodash, vous pouvez créer un nouvel objet comme ceci _.set :

obj = _.set({}, key, val);

Ou vous pouvez définir un objet existant comme ceci :

var existingObj = { a: 1 };
_.set(existingObj, 'a', 5); // existingObj will be: { a: 5 }

Vous devez faire attention si vous voulez utiliser le point (".") dans votre chemin, car lodash peut définir une hiérarchie, par exemple :

_.set({}, "a.b.c", "d"); // { "a": { "b": { "c": "d" } } }