JavaScriptでは、複数の値からなるデータを管理するために「配列(Array)」が良く使われます。

以前の記事では、配列のデータ型を取り上げ、そこでは配列に格納される要素には順番が決まっていることが特徴的であると述べました。

オブジェクトと混同してしまいがちな配列ですが、今回は配列の操作方法に焦点を当てて解説していきます。

配列(Array)とは

「配列(Array)」とは、複数の要素からなるデータを保管し管理するための構造です。
配列に保管される要素には順番が決まっており、0から始まる一連の整数として扱われます。

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

配列を作成する方法は2つあり、配列コンストラクタ「Array()」または、配列リテラル「[]」を使います。

//配列コンストラクタ
const arr = new Array(1, 2, 3, 4);
console.log(arr); //[1, 2, 3, 4]

//配列リテラル
const arr = [1, 2, 3, 4];
console.log(arr); //[1, 2, 3, 4]

配列コンストラクタと配列リテラルの出力結果に違いはありませんが、数値を格納する際には注意が必要です。以下をみてみましょう。

//配列コンストラクタ
const arr = new Array(2);
console.log(arr); //[empty × 2]または[undefined, undefined]

//配列リテラル
const arr = [2];
console.log(arr); //[2]

配列コンストラクタでは、数値1つのみを格納する場合、「空の配列要素をいくつ持っているか」という結果が出力されます。そのため、「new Array(2)」と宣言し、出力結果を検証すると、「[empty×2]」または「[undefined, undefined]」となります。

一方、配列リテラルでは、数値1つのみを格納した場合でも、通常と同じように数値が配列の要素としてそのまま格納されます。

このように数値1つだけを格納する場合を想定し、基本的には配列リテラルを使用する方が良いでしょう。

配列の要素にアクセスするには、「[]」の中に配列のインデックス番号を指定します。
また、「length」を使用することで配列に格納されている要素の数を調べることもできます。

const arr = [1, 2, 3, 4, 5];

console.log(arr[0]);  //1
console.log(arr.length);  //5

特定の要素へのアクセスは、0から数える必要があるため、1番はじめの要素にアクセスする場合は、「[0]」と指定します。また、「length」を使用することにより、要素が5つ格納されていることがわかります。

配列の書き換え

特定の要素にアクセスする方法で、要素を書き換えることもできます。

const lunchArray = [
  'Pasta',
  'Pizza',
  'Hamburger',
  'Ramen'
];

lunchArray[0] = 'Pancake';
lunchArray[3] = 'Sushi';

console.log(lunchArray);  //['Pancake', 'Pizza', 'Hamburger', 'Sushi']
console.log(lunchArray.length); //4

実行結果
JavaScript array

インデックス[0]の「’Pasta’」が「’Pancake’」に書き換わり、インデックス[3]の「’Ramen’」が「’Sushi’」に書き換わりました。

配列の初期化

配列コンストラクタや配列リテラルを使用して、配列を初期化することができます。
どちらも空の配列を用意し、初期化を行います。

const arr = new Array();  //配列コンストラクタ
const arr = []; //配列リテラル

配列のスプレッド演算子

スプレッド演算子「…」を用いると、さまざまな状況に応じて配列を展開することができます。
スプレッド演算子は、オブジェクトにも使用可能です。

const arr = [1, 2, 3];

//配列をクローンする
const cloneArr = [...arr];
console.log(cloneArr);  //[1, 2, 3]

//クローンした配列に要素を追加し、新しい配列を生成
const newArr = [...arr, 4, 5];
console.log(newArr);  //[1, 2, 3, 4, 5]

//配列をマージする
const mergeArr = [...arr, ...cloneArr];
console.log(mergeArr);  //[1, 2, 3, 1, 2, 3]

実行結果
JavaScript array

配列リテラルとスプレッド演算子を用いることで、簡潔なコードで要素の追加やコピーができるようになります。

配列の分割代入

分割代入は、配列の要素を複数の変数に代入することができる構文です。オブジェクトにも使用することができます。

const arr = ['Lisa', 25, 'Canada'];
const [firstName, age, nationality] = arr;

console.log(firstName); //'Lisa'
console.log(age); //25
console.log(nationality); //'nationality'

「複数の変数に代入できる」という点において以下の例をみてみるとイメージしやすいです。

実行結果
JavaScript array

配列要素を直接扱う代わりに変数で管理することができる分割代入は、可読性を重視する際に役に立ちます。

また、空欄とカンマを用いることで、必要な配列要素のみ呼び出すことができます。

const arr = ['Lisa', 25, 'Canada'];
const [ , , nationality] = arr;

console.log(nationality);   //'Canada', undefined

この場合、「’Canada’」のみが呼び出され、他の要素は「undefined」となります。

まとめ

今回は、JavaScirptにおける配列のさまざまな操作方法を解説しました。
配列は0から始まるインデックスで要素が管理されていることが扱いやすいポイントです。

配列には、より細かい操作を可能にする多くのメソッドが用意されていますが、まずは基本操作を理解することが大切です。
今後、メソッドを使用した配列操作を行う際に役立てていきましょう。

Javascript関連記事