今回は配列の作成方法と利用方法について解説します。
本来であればMap、Setなどのコレクションオブジェクトの一種なので、その記事で解説したほうが良いのですが、利用頻度が高いため早めに説明しておきます。
目次
配列とは
配列とは値のまとまりをリストとして保持するデータのことです。
オブジェクトの場合は、プロパティと値のペアを複数格納しますが、配列の場合は添字（インデックスと言います）と値のペアを複数格納します。
そのさい、インデックスは自動的に付与されるので、明示的に記述する必要はなく便利です。
まずは基本中の基本、一次元配列について押さえましょう。
一次元配列
配列を作成するためには、カンマ（,）で区切った複数の値を[ ]で囲みます。
const 配列 = [ 値1, 値2, 値3,・・・ ]この [ ] を配列リテラルと呼びます。
配列に格納した値を取得したい場合は、変数のうしろに [ ] をつけて、インデックスを指定します。
// 配列の作成
const fruits = [ 'banana', 'orange', 'grape' ];
// 先頭の値を取得
console.log( fruits[0] );
> banana
// 二番目の値を取得
console.log( fruits[1] );
> orange
// 三番目の値を取得
console.log( fruits[2] );
> grape上の例を見ると、先頭の配列を取得するためには「0」を指定していることが分かると思います。
配列のインデックスは1からではなく0から始まることに注意しておきましょう。
配列の値を変更したい場合は、インデックスを指定して値を再代入します。
fruits[1] = 'apple';
console.log( fruits[1] );
> apple配列の長さを知りたい場合は、「配列.length」で取得できます。
// fruits配列の長さを取得
let length = fruits.length;
console.log( length );
> 3多次元配列
配列は入れ子にすることができます。
例えば、２週間分の気温を配列データにすることを考えてみましょう。
下記のコードは一週間区切りで気温データをまとめて、各週の気温データを配列にする例です。
// 一週間区切りで気温データをまとめる
// temperature[0] が一週目の気温データ
// temperature[1] が二週目の気温データ
// 気温データは月曜始まりとする
const temperature = [
[15, 18, 17, 20, 20, 21, 22, 21],
[17, 14, 18, 11, 15, 20, 18, 19]
];
// 一週目の水曜日の気温
console.log( temperature[0][2] );
> 17
// 二週目の土曜日の気温
console.log( temperature[1][5] );
> 18このように入れ子になった配列のデータを取得するためには [ ] を連続でつなげて記述します。
もうすこし丁寧に見ていきましょう。
temperature配列には、２つの配列データが格納されています。
そのため、最初の [ ] でこの２つの配列データのどちらを取得するかを指定しています。
temperature[0] // 一週目のデータを表した配列
> [15, 18, 17, 20, 20, 21, 22, 21]
temperature[1] // 二週目のデータを表した配列
> [17, 14, 18, 11, 15, 20, 18, 19]この最初の [ ] で取得したデータも配列です。
そこへ二つ目の [ ] を重ねることで、最初の [ ] で取得した配列のデータにアクセスできるわけです。
// temperature[0] は [15, 18, 17, 20, 20, 21, 22, 21] という配列データ
temperature[0][0] // 一週目のデータの1番目のデータ
> 15
temperature[0][1] // 一週目のデータの2番目のデータ
> 18多次元配列は少しややこしく感じますが、慣れてしまえばそれほど難しくありません。
基本の使い方をしっかり押さえておきましょう。
配列に格納できるデータ
配列には全てのデータ型を格納できます。
また、一つの配列内でデータ型が違う値も格納することができます。
const arr = [ '太郎', 25, true ]; // 文字列、数値、真偽値が混ざった配列長さの異なる複数の配列やオブジェクトも格納できます。
const arr = [
[15, 20, 21, 22, 21],
[17, 14, 18],
{ name: '太郎', age: 25 }
];しかし、配列の中のデータ型は一つの種類に揃えることがプログラマーの間では一般的です。
その方がプログラマーにとってわかりやすく、バグを抑えやすくなるからです。
複数のデータ型を一つにまとめたければオブジェクトを利用しましょう。
配列の要素の追加・削除
配列に要素を追加したり削除したりすることができます。
以下、４種類の操作を覚えておきましょう。
配列の末尾に要素を追加 – push
配列の末尾に要素を追加したい場合は「配列.push」を使います。
const fruits = [ 'banana', 'orange', 'grape' ];
// 末尾に'apple'を追加
fruits.push('apple');
console.log( fruits );
> [ 'banana', 'orange', 'grape', 'apple' ]配列の末尾の要素を削除 – pop
配列の末尾の要素を削除したい場合は「配列.pop」を使います。
const fruits = [ 'banana', 'orange', 'grape' ];
// 末尾の'grape'を削除
fruits.pop();
console.log( fruits );
> [ 'banana', 'orange' ]このpopで削除した要素を別の変数に格納することもできます。
const fruits = [ 'banana', 'orange', 'grape' ];
// 削除した要素をvalに格納
let val = fruits.pop();
console.log( val );
> grape配列の先頭に要素を追加 – unshift
配列の先頭に要素を追加したい場合は「配列.unshift」を使います。
const fruits = [ 'banana', 'orange', 'grape' ];
// 先頭に'apple'を追加
fruits.unshift('apple');
console.log( fruits );
> [ 'apple', 'banana', 'orange', 'grape' ]配列の先頭の要素を削除 – shift
配列の先頭の要素を削除したい場合は「配列.shift」を使います。
const fruits = [ 'banana', 'orange', 'grape' ];
// 先頭の'banana'を削除
fruits.shift();
console.log( fruits );
> [ 'orange', 'grape' ]このshiftで削除した要素を別の変数に格納することもできます。
const fruits = [ 'banana', 'orange', 'grape' ];
// 削除した要素をvalに格納
let val = fruits.shift();
console.log( val );
> bananaまとめ
今回は配列について説明しました。
次回は演算子の基本について説明していきます。