JavaScript - 疎な配列の注意点

JavaScriptの配列で、 「要素が0から順に埋まっていない配列」を「疎な配列」といいます。

平たく言えば、間（あいだ）の要素が抜けている配列のことです。

反対に、要素がちゃんと埋まっている配列を「密な配列」といいます。

ここでは、「疎な配列」の説明と注意点を紹介します。

疎な配列とは？

要素が0から順に埋まっていない配列を「疎な配列」といいます。

例えば、Array()コンストラクタで作成したばかりの配列は「疎な配列」です。

var arr = new Array(3);

console.log(arr.length); // 3

console.log(arr); // Array [ <3 個の空スロット> ]

lengthプロパティの値は3なのですが、 中身は存在していません。

次のコードも疎な配列の例です。

var arr = [1, 2, 3];

arr[4] = 5;

console.log(arr.length); // 5

console.log(arr); // Array [ 1, 2, 3, <1 個の空スロット>, 5 ]

lengthプロパティの値は5ですが、実際の要素数は4です。

要素が存在しない部分は、ブラウザによって表示は異なりますが、 「空スロット」や「empty」などと表示されます。

「疎な配列」の注意点

先程の例で見たように、 「疎な配列」はlengthプロパティの値と、実際の要素数が一致しません。

lengthプロパティの方が大きくなります。

「疎な配列」をfor文でループしてみる

「疎な配列」を for文をループして、「インデックス」と「値」を表示してみます。

var arr = [1, 2, 3];

arr[4] = 5;

console.log(arr);

for (var i = 0; i < arr.length; i++){
	console.log(i, arr[i]);
}


// 実行結果
(5) [1, 2, 3, empty, 5]

0 1
1 2
2 3
3 undefined
4 5

ここで注目してほしいのは赤字部分、「3 undefined」と表示されている部分です。

これは、「undefined」が入っているのではなく、 存在しない要素を参照したために「undefined」が返ってきているだけです。

インデックスが3の要素は存在していません。

上の配列を表にすると次のようになります。

インデックス	値
0	1
1	2
2	3
4	5

まとめ

・JavaScriptでは、要素が0から順に埋まっていない配列を「疎な配列」といいます。

・「疎な配列」は、lengthプロパティの値と実際の要素数が一致しません。