javascript 配列の値を全て削除する

2020.09.11
javascript
javascript

javascriptで、3つの方法を使用して、配列の値を全て削除する方法と簡単なサンプルコードを記述してます。

1. 環境
2. 削除方法
3. サンプルコード

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 102.0.5005.115

Javascript サンプル集はこちら

削除方法

まずは、以下のように「splice」メソッドを使用する方法があります。

let arr = ['a', 'b', 'c'];

console.log(arr); // ["a", "b", "c"]

arr.splice(0);

console.log(arr); // []

次に、配列の長さであるlengthを0にする方法があります。

let arr = ['a', 'b', 'c'];

console.log(arr); // ["a", "b", "c"]

arr.length = 0;

console.log(arr); // []

最後は、空に上書きしてしまう方法です。

let arr = ['a', 'b', 'c'];

console.log(arr); // ["a", "b", "c"]

arr = [];

console.log(arr); // []

パフォーマンスは、空に上書きする「[]」が一番良さそうです。

実行回数:1000000回 関数名:splice   実行時間:42.9(ms)
実行回数:1000000回 関数名:length   実行時間:71.5(ms)
実行回数:1000000回 関数名:[]       実行時間:10.1(ms)

サンプルコード

以下は、生成したランダムな配列がすべてspliceメソッドで、削除されているかを確認するサンプルコードとなります。

※cssには「bootstrap material」を使用してます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- Font Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.1.0/mdb.min.css" rel="stylesheet" />

</head>
<style>
  .main {
    margin: 0 auto;
    margin-top: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
  }
</style>
<script>

  function hoge() {

    //ランダムな9までの3個の配列を生成
    let arr = radarr(3);

    // 乱数を表示
    disp(arr, "txt")

    // 配列を全て削除
    arr.splice(0)

    // 再度表示
    disp(arr, "txt2");

  }

  function radarr(len) {

    //ランダムな9までの配列を生成
    let arr = [];
    let num = 10;
    let length = len;
    for (let i = 0; i < length; i++) {
      arr.push(Math.floor(Math.random() * num));
    }

    return arr;

  }

  //フロントに表示する関数
  function disp(arr, id) {
    let text = [];

    if (arr.length === 0) {

      text.push('<li class="list-group-item">配列は存在しません</li>');
      console.log("tset")

    }
    else {
      
      for (let i = 0; i < arr.length; i++) {
        text.push('<li class="list-group-item">' + arr[i] + '</li>');
      }     

    }

     //innerHTMLを使用して表示    
     document.getElementById(id).innerHTML = text.join('');
  }

</script>

<body>
  <div class="main">

    <ul id="txt" class="list-group list-group-flush"></ul>

    <ul id="txt2" class="list-group list-group-flush"></ul>
    
    <button type="button" class="btn btn-raised btn-primary" onclick="hoge()">表示</button>

  </div>
</body>

</html>

削除されていることが確認できます。