Written by Kasumi

【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でスプレット構文(…)を使い、配列・オブジェクトを追加・連結(マージ)する方法について紹介しました。

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

目次

関連記事

JavaScript

【JavaScript初心者向け】繰り返し処理を使い、配列要素を展開する方法

2022.08.24
668
JavaScript

JavaScriptでHTML要素(DOM)を動的に移動する方法

2022.10.13
8007
JavaScript

【JavaScript】スクロールを終えた後に任意の処理を実行する方法

2023.02.21
539
JavaScript

【JavaScript】for…inとfor…ofの用途・違いについて

2022.12.28
796