Detailed explanation of the origin of Object.fromEntries() in ES10

Posted Jun 28, 20204 min read

Author:Samantha Ming
Translator:Xiaozhi
Source:medium

Like it and see it again, develop a habit

This article GitHub https://github.com/qq44924588... has been included, more categories of previous high praise articles, also sorted out A lot of my documents, and tutorial materials. Welcome Star and Perfect, everyone can refer to the test site for review in the interview, I hope we have something together.

We know that Object.entries() is an array of key-value pairs that turn objects into their own enumerable properties. Similarly, we can also convert the array of key-value pairs into objects.

const keyValuePair = [
  ['cow','?'],
  ['pig','?'],

]

Object.fromEntries(keyValuePair);
//{cow:'?', pig:'?'}

Object.fromEntries

We know that the object structure is a combination of keys and values, as shown below:

const object = {
  key:'value',
};

Based on this logic, if we want to turn something into an object, we must pass key and value.

There are two types of parameters that can meet these requirements:

  1. Array with nested key-value pairs
  2. Map object

Use Object.fromEntries to turn the array into an object

Below is a nested array of key-value pairs

const nestedArray = [
  ['key 1','value 1'],
  ['key 2','value 2']

]

Use Object.fromEntries to turn the array into an object:

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

Use Object.fromEntries to convert Map to object

ES6 brought us a new object called map, which is very similar to objects.

TC39:The mapping object is a collection of key/value pairs, where the key and value can be any ECMAScript language value.

Let's create a Map object:

//use 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()
map.set('key 1','value 1')
map.set('key 2','value 2')

//result
Map(2) {"key 1" => "value 1", "key 2" => "value 2"}

Let's use Object.fromentries to convert map to an object

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

Wrong type of object:trying to use Object.fromEntries to convert other types into objects

Passing the following types into Object.fromEntries will result in caught TypeError.

clipboard.png

Make sure to pass key-value pairs.

Everyone says that there is no project to write a resume, so I found a project for you, and also included [Building Tutorial] .

Object.fromEntries vs Object.entries

Object.fromEntries is the reverse of Object.entries. The Object.entries() method returns an array of key-value pairs of the enumerable properties of the given object itself, while the Object.fromEntries() method converts the list of key-value pairs into an object.

const object = {key1:'value1', key2:'value2'}

const array = Object.entries(object)
//[["key1", "value1"], ["key2", "value2"]]


Object.fromEntries(array)
//{key1:'value1', key2:'value2'}

Object-to-object conversion

If you read TC39 Proposal , this is why this new method was introduced. With the introduction of Object.entries, it is more troublesome to convert some non-object structures into objects.

Usually, when we choose to use Object.entries, it is because it gives us access to many beautiful array methods, such as filter. But after completing the conversion, we were a little bit puzzled by the array.

const food = {meat:'?', broccoli:'?', carrot:'?'}

//? stuck on this result...
const vegetarian = Object.entries(food).filter(
 ([key, value]) => key !=='meat',

)
//[["broccoli", "?"], ["carrot", "?"]]

Ok! We can take advantage of all these useful array methods, but we can still return objects. Finally, the conversion from object to object ?

const food = {meat:'?', broccoli:'?', carrot:'?'}

const vegetarian = Object.fromEntries(
  Object.entries(food).filter(([key, value]) => key !=='meat'),

)

//{broccoli:'?', carrot:'?'}

Alternatives for turning arrays into objects

Object.fromEntries is introduced by ES10, it is very new, maybe the browser support is friendly enough. So let's see how to convert an array with key-value pairs into objects.

Use reduce method to convert array into object

A popular way to convert an array to an object is to use reduce.

const array = [
  ['key1','value1'],
  ['key2','value2']

]

const map = new Map([
  ['key1','value1'],
  ['key2','value2']

])

function toObject(pairs) {
  return Array.from(pairs).reduce(
   (acc, [key, value]) => Object.assign(acc, {[key]:value}),
    {}
 )
}


//result
//{key1:'value1', key2:'value2'}

Use library to convert array into object

Lodash also provides methods for converting key-value pairs into objects.

_.object

Convert array to object. Pass a single list of [key, value] pairs, or a list of keys and a list of values.

const array = [
  ['key1','value1'],
  ['key2','value2']

]

_.object(array)
//{key1:'value1', key2:'value2'}
_.fromPairs

_.fromPairs is the reverse of _.toPairs, its method returns an object consisting of key-value pairs.

const array = [
  ['key1','value1'],
  ['key2','value2'],

]

_.fromPairs(array)
//{key1:'value1', key2:'value2'}

Browser support

clipboard.png


Original: https://medium.com/@samantham...

Bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. Here, I recommend a useful BUG monitoring tool Fundebug .


communicate with

The article is continuously updated every week, and you can read WeChat search "Great Move World" for the first time to read and reminder(one or two earlier than the blog), this article GitHub https://github.com/qq449245884/xiaozhi has been included, a lot of my documents have been compiled, welcome Star and perfect, everyone can refer to the test site for review in the interview, and pay attention to the public number, reply welfare in the background, you can see the benefits ,You know.