JavaScript Object.fromEntries()

概要: このチュートリアルでは、JavaScriptのObject.fromEntries()メソッドを使用して、キーと値のペアのリストをオブジェクトに変換する方法を学びます。

ES6では、オブジェクトを配列に変換できるObject.entries()メソッドが導入されました。

const boxStyle = {
    color: 'red',
    borderWidth: '1px'
};

let arr = Object.entries(boxStyle);
console.log(arr);Code language: JavaScript (javascript)

出力

[['color', 'red'],['borderWidth', '1px']]Code language: JSON / JSON with Comments (json)

しかし、逆の操作、つまりキーと値のペアのリストをオブジェクトに変換したい場合はどうすればよいでしょうか？

ES2019では、キーと値のペアのリストをオブジェクトに簡単に変換できるObject.fromEntries()メソッドが導入されました。

let arr = [['color', 'red'],['borderWidth', '1px']];
let obj = Object.fromEntries(arr);Code language: JavaScript (javascript)

出力

{color: "red", borderWidth: "1px"}Code language: CSS (css)

JavaScript Object.fromEntries()メソッド入門

Object.fromEntries()は、配列やMapなどの反復可能なオブジェクトを受け取り、それをオブジェクトに変換します。

Object.fromEntries(iterable);Code language: JavaScript (javascript)

Object.fromEntries()は、プロパティが反復可能なオブジェクトのエントリによって指定された新しいオブジェクトを返します。

Object.fromEntries()は、キーと値のペアを生成するイテレータオブジェクトを返す反復可能オブジェクトを期待します。キーはオブジェクトのプロパティキーとして、値はプロパティキーに関連付けられた値として使用されます。

Object.fromEntries()はObject.entries()の逆の動作を行います。

JavaScript Object.fromEntries()の例

Object.fromEntries()メソッドの使用例を見てみましょう。

1) 配列をオブジェクトに変換する

この例では、配列をオブジェクトに変換する方法を示します。

const arr = [
    ['firstName', 'John'],
    ['lastName', 'Doe'],
    ['age', 20]
];

const person = Object.fromEntries(arr);
console.log(person);Code language: JavaScript (javascript)

出力

{firstName: "John", lastName: "Doe", age: 20}Code language: CSS (css)

2) Mapをオブジェクトに変換する

次の例では、Object.fromEntries()メソッドを使用してMapをオブジェクトに変換する方法を示します。

const config = new Map();

config.set('type', 'database');
config.set('duration', 30);


const cache = Object.fromEntries(config);
console.log(cache);Code language: JavaScript (javascript)

出力

{type: "database", duration: 30}
Code language: CSS (css)

3) URLパラメータ文字列をオブジェクトに変換する

次の例では、Object.fromEntries()を使用して、URLのクエリ文字列を、各プロパティがパラメータであるオブジェクトに変換する方法を示します。

const params = 'type=listing&page=2&rowCount=10';
const searchParams = new URLSearchParams(params);

console.log(Object.fromEntries(searchParams));Code language: JavaScript (javascript)

出力

{type: "listing", page: "2", rowCount: "10"}Code language: CSS (css)

まとめ

• Object.fromEntries()は、反復可能なオブジェクトをオブジェクトに変換します。
• Object.fromEntries()はObject.entries()の逆の動作を行います。