実践的な例で学ぶ JavaScript Array.length プロパティ

概要: このチュートリアルでは、JavaScript の配列の length プロパティと、その正しい扱い方について学びます。

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

定義上、配列の length プロパティは、符号なし 32 ビット整数であり、常に配列内の最大インデックスよりも数値的に大きいです。

length の値は 2³² です。つまり、配列は最大 4294967296 (2³²) 個の要素を保持できます。

length プロパティは、密な配列と疎な配列を含む、配列の型によって動作が異なります。

1) 密な配列

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

密な配列の場合、length プロパティを使用して、配列内の要素の数を取得できます。例:

let colors = ['red', 'green', 'blue'];
console.log(colors.length); // 3Code language: JavaScript (javascript)

この例では、length プロパティは 3 を返します。これは、colors 配列内の要素の数と同じです。

以下は、colors 配列にさらに 1 つの要素を追加します。

colors.push('yellow');
console.log(colors.length); // 4Code language: JavaScript (javascript)

これで、colors 配列の length プロパティは 4 になります。

colors 配列を空にすると、その長さは 0 になります。

colors = [];
console.log(colors.length); // 0Code language: JavaScript (javascript)

2) 疎な配列

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

たとえば、[10,, 20, 30] は、その要素のインデックスが 0、2、および 3 であるため、疎な配列です。

疎な配列では、length プロパティは実際の要素数を示しません。これは、最大インデックスよりも大きい数値です。例:

let numbers = [10, , 20, 30];
console.log(numbers.length); // 4Code language: JavaScript (javascript)

この例では、numbers 配列内の要素の数は 3 つ (10、20、および 30) です。最大インデックスは 3 です。したがって、length プロパティは 4 を返します。

以下は、インデックス 10 で numbers 配列に要素を追加します。

numbers[10] = 100;
console.log(numbers.length); // 11Code language: JavaScript (javascript)

この例では、length プロパティは 11 を返します。

JavaScript 配列の length プロパティの変更

JavaScript では、配列の length プロパティの値を変更できます。length の値を変更することで、配列から要素を削除したり、配列を疎にしたりできます。

1) 配列を空にする

length を 0 に設定すると、配列は空になります。

const fruits = ['Apple', 'Orange', 'Strawberry'];
fruits.length = 0;

console.log(fruits); // []Code language: JavaScript (javascript)

2) 要素を削除する

配列の length プロパティを最大インデックスよりも小さい値に設定すると、新しい長さ以上のインデックスを持つすべての要素が削除されます。

次の例では、fruits 配列の length プロパティを 2 に変更し、配列から 3 番目の要素を削除します。

const fruits = ['Apple', 'Orange', 'Strawberry'];
fruits.length = 2;

console.log(fruits); // [ 'Apple', 'Orange' ]Code language: JavaScript (javascript)

3) 配列を疎にする

配列の length プロパティを最大インデックスよりも大きい値に設定すると、配列は疎になります。例:

const fruits = ['Apple', 'Orange', 'Strawberry'];
fruits.length = 5;

console.log(fruits); // [ 'Apple', 'Orange', 'Strawberry', <2 empty items> ]Code language: JavaScript (javascript)

まとめ

配列の length プロパティは、符号なしの 32 ビット整数であり、常に配列の最大インデックスよりも数値的に大きいです。
length は、密な配列が持つ要素の数を返します。
疎な配列の場合、length は配列内の実際の要素数を反映しません。
length プロパティを変更すると、配列から要素を削除したり、配列を疎にしたりできます。

このチュートリアルは役に立ちましたか?