Comment ajouter dynamiquement des propriétés aux objets JavaScript à l'aide de noms de variables ?

Comment ajouter dynamiquement des propriétés à un objet JavaScript

Lorsque vous travaillez avec des éléments DOM, il est courant de devoir définir des propriétés sur des objets à l'aide de l'option ID de ces éléments. Considérez la situation suivante :

Vous disposez d'un tableau d'éléments DOM récupérés à l'aide de jQuery et vous souhaitez définir des propriétés sur un objet en utilisant les ID de chaque élément.

const obj = {};

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

  // This line does not work as intended:
  obj.name = value;
});

Le code ci-dessus définira une propriété sur l'objet, mais le nom de la propriété sera toujours "nom" quel que soit l'ID de l'élément. Pour définir dynamiquement le nom de la propriété à l'aide d'une variable, vous devez utiliser des crochets et le nom de la variable :

obj[name] = value;

Cela vous permet de créer des propriétés sur l'objet en utilisant les ID ou toute autre variable comme nom de propriété.

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

console.log(obj); // Output: { the_key: 'the_value' }

Vous pouvez également utiliser les fonctionnalités ES6 pour une syntaxe plus concise :

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

console.log(obj); // Output: { the_key: 'the_value' }

L'utilisation de crochets vous permet de définissez dynamiquement les noms de propriétés sur les objets JavaScript, vous offrant ainsi une plus grande flexibilité et un plus grand contrôle sur la manipulation des données.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!