この記事では、配列の基本操作の紹介とその方法について解説しています。配列はJavaScriptプログラミングで頻繁に利用されるデータ型であり、操作の幅も広いです。その分覚えることも多いですが、便利なメソッドもたくさんあります。しっかりと理解しましょう。
配列とは
配列とは、プログラミングでよく利用されるデータ型の一つで、インデックス番号と値で構成されるデータ群のことを指します。複数の情報を一つのデータとして扱うことができるようになるため大変便利なものです。
JavaScriptでは、配列に対してさまざまなメソッドやプロパティが用意されているため、データを配列で保持しておくことで幅広い対応が可能となります。
この記事では、配列の利用方法から状況に応じたメソッドの紹介、使い方を解説していきます。しっかりと理解して、配列操作をマスターできるようにしましょう。
JavaScriptの配列を使う方法のまとめ
配列の基本的な利用方法についてまとめておきます。
まず、JavaScriptで配列を利用するには以下のどちらか（または両方）の操作をする必要があります。
・宣言
・初期化
また、JavaScriptの配列では以下の操作が可能です。
・要素の取得
・要素の削除
・要素の追加
・要素の検索
・配列の結合
・配列の分割
・ループ処理
他にもありますが、基本的な操作は以上のものです。
これらの処理について、以下の章で解説していきます。
JavaScriptで配列を宣言する方法
JavaScriptでは、配列の宣言において以下の2種類の方法を利用できます。
・配列コンストラクタを利用する方法
・配列リテラルを利用する方法
それぞれの方法で異なる特徴があります。これから解説しますので、しっかりと理解しましょう。
Array(配列コンストラクタ)を使って配列を宣言する方法
JavaScriptの配列コンストラクタを利用して配列を宣言する方法に関して解説します。new Array();と記述することで配列を宣言できます。
以下にサンプルコードを示します。以下のように記述することで配列宣言となります。
var array = new Array();
console.log(array); //[]また配列コンストラクタの場合は、引数に整数を渡すことで「配列の長さ」を指定した宣言ができます。
var array = new Array(3);
console.log(array); //[, , ,]配列リテラル[]を使って配列を宣言する方法
JavaScriptの配列リテラルを利用して配列を宣言する方法に関して解説します。[]と記述することで配列を宣言できます。
以下にサンプルコードを示します。以下のように記述することで配列宣言となります。
var array = [];
console.log(array); //[]JavaScriptで配列を初期化する方法
次に、JavaScriptで配列を初期化する方法について解説します。配列の初期化でも「配列リテラル」と「配列コンストラクタ」のどちらかを利用します。それぞれ違いがありますので、そこをしっかり理解しましょう。
配列リテラルで配列を初期化する方法
配列リテラルを利用して配列を初期化するには、[と、]の間に要素を,（カンマ）区切りで記述すればOKです。
var array = ['aaa', 1, ['x', 'y', 'z'], {name: 'taro', age: 12}];
console.log(array); //[ 'aaa', 1, [ 'x', 'y', 'z' ], { name: 'taro', age: 12 } ]JavaScriptでは、基本的にはどんな型のデータでも配列の要素に設定できます。
配列コンストラクタで配列を初期化する方法
配列コンストラクタで配列を初期化するには、new Array();の(と（括弧）の間に、要素を,（カンマ）区切りで記述すればOKです。
var array = new Array('aaa', 1, ['x', 'y', 'z'], {name: 'taro', age: 12});
console.log(array);JavaScriptでは、基本的にはどんな型のデータでも配列の要素に設定できます。
ここまでは配列リテラルと差はないのですが、配列リテラルと大きく異なる点として、要素に数値を1つだけ設定した際の挙動が挙げられます。
配列リテラルに数値を1つだけ初期値として設定しても要素として扱われますが、配列コンストラクタに数値を1つだけ初期値として設定すると、要素数（配列の長さ）の宣言として扱われます。
var array1 = [3];
var array2 = new Array(3);
var array3 = new Array('aaa');
console.log(array1); //[3]
console.log(array2); //[, , ,]
console.log(array3); //[ 'aaa' ]上記のコードで分かる通り、配列リテラルで3を設定すると、「0番目の要素が3の配列」ができているのに対し、配列コンストラクタで3を設定すると「要素数3の配列」ができているのがわかります。
また、配列コンストラクタで数値以外の型のデータを1つだけ設定すると、普通に要素として扱われます。
なお、配列コンストラクタに正の整数以外の数値を1つだけ設定するとエラーとなります。
var array = new Array(-3);
console.log(array); //RangeError: Invalid array lengthJavaScriptで配列の要素を取得する方法
次に、配列の要素を検索し取得する方法について解説します。JavaScriptのプログラムにおいて、配列にある要素が存在するかどうか、また存在すればそれはどこに存在するのかという情報は重要になってきます。
この章では、そういった値の検索方法を4つ紹介します。それぞれ特徴がありますので違いをしっかり学び、目的に沿った方法を選択できるようにしましょう。
indexOfを使って配列の要素を取得する方法
JavaScriptのindexOfメソッドは、ある値が配列に存在するかどうかを検索し、存在する場合はそのインデックス番号を返すメソッドです。配列.indexOf(検索する値)と指定します。
検索する値が配列に存在しない場合は、-1が返されます。また、検索する値が配列内に複数存在する場合は、そのインデックス番号のうち小さな値が返されます。
配列を左から探索し、該当要素があったらそのインデックス番号を返すイメージです。
以下にサンプルコードを載せます。
var sample=['apple', 'banana', 'orange', 'banana', 'grape'];
console.log(sample.indexOf('banana')); //1
console.log(sample.indexOf('onion')); //-1lastIndexOf を使って配列の要素を取得する方法
JavaScriptのlastIndexOfメソッドは、indexOfメソッド同様、ある値が配列に存在するかどうかを検索し、存在する場合はそのインデックス番号を返すメソッドです。配列.lastIndexOf(検索する値)と指定します。検索する値が配列に存在しない場合には、-1が返されるのもindexOfメソッドと同じです。
indexOfメソッドと異なる点は、検索する値が配列内に複数存在する場合、そのインデックス番号のうち大きな値が返される点です。
配列を右から探索し、該当要素があったらそのインデックス番号を返すイメージです。
以下にサンプルコードを載せます。
var sample=['apple', 'banana', 'orange', 'banana', 'grape'];
console.log(sample.lastIndexOf('banana')); //3
console.log(sample.lastIndexOf('onion')); //-1someメソッドを使って配列の要素を取得する方法
JavaScriptのsomeメソッドは、配列の要素のうち少なくとも1つがsomeメソッドの引数に渡されるテストに通るかどうかを判定するメソッドです。配列.some(テスト関数)と記述します。テスト関数とは、ある処理や検証の結果、true or falseを返す関数のことです。
テスト関数には配列の各要素が順番に渡され、trueが返ってくると処理が止まり、someメソッドの戻り値としてtrueを返します。なお、全ての要素に対してテスト関数がtrueを返さない場合、someメソッドの返り値はfalseになります。
以下にサンプルコードを載せます。
var sample=['apple', 'banana', 'orange', 'banana', 'grape'];
var result1 = sample.some(function(element){
return (element === 'orange');
});
var result2 = sample.some(function(element){
return (element === 'onion');
});
console.log(result1); //true
console.log(result2); //falseeveryメソッドを使って配列の要素を取得する方法
JavaScriptのeveryメソッドは、配列の要素のうち全ての要素がeveryメソッドの引数に渡されるテストに通るかどうかを判定するメソッドです。配列.some(テスト関数)と記述します。テスト関数は、someメソッドの際に説明したものと同様です。
テスト関数には配列の各要素が順番に渡され、trueが返ってこなければ処理が止まり、everyメソッドの戻り値としてfalseを返します。なお、全ての要素に対してテスト関数がtrue返す場合、everyメソッドの返り値はtrueになります。
以下にサンプルコードを載せます。
var sample=['apple', 'banana', 'orange', 'banana', 'grape'];
var result1 = sample.every(function(element){
return (element !== 'orange');
});
var result2 = sample.every(function(element){
return (element !== 'onion');
});
console.log(result1); //false
console.log(result2); //trueJavaScriptで配列要素の追加と削除をする方法
次に、JavaScriptの配列での要素の追加と削除の方法について学びましょう。すごく基本的な操作になりますので、ここで出てくるメソッドは覚えておくようにしてください。
pushメソッドを使った方法
JavaScriptのpushメソッドは、配列に要素を追加するメソッドです。配列.push(追加する値)と指定します。配列の末尾に値が追加されます。
このメソッドは、破壊的メソッドになります。破壊的メソッドとは、メソッドの作用したデータ自体の内容を変更させてしまうメソッドのことです。pushメソッドを利用した場合、その作用させた配列自体に値が追加されます。
なおpushメソッドの戻り値は、値が追加された後の配列の長さ（要素数）になります。
以下にサンプルコードを示します。
var sample=['apple', 'banana', 'orange', 'banana', 'grape'];
var result = sample.push('meron');
console.log(sample); //[ 'apple', 'banana', 'orange', 'banana', 'grape', 'meron' ]
console.log(result); //6deleteを使った方法
JavaScriptのdelete演算子は、オブジェクトのプロパティを削除する演算子です。この演算子は配列でも利用ができます。指定の仕方は他のメソッドとは異なり、delete 配列[インデックス番号];となります。
delete演算子による配列削除の注意点として、配列の長さ（要素数）が変化しないことが挙げられます。例えば、ある配列のインデックス番号3の要素を削除した場合、その配列には要素なしのインデックス番号3が存在するといったイメージとなります。
以下にサンプルコードを載せます。
var sample=['apple', 'banana', 'orange', 'banana', 'grape'];
delete sample[2]
console.log(sample); //[ 'apple', 'banana', , 'banana', 'grape' ]配列要素の削除に関してはspliceメソッドも利用できます。詳しくは公式ドキュメントをご参照下さい
JavaScriptで配列の結合と分割をする方法
この章では、JavaScriptでの配列の結合と分割の方法ついて解説します。今回は、joinメソッドとsliceメソッドを紹介します。joinメソッドは配列の結合を担当し、sliceメソッドは配列の分割を担当します。それぞれの特徴をしっかり理解していきましょう。
joinメソッドを使った方法
JavaScriptのjoinメソッドとは、配列の全要素を（ある文字列を用いて）文字列として結合して返してくれるメソッドです。配列.join()または配列.join(結合文字列)と指定します。
引数が空の場合は、配列の要素それぞれの間に,(カンマ)が入った文字列が返されます。引数に結合文字列を渡した場合は、その文字列が配列の各要素の間に入った文字列が返されます。
以下にサンプルコードを載せます。
サンプルコード
var sample=['apple', 'banana', 'orange', 'banana', 'grape'];
result1=sample.join();
result2=sample.join(' and ');
result3=sample.join("\n");
console.log(result1);
console.log(result2);
console.log(result3);
結果
apple,banana,orange,banana,grape //result1
apple and banana and orange and banana and grape //result2
apple
banana
orange
banana
grape //result 3上記のサンプルコードのように、エスケープ文字を指定することも可能です。join関数は主に、配列データをファイル形式のデータに変換する際に利用されます。（csvファイル、tsvファアイル, txtファイルなど）
sliceメソッドを使った方法
JavaScriptのsliceメソッドは、配列の指定した範囲の要素を取り出し新しい配列として返してくれるメソッドです。配列.slice(開始位置)または配列.slice(開始位置, 終了位置)と指定します。
引数に開始位置のみを指定した場合は、配列の末尾要素までが取り出されます。また終了位置に関しては、指定した終了位置の要素は取り出されず、その一つ前の要素が取り出されます。
なお、開始位置を指定しない場合はエラーが起きず、配列の全要素が取り出されます。
以下にサンプルコードを示します。
var sample=['apple', 'banana', 'orange', 'banana', 'grape'];
result1=sample.slice();
result2=sample.slice(2);
result3=sample.slice(1, 3);
console.log(result1); //[ 'apple', 'banana', 'orange', 'banana', 'grape' ]
console.log(result2); //[ 'orange', 'banana', 'grape' ]
console.log(result3); //[ 'banana', 'orange' ]なお、sliceメソッドの引数には負の整数を指定することできます。負の整数を指定した場合は、配列の末尾要素から何番目の要素かを表すことになります。サンプルコードの配列['apple', 'banana', 'orange', 'banana', 'grape']でいうと、開始位置を-1とした場合、その位置はgrapeの位置であり、-5とした場合にはその位置はappleの位置となります。
var sample=['apple', 'banana', 'orange', 'banana', 'grape'];
result1=sample.slice(-3);
result2=sample.slice(-4, -2);
console.log(result1); //[ 'orange', 'banana', 'grape' ]
console.log(result2); //[ 'banana', 'orange' ]slice関数は、非破壊的メソッドです。つまり、作用させた配列の形は変化させません。こちら注意してください。
var sample=['apple', 'banana', 'orange', 'banana', 'grape'];
result=sample.slice(2);
console.log(result); //[ 'orange', 'banana', 'grape' ]
console.log(sample); //[ 'apple', 'banana', 'orange', 'banana', 'grape' ]JavaScriptで配列のループ処理を行う方法
次に、配列操作の核とも言えるループ処理について解説していきます。ループ処理といえば一般的なのはfor文やwhile文の利用なのですが、JavaScriptでは配列に対してのループ処理を行ってくれるメソッドが存在します。
配列に関するループ処理を行う場合は、メソッドを利用したほうが便利な場合が多いです。この章で、配列のループ処理に関しての理解を深めていきましょう。
forEach文を使った方法
JavaScriptのforEachメソッドは、配列に対してループ処理を行ってくれるメソッドです。配列.forEach(コールバック関数)と指定します。コールバック関数の引数には、各配列の要素が代入される変数を指定します。配列の各要素に対して、コールバック関数を実行してくれるイメージです。
以下にサンプルコードを示します。
サンプルコード
var sample=['apple', 'banana', 'orange', 'banana', 'grape'];
sample.forEach(function(value){
console.log(value);
});
結果
apple
banana
orange
banana
grapeコールバック関数の引数valueに配列の各要素が渡されていることがわかります。
forEachメソッドに関してはもっと引数に指定できるものがあるのですが、今回は解説しません。詳しくは公式ドキュメントをご参照下さい。
JavaScript配列操作のまとめ
今回は、配列操作のうち以下のものについて紹介しました。
・宣言
・初期化
・要素の取得
・要素の削除
・要素の追加
・配列の結合
・配列の分割
・ループ処理
上記の操作はどれも、JavaScriptプログラミングで配列を利用する際には必須となる操作なので、しっかり理解できるようにしましょう。
配列操作のそれぞれに対して、便利なメソッド等が存在していました。まだまだ配列に利用できるメソッドはたくさんありますので、ご自身で調べてみると良いです。
