JavaScriptでは、複数の値からなるデータを管理するために配列が良く使われます。
オブジェクトと混同してしまいがちですが、用意されているメソッドも多く、配列の操作に慣れておくと便利です。
今回は、配列の操作方法に焦点を当てて解説していきます。
配列の作成と要素へのアクセス
配列を作成するには、配列コンストラクタか配列リテラルを使います。
// 配列コンストラクタ
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特定の要素へのアクセスは、０から数える必要があるため、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インデックス[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]配列リテラルとスプレッド演算子を用いることで、簡潔なコードで要素の追加やコピーができます。
配列の分割代入
分割代入は、配列の要素を複数の変数に代入することができる構文です。
const arr = ['Lisa', 25, 'Canada'];
const [firstName, age, nationality] = arr;
console.log(firstName); // 'Lisa'
console.log(age); // 25
console.log(nationality); // 'nationality'配列要素を直接扱う代わりに変数で管理することができる分割代入は、可読性を重視する際に役に立ちます。
空白とカンマを用いることで、必要な配列要素のみ呼び出すことができます。
const arr = ['Lisa', 25, 'Canada'];
const [ , , nationality] = arr;
console.log(nationality); //'Canada', undefinedこの場合、'Canada'のみが呼び出され、他の要素はundefinedとなります。
まとめ
今回は、配列のさまざまな操作方法を解説しました。
配列は0から始まるインデックスで要素が管理されていることが扱いやすいポイントです。
今後、メソッドを使用した配列操作を行う際に役立てていきましょう。
コメント