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

【JavaScript】2つの配列を1つのオブジェクトに変換する方法をわかりやすく解説

2つの配列を1つのJavaScriptオブジェクトに変換できる？

はい、可能です。JavaScriptでは「キー」となる配列と「値」となる配列の2つを組み合わせて、1つのオブジェクトを作成できます。最も基本的な方法は、forEach()メソッドで片方の配列をループ処理しながら、もう片方の配列の対応する要素を値として代入していくやり方です。

以下に、実際に動作するサンプルコードを紹介します。

コード例

<!DOCTYPE html>
<html lang="ja">
<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>2つの配列を1つのJavaScriptオブジェクトに変換する</h1>
<div class="sample">
["firstName", "lastName", "age"]<br />["Rohan", "Sharma", 21]
</div>
<div class="result"><br /></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、2つの配列からオブジェクトが生成されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    var objKeys = ["firstName", "lastName", "age"];
    var objValues = ["Rohan", "Sharma", 21];
    var resultObj = {};
    BtnEle.addEventListener("click", () => {
        objKeys.forEach(
            (element, index) => (resultObj[element] = objValues[index])
        );
        for (let i in resultObj) {
            resEle.innerHTML += "Key = " + i + " : Value = " + resultObj[i] + "<br>";
        }
    });
</script>
</body>
</html>

コードの解説

このコードでは、キーを格納したobjKeys配列と、値を格納したobjValues配列を用意しています。ボタンがクリックされると、forEach()メソッドがobjKeysの各要素を順番に処理します。コールバック関数には「要素」と「インデックス」の2つの引数が渡されるため、resultObj[element] = objValues[index]という形で、キーと対応する値をペアとして新しいオブジェクトに格納していきます。

その後、for...inループを使って生成されたオブジェクトのキーと値を取り出し、画面に表示しています。

実行結果

上記のコードを実行すると、次のような出力が得られます。

【JavaScript】2つの配列を1つのオブジェクトに変換する方法をわかりやすく解説

「CLICK HERE」ボタンをクリックすると、2つの配列から生成されたオブジェクトの内容が以下のように表示されます。

【JavaScript】2つの配列を1つのオブジェクトに変換する方法をわかりやすく解説

補足：もっと簡潔に書く方法

ES2019以降の環境では、Object.fromEntries()とmap()を組み合わせることで、同じ処理を1行でより簡潔に記述することもできます。

const resultObj = Object.fromEntries(
  objKeys.map((key, index) => [key, objValues[index]])
);

用途に応じてforEach()による方法と使い分けるとよいでしょう。

  1. JavaScriptで2つのソート済み配列を1つのソート済み配列にマージする方法

    問題2つの数値のソート済み配列を受け取り、両方の配列のすべての要素を新しい配列へマージし、同じ順序でソートされた状態の新しい配列として返すJavaScript関数を作成する必要があります。この操作はマージソートの中核となる処理でもあり、効率的なアルゴリズム設計における重要なテクニックです。concat()後にsort()する方法もありますが、すでにソート済みの配列同士をマージする場合は、両端ポインタ（Two Pointers）を使ったアプローチの方がはるかに効率的です。解決のアプローチ：Two Pointers（双方向ポインタ）基本的な考え方は以下の通りです。インデックス変数 i と j を用

  2. C#で2つのソート済み配列を1つにマージする方法【初心者向け解説】

    C#では、複数の配列を1つの配列に結合（マージ）することができます。本記事では、2つのソート済みの整数型配列を用意し、それらを3つ目の配列に順番にコピーしてマージする基本的な方法を、サンプルコードと実行結果とともにわかりやすく解説します。 マージする2つの配列を定義する まず、マージしたい2つの配列を宣言します。ここでは、それぞれ5つの要素を持つ整数型配列 arr1 と arr2 を用意します。 int[] arr1 = new int[5] { 5, 15, 25, 30, 47 }; int[] arr2 = new int[5] { 55