JavaScriptの配列オブジェクトは頻出するオブジェクトの一つです。この記事では、配列オブジェクトの結合の仕方について、concatメソッドとpushメソッドの2つの方法について、基本的な使い方や注意点、その挙動を説明しています。
結合とは
JavaScriptで結合とは配列同士をつなぎ合わせ、新たな配列を作り出すことを言います。配列とは、JavaScriptのデータ型のひとつであり、角括弧( [ )で覆われ、複数の値を格納したオブジェクトです。
// 配列オブジェクト
array = [value1, value2, value3,...]複数の配列オブジェクトがある場合や、要素を分解して、それぞれ各配列に格納した場合など、それらの配列を一つの配列にしたい場合があります。
こういった場合に使用されるのが、JavaScriptの配列の結合です。いろいろな場面で使用する機会がある基本的な機能の一つです。今回はこの配列の結合について説明していきます。
JavaScriptで配列の結合を行う方法
JavaScriptで配列の結合を行う方法は2つあります。それはconcatメソッドとpushメソッドを使う方法です。どちらも配列オブジェクトのメソッドですが、挙動や結果に違いがあります。
それぞれの特徴をおさえ、使用場面ごとに適切なメソッドが使えるよう、しっかり理解していきましょう。
concatメソッドの基本的な書き方
JavaScriptのconcatメソッドは、配列オブジェクトのメソッドですが、元の配列オブジェクトに影響を及ぼさず、結合された新たなオブジェクトを生み出すという特徴があります。
配列の結合を非常に簡単に行うことができ、また新たな配列を生成する分、元の配列を他の場面で再利用することもでき、挙動や結果がシンプルでわかりやすいメソッドですが、大規模な処理を行う場合は実行速度が遅くなるというデメリットもあります。concatメソッドの基本的な構造は以下になります。下記を見て確認してみましょう。
// concatの使い方 - 基本構造
var array1 = ArrayOBJ1;
var array2 = ArrayOBJ2;
var new_array = array1.concat(array2, array3,...);冒頭2つの配列オブジェクトを変数に格納し、定義しています(array1とarray2)。そして、最終段でarray1のメソッドという形でconcatメソッドを使用し、array2を引数で取っています。その結果、new_arrayという新たな配列オブジェクトを格納した変数が生成されています。
基本構造を見てもわかるように、concatでは複数の配列オブジェクトを引数に取ることもできます。それでは次章でコード例を見て、より具体的にその挙動や結果を確認してみましょう。
concatメソッドを使って配列の結合を行う方法
さきほどconcatメソッドの基本構造について学習しました。次は具体的なコード例を用いて、concatメソッドの具体的な挙動と実行結果を確認しましょう。
// concatの使い方 - 基本1
var array1 = [1,2,3,4,5,6,7];
var array2 = ['1','2','3','4','5','6','7'];
var new_array = array1.concat(array2);console.log('array1: '+array1);
console.log('array2: '+array2);
console.log('new_array: '+new_array);// 戻り値
array1: 1,2,3,4,5,6,7
array2: 1,2,3,4,5,6,7
new_array: 1,2,3,4,5,6,7,1,2,3,4,5,6,コード例の戻り値を見ると、array1とarray2が結合し、new_arrayという新たな配列が生成されていることがわかります。一方でarray1の値は変わっておらず、元の値のままであることがわかります。
またconcatメソッドでは複数の配列オブジェクトをいっぺんに結合できるという特徴があります。これもコード例を見て確認しましょう
// concatの使い方 - 基本2
var array1 = [1,2,3,4,5,6,7]
var array2 = ['1','2','3','4','5','6','7']
var array3 = ['one','two','three','four','five','six','seven']
var new_array = array1.concat(array2, array3)console.log('array1: '+array1);
console.log('array2: '+array2);
console.log('array3: '+array3);
console.log('new_array: '+new_array)// 戻り値
array1: 1,2,3,4,5,6,7
array2: 1,2,3,4,5,6,7
array3: one,two,three,four,five,six,seven
new_array: 1,2,3,4,5,6,7,1,2,3,4,5,6,7,one,two,three,four,five,six,seven戻り値を見ると、concatメソッドで複数の配列オブジェクトを一度に結合できることがわかります。また、array1の値も影響されていません。以上の2つのコード例からconcatメソッドの使いやすさがわかります。
pushメソッドの基本的な書き方
続いてはpushメソッドについて説明していきます。JavaScriptのpushメソッドもまた、配列オブジェクトのメソッドですが、元の配列オブジェクトの値が変わってしまい、3つ以上の配列を結合することができないという特徴があります。
一方で、計算量が多い場合、concatメソッドよりも断然早く実行が完了されるという特徴もあります。まずは基本構造を確認しましょう。
// pushの使い方 - 基本構造
var array1 = ArrayOBJ1;
var array2 = ArrayOBJ2;
Array.prototype.push.apply(array1,array2)こちらも非常にシンプルですが、push.applyで配列の結合が実行されます。pushだけの場合の挙動については後述します。
concatのように配列オブジェクトを格納した変数に繋げる形でなく、Arrayという根本的なオブジェクトをそのまま指定している点がポイントになります。次章で具体的なコード例を見ていきましょう。
pushメソッドを使って配列の結合を行う方法
ここでは具体的なコード例を見ていきます。以下のコード例を見てみましょう。
// pushの基本的な使い方
var array1 = [1,2,3,4,5,6,7];
var array2 = ['1','2','3','4','5','6','7'];
Array.prototype.push.apply(array1, array2)
console.log('array1: '+array1);
console.log('array2: '+array2);
// 戻り値
array1: 1,2,3,4,5,6,7,1,2,3,4,5,6,7
array2: 1,2,3,4,5,6,上記のコード例をみると結合した配列オブジェクトは、Array.prototype.push.appleyメソッドの第1引数に指定されたarray1を改変する形で生成されていることがわかります。これがconcatメソッドとの大きな違いになります。
pushメソッドの基本的な使い方はこのようになりますが、いくつか注意点もあります。次はそれを見ていきましょう。
pushメソッドの注意点1:複数の配列を結合することはできない
1つ目の注意点は、pushメソッドではconcatメソッドと違い、複数の配列を結合することはできないということです。concatメソッドでは、引数に配列オブジェクトをいくつも指定することができました。
しかし、pushメソッドでは2つの配列オブジェクトを指定することしかできません。次のコード例で確認してみましょう
// pushの基本的な使い方 - 複数配列の結合はできない
var array1 = [1,2,3,4,5,6,7];
var array2 = ['1','2','3','4','5','6','7'];
var array3 = ['one','two','three','four','five','six','seven']
Array.prototype.push.apply(array1, array2, array3)
console.log('array1: '+array1);
console.log('array2: '+array2);
console.log('array3: '+array3);
// 戻り値
array1: 1,2,3,4,5,6,7,1,2,3,4,5,6,7
array2: 1,2,3,4,5,6,7
array3: one,two,three,four,five,six,seve戻り値を見るとarray1とarray2しか結合しておらず、array3は引数には指定できていても結合がなされていないことがわかります。
エラーは出ないので、concatメソッドと同じような感覚で使ってしまったとしても、意図した配列を生成できないので注意が必要です。
pushメソッドの注意点2:結合にはapplyが必要
次の注意点は、pushメソッドで結合させる場合はapplyメソッドもワンセットになるということです。配列オブジェクトについて勉強するとpushメソッドで配列の追加を行う方法が紹介されています。
この配列の追加と結合の違いは、pushメソッドを単独で利用するか、push.applyメソッドという形式で使用するかの違いになります。挙動面での違いをコード例で確認しましょう
// pushの基本的な使い方 - 配列の追加になってしまうケース
var array1 = [1,2,3,4,5,6,7];
var array2 = ['1','2','3','4','5','6','7'];
var new_array = array1.push(array2);
console.log(array1);
console.log(array2);
//戻り値
[ 1, 2, 3, 4, 5, 6, 7, [ '1', '2', '3', '4', '5', '6', '7' ] ]
[ '1', '2', '3', '4', '5', '6', '7' 戻り値を見るとpushメソッドだけを利用した場合、array1の後尾にarray2が配列オブジェクトとして追加されてしまっていることがわかります。
push.applyの場合、配列の値の各値が結合されて新しい配列ができるのと異なります。この点が2つ目の注意点になります。これも見落としていると意図しない結果を引き起こす可能性があるため、注意が必要です。
JavaScriptの配列操作をマスターしよう
以上がJavaScriptで配列を結合する方法についてです。いかがでしたでしょうか。JavaScriptでは配列は基本的なオブジェクトの一つであり、利用シーンが多く、利用の仕方も多岐に渡ります。
この配列オブジェクトの操作を覚えることはJavaScriptをマスターする道のりの上で大きな一歩になりますので、しっかり学習していきましょう。
