javascript n個の配列データを作成する

javascript n個の配列データを作成する

javascriptで、n個の配列データを作成するサンプルコードを記述してます。

環境

  • OS windows11 home
  • ブラウザ chrome 102.0.5005.115

n個の配列データを作成

n個の配列データを作成するには、「Array.from」を使用して「new Array(n)」で指定した配列に対してコールバック関数で値を定義します。

Array.from(new Array(個数), function(x, i) { return i })

実際に連番の100個の関数を作成してみます。

const n = 100

const arr = Array.from(new Array(n), function(x, i) {return i})
        
console.log(
    arr
)

実行結果をみると作成されていることが確認できます。

指定した値で作成したい場合は、コールバック関数の条件を変更します。

const arr = Array.from(new Array(n), function(x, i) {return i * 2})

実行結果

アロー関数を使用すると、より簡潔に記述できます。

const arr = Array.from(new Array(n), (x, i) => i * 2 )

同じ値で作成

同じ値だけで作成する場合は、「fill」を使用した方が簡潔です。

const arr = Array(n).fill(1)

実行結果

「Array.from」を使用した場合は、以下となります。

const arr = Array.from(new Array(n), () => 1 )

サンプルコード

以下は、実行ボタンをクリックすると「0~9」までのランダムな配列の要素を500個生成するサンプルコードとなります。

※cssには「Material Design for Bootstrap」を使用してます。関数はアロー関数を使用してます。

<!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: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 30px;
  }
</style>
<script>

  const hoge = () => {

    // 作成する配列の個数
    const n = 500;

    // ランダムな500個の整数1桁の配列を生成
    let arr = Array.from(new Array(n), () => ~~(Math.random() * 10))

    // 生成した配列を表示
    disp(arr, "txt1");

  }

  //フロントに表示する関数
  const disp = (arr, id) => {

    let text = [];

    // for ofを使用
    for (let item of arr) {
      text.push('<li class="list-group-item">' + item + '</li>');
    }

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

  window.onload = () => {
    // クリックイベントを登録
    btn.onclick = () => { hoge(); }; // document.getElementById('btn');を省略

  }

</script>

<body>
  <div class="main container">

    <h2><span class="badge bg-info">配列を生成する</span></h2>
    <ul id="txt1" class="list-group list-group-flush"></ul>

    <div class="row">
      <button id="btn" type="button" class="btn btn-info">
        実行
      </button>
    </div>

  </div>

</body>

</html>

生成されていることが確認できます。