JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのmap()メソッドで配列を変換する方法を解説

JavaScriptで配列の各要素を別の値に変換したい場合、map()メソッドを使うのが最も一般的で効率的な方法です。map()は、元の配列の各要素に対して指定したコールバック関数を実行し、その戻り値から新しい配列を生成します。元の配列は変更されないため、安全に処理を行えるのが大きな特徴です。

以下は、map()メソッドを使って配列の各要素を2乗に変換するサンプルコードです。

コード例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,.sample {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
    .result {
        color: red;
    }
</style>
</head>
<body>
<h1>Transform JavaScript arrays using maps</h1>
<div class="sample">[22,33,44,55]</div>
<br />
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to square each element of the above array</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let arr = [22, 33, 44, 55];
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = arr.map((a) => a * a);
    });
</script>
</body>
</html>

実行結果

上記のコードをブラウザで実行すると、次のように表示されます。

JavaScriptのmap()メソッドで配列を変換する方法を解説

「CLICK HERE」ボタンをクリックすると、配列[22, 33, 44, 55]の各要素が2乗され、結果が画面に表示されます。

JavaScriptのmap()メソッドで配列を変換する方法を解説

map()メソッドのポイント

  • 元の配列は変更されない：変換結果は新しい配列として返されるため、イミュータブルな処理が可能です。
  • コールバック関数の引数：第1引数に「現在の要素」、第2引数に「インデックス」、第3引数に「元の配列」を受け取ることができます。
  • 配列の長さは変わらない：返される配列の要素数は、元の配列と必ず同じになります。

このようにmap()を使えば、数値の変換だけでなく、文字列の加工やオブジェクトのプロパティ抽出など、さまざまな配列操作を簡潔に記述できます。

  1. JavaScriptで画像をBlobに変換する方法【サンプルコード＆解説つき】

    JavaScriptで画像をBlobに変換するには？Webアプリケーション開発では、画像などのファイルデータを「Blob（Binary Large Object：バイナリラージオブジェクト）」として扱いたい場面が多くあります。たとえば、画像のアップロード処理やCanvasへの描画、サーバーへのデータ送信などがその代表例です。JavaScriptでは、fetch()メソッドとBlobオブジェクトを組み合わせることで、URLから取得した画像を簡単にBlobへ変換できます。以下に実際のサンプルコードを示します。サンプルコード<!DOCTYPE html> <html lang=&q

  2. JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説

    JavaScriptでは、標準組み込みのURLコンストラクタを使うことで、URL文字列からURLオブジェクトを簡単に生成できます。URLオブジェクトを作成すると、プロトコル（protocol）やホスト名（host）、パス（pathname）など、URLを構成する各要素に個別にアクセスできるようになるため、URLの解析や操作がとても便利になります。 URLオブジェクトの作成例 以下は、JavaScriptでURLオブジェクトを作成し、ボタンをクリックするとその各プロパティを画面に表示するサンプルコードです。 <!DOCTYPE html> <html lang="