【JavaScript】配列を追加・結合する5つの方法を徹底解説

今回はJavaScriptの配列について、
要素を追加したり、配列を結合する方法(メソッド)についてまとめました。

それぞれのメソッドの「構文、引数、戻り値」についても詳しく解説したので、
きちんと違いを理解してもらえれば、正しく使いこなせるようになるでしょう。

配列の操作はよく使うので、土台からしっかり理解しておきましょう。

配列に要素を追加する

配列の先頭に要素を追加:unshift()

構文 : 配列名.unshift(要素1[, …[, 要素N]])
引数 : 追加する要素(複数個指定可能)
戻り値: 追加後の配列の要素数

配列のunshift()メソッドを実行すると、配列の先頭に要素が追加されます。
戻り値(実行結果)には追加後の配列の要素数が返ります。

以下に具体例を書くので、これを見ながら構文、引数、戻り値の意味を学んでください。


let array1 = ["a", "b", "c"];

//要素を1つ追加
array1.unshift("x");
console.log(array1); //=["x", "a", "b", "c"]

//要素を2つ追加
array1.unshift("y","z");
console.log(array1); //=["y", "z", "x", "a", "b", "c"]

//戻り値をarray1_lengthに代入
let array1_length = array1.unshift(1,2,3);
console.log(array1); //=[1, 2, 3, "y", "z", "x", "a", "b", "c"]
console.log(array1_length); //=9

配列の末尾に要素を追加:push()

unshift()メソッドが分かればpush()メソッドは簡単です。
unshift()メソッドの時と、実行後の並びの違いに注目してください。

構文 : 配列名.push(要素1[, …[, 要素N]])
引数 : 追加する要素(複数個指定可能)
戻り値: 追加後の配列の要素数

配列のpush()メソッドを実行すると、配列の末尾に指定した要素が追加されます。
戻り値(実行結果)には追加後の配列の要素数が返ります。


let array1 = ["a", "b", "c"];

//要素を1つ追加
array1.push("x");
console.log(array1); //=["a", "b", "c", "x"]

//要素を2つ追加
array1.push("y","z");
console.log(array1); //=["a", "b", "c", "x", "y", "z"]

//戻り値をarray1_lengthに代入
let array1_length = array1.push(1,2,3);
console.log(array1); //=["a", "b", "c", "x", "y", "z", 1, 2, 3]
console.log(array1_length); //=9

配列の指定位置に要素を追加:splice()

splice()メソッドは引数が増えて少し複雑になります。

しかし、構文と引数をしっかり理解してもらえれば難しくないと思うので、具体例を見ながら理解を深めてください。

構文    : 配列名.splice(開始位置,削除する数,要素1[, …[, 要素N]])
第一引数  : 削除/追加する開始位置
第二引数  : 削除する要素の数
第三引数以降: 追加する要素(複数個指定可能)
戻り値   : 削除された要素の配列

配列のsplice()メソッドを実行すると、
まず、第一引数で指定した位置から、第二引数で指定した数の要素が配列から削除されます。
そして、第三引数以降で指定した値が要素として配列に追加されます。

戻り値(実行結果)には、削除された要素が配列形式で返ります。

尚、第一引数に配列の要素数より大きい値を指定すると、配列の末尾が指定されます。
また、第一引数に負の値を指定すると、配列の末尾から数えた位置が指定されます。

第一引数の数値は、1番目=0、2番目=1、・・・で指定されます。
実際に以下の具体例を見ながら確認してください。

let array1 = ["a", "b", "c", "d", "e" ];

//2(3番目)から1個を削除し、"x"を追加する。
array1.splice(2, 1, "x");
console.log(array1); //=["a", "b", "x", "d", "e"]

//2(3番目)から0個を削除し、"y"と"z"を追加する。
array1.splice(2, 0, "y","z");
console.log(array1); //=["a", "b", "y", "z", "x", "d", "e"]

//1(2番目)から5個を削除し、1と2と3を追加する。
array1.splice(1, 5, 1, 2, 3);
console.log(array1); //=["a", 1, 2, 3, "e"]

//-3(後ろから3番目)から1個を削除し、"123"を追加する。
array1.splice(-3, 1, "123"); 
console.log(array1); //=["a", 1, "123", 3, "e"]

//6(配列の長さ以上なので末尾)から2個(末尾の1個だけ)を削除し、"abc"を追加する。
array1.splice(6, 2, "abc"); 
console.log(array1); //=["a", 1, "123", 3, "e", "abc"]

//戻り値をarray1_lengthに代入
let array1_length = array1.splice(1, 3, "xyz"); 
console.log(array1); //=["a", "xyz", "e", "abc"]
console.log(array1_length); //=[1, "123", 3]

配列に配列を追加する(結合する)

非破壊的な結合:cancat()

構文 : 配列名.concat(配列1[, …[, 配列N]])
引数 : 連結させる配列や値(複数個指定可能)
戻り値: 結合された新しい配列

配列のconcat()メソッドを実行すると、戻り値(実行結果)には結合された新しい配列が返ります。
今までのメソッドと違い、元々の配列は変更されません。


let array1 = ["a", "b", "c"];
let array2 = [1, 2, 3];

//array1にarray2を結合した配列を、array12に代入
let array12 = array1.concat(array2);
console.log(array1); //=["a", "b", "c"] ※変化なし
console.log(array2); //=[1, 2, 3] ※変化なし
console.log(array12); //=["a", "b", "c", 1, 2, 3]

let array3 = ["x", "y", "z"];

//array1にarray2とarray3を結合した配列を、array123に代入
let array123 = array1.concat(array2,array3);
console.log(array123); //=["a", "b", "c", 1, 2, 3, "x", "y", "z"]

let str1 = "abc";

//array1にstr1とarray3を結合した配列を、array123に代入
//(配列だけでなく、文字列や数値なども追加可能)
let array2str1 = array2.concat(str1,array3);
console.log(array2str1); //=[1, 2, 3, "abc", "x", "y", "z"]

破壊的な結合:Array.prototype.push.apply()

こちらは、配列の末尾に要素を追加するpush()メソッドの派生になります。

push()メソッドでは配列を結合することはできませんが、
Array.prototype.push.apply() とすれば可能になるのです。

構文  : Array.prototype.push.apply(配列1,配列2)
第一引数: 結合する元の配列
第二引数: 結合する配列
戻り値 : 結合後の配列の要素数

配列1に、配列2を結合します。
(新しい配列を生成するのではなく、配列1を更新する形)

戻り値(実行結果)には、結合後の配列1の要素数が返ります。

結合する配列を複数指定することはできません。

let array1 = ["a", "b", "c"];
let array2 = ["x", "y", "z"];
 
Array.prototype.push.apply(array1, array2);
 
console.log(array1); //=["a", "b", "c", "x", "y", "z"]
console.log(array2); //=["x", "y", "z"] ※変化なし

上のコードは、下のコードと同じです。


let array1 = ["a", "b", "c"];
let array2 = ["x", "y", "z"];
 
array1.push(array2[0], array2[1], array2[2]);
 
console.log(array1); //=["a", "b", "c", "x", "y", "z"]
console.log(array2); //=["x", "y", "z"] ※変化なし

push()だと、結合(追加)したい配列の要素を1つずつ指定しないといけません。

結合(追加)したい配列の長さがわからない場合は、Array.prototype.push.apply()を、
配列の一部を追加したい場合は、push()を使うのが良いですね。

【補足】配列をそのままpush()で追加すると、以下のようになります。


let array1 = ["a", "b", "c"];
let array2 = ["x", "y", "z"];
 
array1.push(array2);
 
console.log(array1); //=["a", "b", "c", ["x", "y", "z"]]
console.log(array2); //=["x", "y", "z"] ※変化なし

それぞれの違いを理解して、自分がしたいことに応じて適切なメソッドを使えるようにしましょう。

まとめ

先頭に追加したい → unshift()
末尾に追加したい → push()
上記以外の部分に追加したい → splice()
元の配列を残したまま配列を結合したい → concat()
元の配列を上書きして配列を結合したい → Array.prototype.push.apply()

という使い分けになります。

各メソッドの細かい仕様(引数や戻り値など)については、記事の中で確認してください。

初心者の方へ

まずは、unshift()、push()、splice()の
それぞれがどのような処理になるか、間違えないように覚えてしまいましょう。

メソッドを覚える時は、引数と戻り値の違いにも注目しておいてください。
土台となるロジックを理解すれば、習得も早くなるはずです。

結合については、今後必要になった時にこの記事に戻って確認すると良いと思います。

Twitterでもプログラミングの有益情報を配信しています。フォローはこちらから→

おすすめの記事