【モダンJavaScript】配列の基本操作とスプレッド構文

2024年2月11日

当ページには広告が含まれています。

こんにちは、DXCEL WAVEの運営者(@dxcelwave)です！

こんな方におすすめ！

JavaScriptで扱う配列の基本操作について詳しく知りたい！
スプレッド構文を用いた配列操作が知りたい！

【JavaScript】配列の基本操作

JavaScriptの配列（Array）とは、複数の値を保持するためのデータ構造を指します。

配列内の各要素は、0から始まるインデックス番号でアクセスできます。配列は、 [] 内にカンマで区切られた値を列挙することでリテラルとして作成できます。

// 配列の定義
const my_arr = [1,2,3,4];

// 配列の出力
console.log(my_arr)         // [1, 2, 3, 4] 

// 配列の一部展開
console.log(my_arr[0])      // 1

【JavaScript】スプレッド構文の基本操作

スプレッド構文（Spread syntax）とは、配列やオブジェクトを展開して、それらの中身を別の配列やオブジェクトにコピーするための構文です。

スプレッド構文は ... という記号で記述され、主に関数呼び出しや配列リテラル、オブジェクトリテラル内で使用されます。以下操作例も併せて確認してみましょう。

基本操作

スプレッド構文を用いた配列の展開方法を以下に示します。

// 配列
const my_arr1 = [1,2,3];

// 出力
console.log(my_arr1);     // [1,2,3]

// 出力（スプレッド構文）
console.log(...my_arr1);  // 1, 2, 3

さらに違いをわかりやすく理解するために、３つの引数を合計して出力する関数に対してスプレッド構文を渡した例を確認しましょう。配列を分けて引数を与えるのに対してシンプルに記述できるのが分かりますね。

// 配列
const my_arr1 = [1,2,3];

// 関数
const output_arr = (value1, value2, value3) => {return value1 + value2 + value3};

// 出力
console.log(output_arr(my_arr1[0], my_arr1[1] ,my_arr1[2]));     // 6

// 出力（スプレッド構文）
console.log(output_arr(...my_arr1));                             // 6

配列のコピー

スプレッド構文を用いて配列をコピーする場合、次のように実施します。

// 配列
const my_arr2 = [1,2,3,4];

// 配列コピー
const my_arr3 = [...my_arr2];

// 出力
console.log(my_arr2);   // [1, 2, 3, 4] 
console.log(my_arr3);   // [1, 2, 3, 4]

配列の結合

スプレッド構文を用いて複数の配列を結合する場合、次のように実施します。

// 配列
const my_arr4 = [1,2,3,4];
const my_arr5 = [6,7,8,9];

// 配列の結合
const my_arr6 = [...my_arr4, ...my_arr5];

// 出力
console.log(my_arr6);  // [1, 2, 3, 4, 5, 6, 7, 8, 9]

オブジェクトの結合

スプレッド構文を用いて複数のオブジェクトの結合も可能です。

// 配列
const my_obj1 = {a:10, b:20};
const my_obj2 = {c:30, d:40};

// 配列の結合
const my_obj3 = {...my_obj1, ...my_obj2};

// 出力
console.log(my_obj3);  // {a:10, b:20, c:30, d:40}