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

2020.09.11
javascript
javascript

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

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

環境

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

windows10にApacheのインストール

削除方法

まずは、spliceメソッドを使用する方法があります。

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

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

arr.splice(0);

console.log(arr); // []

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

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

arr.splice(0);

console.log(arr); // []

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

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

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

arr.length = 0;

console.log(arr); // []

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

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

arr.length = 0;

console.log(arr); // []

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

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

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

arr = [];

console.log(arr); // []

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

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

arr = [];

console.log(arr); // []

サンプルコード

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

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

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

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
  <link rel="stylesheet"
    href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css"
    integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
</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個の配列を生成
    var arr = radarr(3);

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

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

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

  }

  function radarr(len) {

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

    return arr;

  }

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

    if (arr.length === 0) {

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

    }
    else {
      
      for (var 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>

<!DOCTYPE html>

<head>

<title>mebeeサンプル</title>

href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css"

integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">

</head>

<style>

.main {

margin: 0 auto;

margin-top: 150px;

display: flex;

flex-direction: column;

align-items: center;

font-size: 20px;

}

</style>

function hoge() {

//ランダムな9までの3個の配列を生成

var arr = radarr(3);

// 乱数を表示

disp(arr, "txt")

// 配列を全て削除

arr.splice(0)

// 再度表示

disp(arr, "txt2");

}

function radarr(len) {

//ランダムな9までの配列を生成

var arr = [];

var num = 10;

var length = len;

for (var i = 0; i < length; i++) {

arr.push(Math.floor(Math.random() * num));

}

return arr;

}

//フロントに表示する関数

function disp(arr, id) {

var text = [];

if (arr.length === 0) {

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

console.log("tset")

}

else {

for (var 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>

</body>

</html>

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

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

環境

削除方法

サンプルコード

javascript レンジ入力(input type=”range”)の値を取得する 2020.09.11

OpenSUSE 15.1にdockerとdocker-composeをインストールする手順 2020.09.11