Object.entries () converts an objec to array. But what if you want to do the opposite? Don’t think twice! Use object.fromentries () to convert array to Object 👏.

const keyValuePair = [
  ['cow'.'🐮'],
  ['pig'.'🐷']];Object.fromEntries(keyValuePair);
// {cow: '🐮', pig: '🐷'}
Copy the code

Object.fromEntries

Let’s start by pointing out the anatomy of an object, which is something that has a key and a value.

const object = {
  key: 'value'};Copy the code

If we want to convert something to an object, we need to pass things that have these two requirements: key and value.

There are two parameters that satisfy these requirements:

  1. An array with nested key-value pairs
  2. Map object

Turns an array into an Object using object. fromEntries

This is a nested array with key-value pairs

const nestedArray = [
  ['key 1'.'value 1'],
  ['key 2'.'value 2']];Copy the code

When we apply object. fromEntries to it, we get objects from it.

Object.fromEntries(nestedArray);
// { key 1: "value 1", key 2: "value 2"}
Copy the code

Converts a Map to an Object using object. fromEntries

JavaScript ES6 brings us a new object called Map, which is very similar to objects.

Let’s create a new Map object

// Use the constructor
const map = new Map([['key 1'.'value 1'],
  ['key 2'.'value 2']]);// Or we can use the instance method, "set"
const map = new Map(a); map.set('key 1'.'value 1');
map.set('key 2'.'value 2');
/ / the result
// Map(2) {"key 1" => "value 1", "key 2" => "value 2"}
Copy the code

Now we use Object.fromentries to convert the Map to an Object

Object.fromEntries(map);
// { key 1: "value 1", key 2: "value 2"}
Copy the code

Object.fromEntries type error with another type

Be careful when you try to pass other data types to Object.fromentries. All of these throw an error 🚨

❌TypeError not caught (Uncaught TypeError)

Make sure that only key-value pairs 👍 are passed

Object.fromEntries vs Object.entries

Object.fromEntries has the opposite effect to Object.entries. So Object. entries will convert our array and return a new nested array of key-value pairs. Object.fromEntries converts the array back to an Object.

const object = { key1: 'value1'.key2: 'value2' };
const array = Object.entries(object);
// [ ["key1", "value1"], ["key2", "value2"] ]
Object.fromEntries(array);
// { key1: 'value1', key2: 'value2' }
Copy the code

Object to Object conversion

If you read the original TC39 proposal, this is why this new approach was introduced. With the introduction of Object.entries, there is no easy way to convert results back to objects.

Usually, when we choose to use Object.entries, it is because it gives us access to a number of nice array methods, such as filter. But after completing the conversion, we are a little confused by the array.

const food = { meat: '🥩'.broccoli: '🥦'.carrot: '🥕' };
// 😖 Stuck in Array land
const vegetarian = Object.entries(food).filter(
  ([key, value]) = >key ! = ='meat',);// [[" Broccoli ", "🥦"], [" Carrot ", "🥕"]
Copy the code

We can take advantage of all these useful array methods and still retrieve our objects, and finally, the object-to-object conversion 👏.

const food = { meat: '🥩'.broccoli: '🥦'.carrot: '🥕' };
// 😄 Yay, still in Object land
const vegetarian = Object.fromEntries(
  Object.entries(food).filter(([key, value]) = >key ! = ='meat'));// {broccoli: '🥦', Carrot: '🥕'}
Copy the code

Browser support

With the exception of Internet Explorer, most major browsers support this method 👍.

Source: medium.com/@samanthami… , written by Samantha Ming, translated by Public account front-end Full Stack Developer

This article is published on the public account “Front-end full stack Developer” ID: BY-Zhangbing-dev, the first time to read the latest article, will be published two days before the new article. After concern private letter reply: gift package, send some network high-quality video course network disk information, can save a lot of money for you!