Search

検索したいワードを入力してください

2019年03月28日

JavaScriptで配列の結合を行う方法について解説

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,7

コード例の戻り値を見ると、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,7

上記のコード例をみると結合した配列オブジェクトは、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,seven

戻り値を見ると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をマスターする道のりの上で大きな一歩になりますので、しっかり学習していきましょう。

【PR】多くの人がプログラミングを諦めてしまう理由をご存知ですか?



近年プログラミングを勉強する人が増えています。

プログラミング学習者の多くは独学から取り組もうとしますが、だいたい80%ほどは3ヶ月も続かずに諦めてしまいます。早い人は1日目で。

多くの人がプログラミングを独学しようとして諦める理由は、次の3つ。
●モチベーションが維持できない
●エラーの原因・解決方法が分からない
●どう学習すればよいか分からない

TechBoostというプログラミングスクールでは、みんなと一緒にプログラミングをするのでモチベーションの維持ができ、分からないことがあればマンツーマンで教えてくれ、徹底的に研究された初心者向けの教材が揃っています。

TechBoostを卒業後、実際にエンジニアとして転職した方もいるほど。

本気でプログラミングを学びたい方は、一度無料のカウンセリングでご相談ください。プログラミングを嫌いになる前に。

tech boostについて

オーダーメイド型の学習コンテンツを提供する「tech boost」 は、エンジニアのキャリア支援に特化したサービスを複数展開している株式会社Branding Engineerが運営しているプログラミングスクールです。最短3ヶ月間で、未経験から『プログラミングの基礎』、『実際に業務で必要となるスキル』、『今のトレンドとなっている知識』まで学べ、ご希望の方にはプロのキャリアアドバイザーによる就業支援を行うことができます。

tech boost卒業生インタビュー

tech boostの卒業生の声を聞きました。あなたがプログラミングを学びたい理由を、一度考えてみてください。
営業→Javaエンジニア→Rubyエンジニアと転向し、第一志望のFinTech企業で働く山下さん
元営業、ビジネスのわかるエンジニアを目指す菅原さん
サンフランシスコに交換留学し、シリコンバレーのVCでインターン中の梅本さん
予備校の営業から半年でエンジニア転職を果たした小田島さん

tech boostの口コミ



Related