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

JavaScriptのObject.fromEntries()メソッドとは？配列やMapをオブジェクトに変換する方法

JavaScriptのObject.fromEntries()メソッドは、「キー」と「値」のペアを持つ配列やMapなどのイテラブル（反復可能なオブジェクト）を、ひとつのオブジェクトに変換するためのメソッドです。

ES2019で追加されたこのメソッドは、オブジェクトを [key, value] 形式の配列に変換する Object.entries() と対になる存在であり、両者を組み合わせることで、オブジェクトのフィルタリングやデータ形式の変換を簡潔に記述できます。

基本構文

Object.fromEntries(iterable)

引数には、[キー, 値] のペアを要素として持つ配列やMapなどを渡します。戻り値として、それらのペアから生成された新しいオブジェクトが返されます。

サンプルコード

以下は、キーと値のペアを持つ2次元配列を、Object.fromEntries()メソッドを使ってオブジェクトに変換する実装例です。

<!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: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>Object.fromEntries() method </h1>
<div
class="sample"><pre>[[firstName,Rohan],[lastName,Sharma],[age,22]]</pre></div>
<div style="color: green;" class="result">Object = <br></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to convert the above array into object</h3>
<script>
    let resEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");
    let arr = [['firstName','Rohan'],['lastName','Sharma'],['age',22]];
    document.querySelector(".Btn").addEventListener("click", () => {
        let obj = Object.fromEntries(arr);
        for(i in obj){
            resEle.innerHTML += 'Key = '+i+' : Value = '+obj[i]+ '<br>';
        }
    });
</script>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、次のような画面になります。

JavaScriptのObject.fromEntries()メソッドとは？配列やMapをオブジェクトに変換する方法

「CLICK HERE」ボタンをクリックすると −

JavaScriptのObject.fromEntries()メソッドとは？配列やMapをオブジェクトに変換する方法

ボタンをクリックすると、元の配列 [[&#39;firstName&#39;,&#39;Rohan&#39;], [&#39;lastName&#39;,&#39;Sharma&#39;], [&#39;age&#39;, 22]] が {firstName: 'Rohan', lastName: 'Sharma', age: 22} というオブジェクトへ変換され、各キーと対応する値が緑色のエリアに順番に出力されます。

補足：Mapからオブジェクトへの変換も可能

Object.fromEntries()は、Mapオブジェクトを引数として渡す場合にも利用できます。

const map = new Map([['apple', 150], ['banana', 100]]);
const obj = Object.fromEntries(map);
console.log(obj); // { apple: 150, banana: 100 }

このように、Object.fromEntries()を活用すれば、配列やMapなどさまざまなイテラブルなデータ構造を、手軽にプレーンなオブジェクトへ変換することができます。

  1. JavaScriptのRegExp（正規表現）オブジェクトとは？基本の使い方をわかりやすく解説

    RegExp（正規表現）オブジェクトは、テキストに対してパターンマッチングを行い、目的の文字列部分を検索・抽出するために使用されます。JavaScriptでは、RegExpオブジェクトを「RegExpコンストラクタ」または「リテラル構文」の2通りの方法で作成できます。 RegExpオブジェクトの作成方法 コンストラクタを使用する場合： new RegExp(pattern) リテラル構文を使用する場合： /pattern/ 主なメソッド test()：文字列がパターンに一致するかどうかを真偽値（true / false）で返します。 exec()：パターンに一致した文字列を返します。

  2. JavaScriptのオブジェクト初期化子とは？使い方をサンプルコードで解説

    オブジェクト初期化子とは オブジェクト初期化子（Object Initializer）は、新しく生成したオブジェクトを初期化するための式です。波括弧 {} の中に、「プロパティ名」と「それに対応する値」のペアを0個以上、カンマ区切りで列挙して記述します。 これにより、変数宣言と同時にオブジェクトの中身を簡単に定義することができます。 以下は、JavaScriptでオブジェクト初期化子を使用したサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta chars