JavaScript でオブジェクトに値を追加する

Hemank Mehtani 2023年10月12日
  1. JavaScript で object.assign() メソッドを使用してオブジェクトに要素を追加する
  2. push() メソッドを使用して、JavaScript のオブジェクトに要素を追加する
  3. スプレッド演算子を使用して JavaScript のオブジェクトに追加する
JavaScript でオブジェクトに値を追加する

JavaScript では、オブジェクトはデフォルトで変更可能です。要件に応じて、後で変更できます。

このチュートリアルでは、JavaScript オブジェクトに値を追加する方法を示します。

JavaScript で object.assign() メソッドを使用してオブジェクトに要素を追加する

object.assign() メソッドは、オブジェクトで定義されているすべてのプロパティを別のオブジェクトにコピーします。つまり、すべてのプロパティを 1つ以上のソースからターゲットオブジェクトにコピーします。これにより、オブジェクトに要素を追加します。

例えば、

const course = {
  name: 'JavaScript'
};
const grade = {
  score: 92
};
const finalResult = Object.assign(course, grade);
console.log(finalResult);

出力:

{ name: 'JavaScript', score: 92 }

push() メソッドを使用して、JavaScript のオブジェクトに要素を追加する

push() 関数は、配列の最後に単一または複数の要素を追加し、配列の新しい長さを返します。

例えば、

const brands = ['nike', 'reebok', 'adidas'];
const count = brands.push('venum');
console.log(count);
console.log(brands);

出力:

4
[ 'nike', 'reebok', 'adidas', 'venum' ]

count は配列の長さを返すことに注意してください。これはおそらく、配列で囲まれたオブジェクトに要素を追加するための最も簡単な方法です。配列も変更可能であるため、配列を使用することをお勧めします。

例えば、

const brands = [{nike: 1500}];
const count = brands.push({reebok: 2000});
console.log(count);
console.log(brands);

出力:

2
[{nike: 1500},{reebok: 2000}]

スプレッド演算子を使用して JavaScript のオブジェクトに追加する

スプレッド演算子は、JavaScript でオブジェクトをマージまたは複製するために使用されます。オブジェクト内のすべての要素をリストに含める必要がある場合に使用できます。

例えば、

const rectangle = {
  radius: 10
};
const style = {
  Backcolour: 'red'
};
const solidRectangle = {
  ...rectangle,
  ...style
};
console.log(solidRectangle);

出力:

{ radius: 10, Backcolour: 'red' }

関連記事 - JavaScript Object