【JavaScript】配列を空にする様々な方法！

JavaScriptでは、配列の要素を削除して空にする方法がいくつかあります。それぞれの方法には特徴があり、目的に応じて使い分けることで、効率的に配列を操作できます。

この記事では『配列の要素を空にする方法』について、以下の内容をサンプルコードを用いてわかりやすく解説します。

  • lengthプロパティで配列を空にする
  • splice()メソッドで配列を空にする
  • 空の配列を代入して配列を空にする
  • pop()メソッドで配列を空にする
  • shift()メソッドで配列を空にする
  • 配列が空かどうかを判定する方法

lengthプロパティで配列を空にする

配列のlengthプロパティに0を代入すると、その配列のすべての要素が削除され、配列が空になります。サンプルコードを以下に示します。

let array = [1, 2, 3, 4];
console.log(array); // [1, 2, 3, 4]

array.length = 0;
console.log(array); // []

この方法はシンプルなので一番よく使います。

splice()メソッドで配列を空にする

splice()メソッドの引数に0を指定すると、その配列のすべての要素が削除され、配列が空になります。サンプルコードを以下に示します。

let array = [1, 2, 3, 4];
console.log(array); // [1, 2, 3, 4]

array.splice(0);
console.log(array); // []

空の配列を代入して配列を空にする

空の配列を代入することで、既存の配列が空になります。サンプルコードを以下に示します。

let array = [1, 2, 3, 4];
console.log(array); // [1, 2, 3, 4]

array = [];
console.log(array); // []

しかし、空の配列を代入すると、代入されたarrayは新しい配列インスタンス（今回の場合は空の配列）を参照するようになります。そのため、もしarrayを他の変数に代入していた場合、その変数は古いインスタンスを参照し続けます。ゆえに、arrayは空でも、他の変数は元の配列の値を保持したままになります。この動作がわかるサンプルコードを示します。

let array = [1, 2, 3, 4];
let anotherArray = array;

// `array`に新しい空の配列を代入
array = [];
console.log(array);        // []
console.log(anotherArray); // [1, 2, 3, 4]

このように、arrayに空の配列を代入すると、anotherArrayは古いインスタンスを参照し続けるため、arrayとは異なる内容となります。この動作により、不具合の原因になることもあります。

一方、lengthプロパティやsplice()メソッドを用いた場合、元の配列の参照が保持され続けるので、arrayとanotherArrayの両方を空にすることができます。サンプルコードを以下に示します。

let array = [1, 2, 3, 4];
let anotherArray = array;

// `length` プロパティで配列を空にする
array.length = 0;
console.log(array);        // []
console.log(anotherArray); // []

pop()メソッドで配列を空にする

pop()メソッドは配列の末尾から1つずつ要素を取り出します。ループと合わせることで、配列が空にすることができます。サンプルコードを以下に示します。

let array = [1, 2, 3, 4];
console.log(array); // [1, 2, 3, 4]

while (array.length > 0) {
  const item = array.pop();
  console.log(item); // 何か処理をする
}
console.log(array); // []

この方法は配列から要素を削除すると同時に何か処理をする必要がある場合に便利です。pop()メソッドは後ろから取り出すので、4, 3, 2, 1の順に処理されます。先頭から1, 2, 3, 4と取り出したい場合にはshift()メソッドを使います。

shift()メソッドで配列を空にする

shift()メソッドは配列の先頭から要素を取り出します。こちらもpop()メソッドと同様に、ループと合わせることで、配列が空にすることができます。サンプルコードを以下に示します。

let array = [1, 2, 3, 4];
console.log(array); // [1, 2, 3, 4]

while (array.length > 0) {
  const item = array.shift();
  console.log(item); // 何か処理をする
}
console.log(array); // []

配列が空かどうかを判定する方法

配列が空かどうかを確認するには、lengthプロパティを使うのが簡単です。サンプルコードを以下に示します。

let array = [];
if (array.length === 0) {
  console.log('配列は空です');
} else {
  console.log('配列には要素があります');
}

また、0はfalseとして評価されるため、次のように書くこともできます。

let array = [];
if (!array.length) {
  console.log('配列は空です');
} else {
  console.log('配列には要素があります');
}

このコードでは、array.lengthが0であればfalseとみなされ、!を使ってそれをtrueに変換しているため、空の配列であることが確認できます。

本記事のまとめ

この記事では『配列の要素を空にする方法』について、以下の内容を説明しました。

  • lengthプロパティで配列を空にする
    • 配列のlengthプロパティに0を代入すると、すべての要素が削除される。
  • splice()メソッドで配列を空にする
    • splice()メソッドに0を指定すると、配列のすべての要素を削除する。
  • 空の配列を代入して配列を空にする
    • 空の配列を代入することで配列を初期化できるが、元の参照が切れるため他の変数に影響を与えない。
  • pop()メソッドで配列を空にする
    • 末尾から1つずつ要素を取り出し、配列を空にする。
  • shift()メソッドで配列を空にする
    • 先頭から1つずつ要素を取り出し、配列を空にする。
  • 配列が空かどうかを判定する
    • lengthプロパティを使って、配列が空かどうかを簡単に確認できる。

お読み頂きありがとうございました。

スポンサーリンク