javascript mapを使って配列を操作する

作成日 2020.10.01
更新日 2022.07.01
javascript
javascript

javascriptで、mapを使って配列を操作するサンプルコードを記述してます。

1. 環境
2. map使い方
3. サンプルコード

環境

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

Javascript サンプル集はこちら

map使い方

mapを使えば、配列の値を1つずつ操作することが可能です。

const arr1 = [1, 2, 3, 4, 5];

// 配列の値を全て2倍にする
const arr2 = arr1.map((item) => { return item * 2 });

console.log(arr2) //　[2, 4, 6, 8, 10]

アロー関数については、以下を御覧ください。

アロー関数のサンプル

サンプルコード

以下は、
「変換」ボタンをクリックすると、ランダムに生成した配列の各値を2倍にして表示する
サンプルコードとなります。

※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" id="css">
</head>
<style>
  .main {
    margin: 0 auto;
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 30px;
  }
</style>
<script>

  function hoge() {
    // ランダムな3つの値がある配列を生成
    let arr1 = radarr(3);
    // 表示
    disp(arr1, "txt1");
    // 生成した配列の各値を2倍
    const arr2 = arr1.map((item) => { return item * 2 });
    // 2倍になったものを表示する
    disp(arr2, "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 = [];
    // 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 = function () {
    // ボタンを取得
    let elmbtn = document.getElementById('btn');
    // クリックイベントを登録
    elmbtn.onclick = function () {
      hoge();
    };
  }

</script>

<body>
  <div class="main">

    <h2 class="badge badge-success">配列を生成</h2>
    <ul id="txt1" class="list-group"></ul>
    <h2 class="badge badge-success">配列の各値を2倍</h2>
    <ul id="txt2" class="list-group"></ul>

    <button id="btn" type="button" class="btn btn-raised btn-danger">
      変換
    </button>

  </div>
</body>

</html>

2倍になっていることが確認できます。