【JavaScript】配列のlengthを効果的に使用する方法

JavaScript 配列のlengthプロパティとは

配列のlengthプロパティは、配列内の要素数を取得したり変更したりするのに使うことができます。

また、lengthプロパティはDense配列（密な配列）とSparse配列（疎な配列）によって挙動が異なったりします。

Dense配列（密な配列）とは、その要素が0から始まる連続したインデックスを持つ配列のことです。

密な配列の場合、lengthプロパティを使って配列の要素数を取得することができます。

let names = ['Tanaka', 'Aoki', 'Kato', 'Yamazaki'];

console.log(names.length); // 4

この例では、lengthプロパティは、names配列の要素数である4を返しています。

push()メソッドを使ってnames配列に要素を1つ追加すると、names配列のlengthは5となります。

names.push('Watanabe')

console.log(names.length) // 5

また、空の配列の場合、lengthは0となります。

let test = []

console.log(test.length) // 0

Sparse配列（疎な配列）とは、0から始まる連続したインデックスを持たない配列のことです。

例えば、[‘Tanaka’, , ‘Kato’, ‘Yamazaki’]は、要素のインデックスが0, 2, 3なので、Sparse配列です。

Sparse配列では、lengthプロパティは実際の要素数を返さず、最も大きいインデックスより1つ大きい数を返します。

let names = ['Tanaka', , 'Kato', 'Yamazaki'];

console.log(names.length) // 4

上記のnames配列の要素は’Tanaka’、’Kato’、’Yamazaki’の3つです。ですが、lengthプロパティは最も大きいインデックスである3より1つ大きい4を返します。

以下は、names配列のインデックス番号8に新しく要素を追加しています。

names[8] = 'Watanabe'

console.log(names) // ['Tanaka', empty, 'Kato', 'Yamazaki', empty × 4, 'Watanabe']
console.log(names.length) // 9

上記でインデックス番号8に要素を追加したら、インデックス番号4, 5, 6, 7にはemptyが入り、names.lengthは9を返します。

JavaScriptでは、配列のlengthの値を変更することで、配列から要素を削除したり、配列をまばらにしたりすることができます。

上記の例で解説していきます。

lengthに0を指定すると、要素を持った配列でも空の配列になります。

let names = ['Tanaka', 'Aoki', 'Kato', 'Yamazaki'];
names.length = 0;

console.log(names) // []

配列のlengthに最も大きいインデックスより小さいインデックスを指定すると、指定したインデックス以上の要素は削除されます。

let names = ['Tanaka', 'Aoki', 'Kato', 'Yamazaki'];
names.length = 2;

console.log(names) // ['Tanaka', 'Aoki']

配列のlengthプロパティに最大のインデックスより大きい値を指定すると、配列内にemptyができます。

let names = ['Tanaka', 'Aoki', 'Kato', 'Yamazaki'];
names.length = 10;

console.log(names) // ['Tanaka', 'Aoki', 'Kato', 'Yamazaki', empty × 6]