JavaScriptのきほんを学ぼう

■第17話：配列操作の基本

（最終更新日：2023.04.22）

「配列をうまく扱いたい」

プログラミングをする上で欠かせないのが、配列。 これらを上手く操れれば、ぐっとプログラミング力が向上する。 今回は、そんな配列の基本的な操作について説明する。 基本的な内容ではあるが、今後も末長く使える重要な技術である。

１. 配列の作成と要素へのアクセス

JavaScriptでは、配列を作成するためにいくつかの方法がある。 一般的な方法は、配列リテラルを使用する方法と、Arrayコンストラクタを使用する方法になる。 配列リテラルは下記のarr1で、良く見られる作成方法だ。 Arrayコンストラクタはarr2の方で、Arrayをnewをすることで作成できる。 Arrayコンストラクタというよりは、Arrayクラスをnewしていると考えた方が分かりやすい。 実際、Arrayクラスの中にあるpush()、pop()、shift()、unshift()、splice()などの各種メソッドを利用することができる。 これら、二つの方法により、配列を作成することができる。

配列内の要素にアクセスするには、インデックスを使用する。インデックスは0から始まる。 以下の例では、配列arrの最初の要素にアクセスしている。 また、outOfRangeElementのようにインデックスが配列の長さを超える場合、要素が用意されていないのでundefinedが返される。

２. 配列の要素の追加・削除

配列の末尾に要素を追加するには、push()メソッドを使用する。 以下では、arr1の末尾に4を追加している。

配列の先頭に要素を追加するには、unshift()メソッドを使用します。 以下では、arr2の先頭に0を追加している。

配列の末尾の要素を削除するには、pop()メソッドを使用する。 下記は、arr3の末尾の要素4を削除している。

配列の先頭の要素を削除するには、shift()メソッドを使用する。 下記は、arr4の先頭の要素1を削除している。

配列の任意の位置に要素を追加・削除するには、splice()メソッドを使用する。 第一引数は、追加、削除する要素の位置、第二引数は削除する要素数、第三引数より後は追加する要素を指定する。 下記のarr5の最初のspliceでは、要素の2番目の位置に3を追加している。 また、その後のarr5のspliceでは、要素の1番目の位置から2つ分の要素を削除し、6と7を追加している。

これらの基本的なメソッドが使えるようになると、JavaScriptの配列操作がぐっと楽になるはずだ。 まずは、ここから使いこなせるようになろう。

３. 配列の長さの取得

JavaScriptの配列では、lengthプロパティを使用して配列の長さ（要素数）を取得できる。 lengthプロパティは、配列に格納されている要素の数を示す整数値を返す。 以下に、配列の長さを取得する例を示す。

lengthプロパティは配列のサイズを調べたり、ループ処理で配列を操作する際に便利だ。 例えば、forループを使って配列のすべての要素にアクセスする場合、lengthプロパティを使用してループの終了条件を指定できる。 下記にその例を示す。arr.lengthで繰り返し回数を規定している。

lengthプロパティは、配列の要素数を変更することもできる。 例えば、配列の長さを減らすと、末尾の要素が削除される。 逆に、配列の長さを増やすと、新しい要素がundefinedで初期化される。

４. 配列の反転、並び替え、結合

JavaScriptの配列はreverse()メソッドを使用して、要素を反転させることができる。 例えば、下記では1,2,3,4,5と格納されていた配列を、reverse()メソッドで5,4,3,2,1に反転させている。

sort()メソッドを使用して、配列の要素を並び替えることができる。 デフォルトでは、要素が文字列として比較され、昇順に並び替えられる。 下記では、バラバラに格納されていた要素が、1,2,3,4,5という昇順に並び変えられている。

sort()メソッドに比較関数を渡すことで、独自の並び替え基準を定義できる。 例えば、数値の降順で並び替えるには以下のようにする。 (a, b) => b - aという比較関数で、arr3は降順になった。

concat()メソッドを使用して、複数の配列を結合することができる。 このメソッドは新しい配列を返し、元の配列は変更されない。 下記では、combinedArrayにarr4[1,2,3]とarr5[4,5,6]を結合した結果[1,2,3,4,5,6]を格納している。

配列の反転、並び替え、結合を行うメソッドを使いこなせるようになると、配列操作がさらに容易になる。 これらのメソッドを組み合わせることで、さまざまな操作を簡単に実行できる。

５. まとめ

今回は基本的な配列操作について説明した。 これらの操作が分かっていれば、大抵の処理は可能になる。 まずは、基本的なこれらの操作を覚えた上で、便利な手法やメソッドを覚えていこう。

▼参考図書、サイト

  配列をソートする（sort, reverse）　　まくまくJavaScriptノート
  JavaScriptで配列の要素を削除する：shift(), pop(), splice() 　　UX Milk