Objeto JavaScript.fromEntries()

Resumo : neste tutorial, você aprenderá como usar o Object.fromEntries()método JavaScript para transformar uma lista de pares chave-valor em um objeto.

ES6 apresenta o Object.entries()método que permite transformar um objeto em um array :

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

let arr = Object.entries(boxStyle);
console.log(arr);Linguagem de código:  JavaScript  ( javascript )

Saída:

[['color', 'red'],['borderWidth', '1px']]Linguagem de código:  JSON/JSON com comentários  ( json )

Mas e se você quisesse fazer o oposto e converter uma lista de pares de valores-chave em um objeto?

ES2019 introduziu o Object.fromEntries()método que permite converter facilmente uma lista de pares de valores-chave em um objeto.

let arr = [['color', 'red'],['borderWidth', '1px']];
let obj = Object.fromEntries(arr);Linguagem de código:  JavaScript  ( javascript )

Saída:

{color: "red", borderWidth: "1px"}Linguagem de código:  CSS  ( css )

Introdução ao Object.fromEntries()método JavaScript

O Object.fromEntries()aceita um iterável como Arrayou Mape o transforma em um Object :

Object.fromEntries(iterable);Linguagem de código:  JavaScript  ( javascript )

O Object.fromEntries()retorna um novo objeto cujas propriedades são especificadas pelas entradas do iterável .

Espera que Object.fromEntries()o iterável retorne um objeto iterador que produza pares de valores-chave. Ele usa a chave como a chave de propriedade do objeto e o valor como o valor associado à chave de propriedade.

O Object.fromEntries()executa o inverso de Object.entries().

Object.fromEntries()Exemplos de JavaScript

Vejamos alguns exemplos de uso do Object.fromEntries()método.

1) Convertendo um array em um objeto

Este exemplo mostra como converter um array em um objeto:

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

const person = Object.fromEntries(arr);
console.log(person);Linguagem de código:  JavaScript  ( javascript )

Saída:

{firstName: "John", lastName: "Doe", age: 20}Linguagem de código:  CSS  ( css )

2) Convertendo um Mapa em um Objeto

O exemplo a seguir mostra como usar o Object.fromEntries()método para converter um Mapa em um Objeto:

const config = new Map();

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


const cache = Object.fromEntries(config);
console.log(cache);Linguagem de código:  JavaScript  ( javascript )

Saída:

{type: "database", duration: 30}
Linguagem de código:  CSS  ( css )

3) Convertendo uma string de parâmetro de URL em um objeto

O exemplo a seguir mostra como usar Object.fromEntries()para converter uma string de consulta de uma URL em um objeto cuja cada propriedade é um parâmetro:

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

console.log(Object.fromEntries(searchParams));Linguagem de código:  JavaScript  ( javascript )

Saída:

{type: "listing", page: "2", rowCount: "10"}Linguagem de código:  CSS  ( css )

Resumo

• A Object.fromEntries()transformação de um iterável em um objeto.
• O Object.fromEntries()executa o inverso de Object.entries().