JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで配列を空にする4つの方法【サンプルコード付きで解説】

JavaScriptで配列を空にする方法は、主に4つあります。それぞれ動作の仕組みや特徴が異なるため、目的に応じて適切な方法を選ぶことが大切です。

配列を空にする4つの方法

  • 新しい空の配列を代入する：配列変数に、新しく作成した空の配列を代入します。最もシンプルな方法ですが、元の配列を参照している他の変数が残る点には注意が必要です。
  • lengthプロパティを使う：配列のlengthプロパティに0を設定するだけで、すべての要素を削除できます。高速で、元の配列への参照も維持されるため、実務で最もよく使われる方法のひとつです。
  • popメソッドを使う：配列の要素数が0になるまで、popメソッドで末尾の要素を繰り返し取り除きます。ループ処理が必要になるため、やや冗長な書き方になります。
  • spliceメソッドを使う：開始インデックスを0、削除する要素数を配列の長さ（array.length）として指定し、すべての要素を一括で削除します。

以下は、これら4つの方法を一度に試せるサンプルコードです。ボタンをクリックすると、4つの配列がそれぞれ異なる方法で空になります。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>配列を空にするサンプル</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,
    .sample {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
    .sample {
        color: red;
    }
</style>
</head>
<body>
<h1>JavaScriptで配列を空にする4つの方法</h1>
<div class="sample">
a=[1,2,3,4], b=['a','b','c'], c=['A','B','C','D'], d=[11,22,33,44]
</div>
<div class="result"></div>
<button class="Btn">クリックしてください</button>
<h3>上のボタンをクリックすると、配列がすべて空になります</h3>
<script>
    let resEle = document.querySelector(".result");
    let a, b, c, d;
    (a = [1, 2, 3, 4]),
    (b = ["a", "b", "c"]),
    (c = ["A", "B", "C", "D"]),
    (d = [11, 22, 33, 44]);
    document.querySelector(".Btn").addEventListener("click", () => {
        let emptyArr = [];
        a = emptyArr;
        resEle.innerHTML = " a = " + a + "<br>";
        b.length = 0;
        resEle.innerHTML += " b = " + b + "<br>";
        while (c.length > 0) {
            c.pop();
        }
        resEle.innerHTML += "c = " + c + "<br>";
        d.splice(0, d.length);
        resEle.innerHTML += "d = " + d + "<br>";
    });
</script>
</body>
</html>

実行結果

ページを開いた直後は、初期化された4つの配列が表示されます。

JavaScriptで配列を空にする4つの方法【サンプルコード付きで解説】

「クリックしてください」ボタンをクリックすると、4つの配列すべてが空になり、以下のように表示されます。

JavaScriptで配列を空にする4つの方法【サンプルコード付きで解説】

使い分けのポイント

パフォーマンスを重視するならlength = 0、コードの意図を明確にしたいならsplice、変数そのものを新しい配列に置き換えたいなら新規配列の代入が適しています。popによるループ処理は要素数が多い場合に非効率になるため、特別な理由がなければ避けるのが無難です。

  1. 【初心者向け】JavaScriptのreverse()メソッドで配列を逆順にする方法

    JavaScriptのreverse()メソッドは、配列の要素を元の順序と逆順に入れ替えるための便利な関数です。このメソッドを呼び出すと、配列の最初の要素が最後に、最後の要素が最初に移動し、配列全体が反転されます。reverse()メソッドの基本reverse()は配列そのものを変更する「破壊的メソッド」である点に注意してください。つまり、元の配列の順序が直接書き換えられます。元の配列を保持したい場合は、あらかじめslice()やスプレッド構文（[...arr]）などでコピーを作成してからreverse()を使用するのがおすすめです。サンプルコード以下は、ボタンをクリックすると配列の要素が逆順

  2. JavaScriptにおける配列の分割代入（Destructuring）の基本と使い方

    分割代入（Destructuring）とは、配列から値を取り出して個別の変数に展開するための構文です。ES2015（ES6）で導入されたこの機能を使うと、配列の各要素を簡潔かつ読みやすく変数に割り当てることができます。 配列の分割代入のサンプルコード 以下は、JavaScriptで配列の分割代入を行うコード例です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport&quo