【JavaScript】配列（Array）- 複数の値を記憶するデータ構造

JavaScriptの配列について解説します。

配列

配列は“複数の値を記憶するデータ構造”です。

数値型や文字列型と同様に型があり、object型に分類されます。

データ構造

配列型の変数と記憶領域の関係をイメージで掴みましょう。

数値型や文字列型の変数は１つの記憶領域を持ちますが、配列型は複数の記憶領域を持つことが可能です。

１つ１つの記憶領域との繋がりには『キー』と呼ぶ名前があります。

キー

キーは“配列と記憶領域の繋がりに対する名前”です。

キーには数値や文字列などを使って任意の名称を命名できます。

また、数値の場合は『キー』ではなく、『インデックス』や『添字』という名称で呼ぶことがあります。

配列の生成

配列を扱うには初めに配列を生成します。

基本構文

配列生成の構文は２通りあります。

変数 = Array()

変数 = []

１つ目はArrayオブジェクトを使用した宣言方法です。

オブジェクトについて未学習の方は、ここでは構文のみ覚えていただければ問題ありません。

また、２つ目は１つ目の短縮構文と呼ばれる記法で、こちらの方が一般的に多く使われます。

サンプル

___ih_hl_start
let data1 = Array();
let data2 = [];
___ih_hl_end

console.log(typeof(data1));
console.log(typeof(data2));

object
object

１〜２行目で２つの配列を生成し、それぞれ変数data1と変数data2に記憶しました。

typeof関数で型を取得し、console.logで出力していますが、その結果からどちらもオブジェクト型であることが分かります。

配列の初期化

配列は生成時に初期値を設定できます。

基本構文

変数 = [値, 値, 値 ...]

角括弧（[]）の中に初期値をカンマ（,）区切りで記述します。

値は任意の数だけ記述可能です。（正確には記憶領域で容量までになります。）

各値のキーは先頭から0,1,2…と数値の連番が割り当てられます。

サンプル

___ih_hl_start
let data = [ "a", "b", "c" ];
___ih_hl_end

console.log(data);

(3) ['a', 'b', 'c']
0: "a"
1: "b"
2: "c"
length: 3

１行目で配列の生成と同時に３つの値（"a"、"b"、"c"）で初期化しています。

コンソールの出力結果から、キーとその値を記憶していることが確認できます。

また、length: 3は配列のサイズ（値の数）を示しており、このサンプルでは３つの値を記憶していることが分かります。

値の取得

配列の値を取得するにはキーを指定します。

基本構文

変数[キー]

キーの部分は取得する値のキーです。

サンプル

let data = [ "a", "b", "c" ];

___ih_hl_start
console.log(data[0]);
console.log(data[1]);
console.log(data[2]);
___ih_hl_end

a
b
c

３〜５行目のdata[0]、data[1]、data[2]が配列の値の取得です。

指定したキー（インデックス）に対応する値を取得できていることが、コンソールの出力結果から分かります。

値の記憶

配列に値を記憶するにはキーを指定して、代入演算子で値を代入します。

基本構文

変数[キー] = 値

値をキーの部分で指定した名称で記憶します。

また、既に同じキーが存在する場合は値を上書きし、存在しない場合は新しい記憶領域に指定したキーで値を記憶します。

サンプル

let data = [ "a", "b", "c" ];

___ih_hl_start
data[0] = "x";
data[3] = "y";
___ih_hl_end

console.log(data);

(4) ['x', 'b', 'c', 'y']
0: "x"
1: "b"
2: "c"
3: "y"
length: 4

３〜４行目が配列への値の記憶（代入）です。

３行目は既存キーに代入したため、元の値"a"が"x"で上書きされました。

４行目は新規キーに代入したため、他の値を書き換えることなく追加されています。

配列のサイズ

配列のサイズ（値の数）はlengthプロパティで取得可能です。

プロパティが未学習の方は、ここでは構文のみ覚えていただければ問題ありません。

基本構文

変数.length

サンプル

let data = [ "a", "b", "c" ];

___ih_hl_start
console.log(data.length);
___ih_hl_end

data[3] = "d";

___ih_hl_start
console.log(data.length);
___ih_hl_end

3
4

３行目と７行目のdata.lengthの部分で配列のサイズを取得しています。

配列の値は３行目時点では"a"、"b"、"c"のため、サイズは3です。

７行目時点ではその直前に"d"を新規キーで追加したため、サイズは4になっています。

注意点

インデックス（キー）は0から始まります

例えば次のような配列の有効なインデックスは0、1、2です。

let data = [ "a", "b", "c" ];

console.log(data[0]);
console.log(data[1]);
console.log(data[2]);

a
b
c

存在しないインデックスにアクセスすると未定義（undefined）となりますので注意しましょう。

let data = [ "a", "b", "c" ];

console.log(data[3]);

undefined