• JavaScript

【JavaScript】スプレット構文（…）を使い、配列・オブジェクトを追加・連結（マージ）する方法

JavaScriptでスプレット構文を使い、配列・オブジェクトを追加・連結（マージ）したい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

スプレット構文とは

スプレット構文は、ドットを三つ（…）と変数名（配列変数・オブジェクト変数）を連結して使います。

上記を記述する事で配列[]やオブジェクト{}から要素を取り出す（展開する）事ができます。

スプレット構文の実装例

const array = [1, 2, 3, 4, 5];
const object = {
  a: 1,
  b: 2,
  c: 3
}

//コンソールに出力
console.log(...array);
console.log({...object});

//コンソール出力結果
//1 2 3 4 5
//{a: 1, b: 2, c: 3}

スプレット構文を使った配列・オブジェクトの展開例です。

…スプレット構文を使い、コンソールにそれぞれ要素を展開・出力してます。

展開したオブジェクトをコンソールに出力するとエラーになるので{}で再度オブジェクト化してコンソールに出力してます。

スプレット構文で配列・オブジェクトを追加

const array = [1, 2, 3, 4, 5];
const object = {
  a: 1,
  b: 2,
  c: 3
}

// 配列を追加
const array02 = [...array, 6, 7, 8];
// オブジェクトを追加
const object02 = {...object, d: 4, e: 5};
//コンソールに出力
console.log(...array02);
console.log({...object02});

//コンソール出力結果
//1 2 3 4 5 6 7 8
//{a: 1, b: 2, c: 3, d: 4, e: 5}

スプレット構文で配列・オブジェクトを追加するコード例です。

上記コードのように追加したい配列・オブジェクト内でスプレット構文を使いマージ（連結）します。

以上で追加が可能になります。

まとめ

JavaScriptでスプレット構文（…）を使い、配列・オブジェクトを追加・連結（マージ）する方法について紹介しました。

以上で解説を終わります。