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

作成日 2022.06.18
更新日 2022.12.20
javascript
javascript

javascriptで、n個の配列データを作成するサンプルコードを記述してます。「Array.from」にコールバック関数を使用することで色々なタイプの配列データを作成することができます。

1. 環境
2. n個の配列データを作成
3. インデックス番号を利用
4. 同じ値で作成
5. サンプルコード

環境

OS windows11 home
ブラウザ chrome 108.0.5359.99

Javascript サンプル集はこちら

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 )

インデックス番号を利用

また、単純にインデックス番号を利用した以下のような作成方法もあります。

console.log( [...Array(10).keys()] );
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

同じ値で作成

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

const arr = Array(100).fill(1);

実行結果

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

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

サンプルコード

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

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

アロー関数の使い方

document.getElementByIdの省略して記述する

<!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>

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