変数名を使用して JavaScript オブジェクトにプロパティを動的に追加する方法

JavaScript オブジェクトにプロパティを動的に追加する方法

DOM 要素を操作する場合、通常、それらの要素の ID。次の状況を考えてみましょう。

jQuery を使用して取得した DOM 要素の配列があり、各要素の ID を使用してオブジェクトのプロパティを設定したいとします。

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

上記のコードオブジェクトにプロパティを設定しますが、プロパティ名は要素の ID に関係なく常に「name」になります。変数を使用してプロパティ名を動的に設定するには、括弧と変数名を使用する必要があります。

obj[name] = value;

これにより、ID またはその他の変数をプロパティ名として使用してオブジェクトにプロパティを作成できます。

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

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

または、ES6 の機能を使用してより簡潔にすることもできます構文:

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

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

括弧を使用すると、JavaScript オブジェクトにプロパティ名を動的に設定できるため、データ操作の柔軟性と制御が向上します。

以上が変数名を使用して JavaScript オブジェクトにプロパティを動的に追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。