Original text: v8. Dev/features/ob… Translated by Mathias Bynens: Small white front end

Object. FromEntries is a very useful addition to the javascript Object. Before explaining what it does, let’s take a look at the existing Object.entries API

Object.entries

Object.entries have been around for a while,

Browser Support (learn more) :

For each key-value pair in an Object, Object.entries provide an array where the first element is the key and the second element is the value.

Object.entries are particularly useful in combination with for-of, as it allows you to elegantly traverse all key-value pairs in an Object

const entries = Object.entries(object);
// → [['x', 42], ['y', 50]]

for (const [key, value] of entries) {
  console.log(`The value of ${key} is ${value}. `);
}
// Logs:
// The value of x is 42.
// The value of y is 50.
Copy the code

However, so far there is no easy way to get the corresponding Object from entries

Object.fromEntries

This new API does the opposite of Object.fromEntries. This makes it easy to get objects based on their entries

const object = { x: 42.y: 50 };
const entries = Object.entries(object);
// → [['x', 42], ['y', 50]]

const result = Object.fromEntries(entries);
// → {x: 42, y: 50}
Copy the code

One common use is to transform objects. You can now do this by iterating through its entries and then using array methods that you are probably already familiar with

const object = { x: 42.y: 50.abc: 9001 };
const result = Object.fromEntries(
  Object.entries(object)
    .filter(([ key, value ]) = > key.length === 1)
    .map(([ key, value ]) = > [ key, value * 2]));// → {x: 84, y: 100}
Copy the code

In the example above, we filter the object to get keys of length 1, x and y, instead of ABC. The updated key-value pairs are then obtained through the map. In this case, we multiplied each value by 2 to double it. The end result is a new object with only the attributes X and y, and the new values.

Objects vs. maps

JavaScript also supports maps, which are often more appropriate data structures than regular objects. So when you have complete control over your code, you can use maps instead of objects. However, as a developer, you don’t always get to choose which format. Sometimes the data you are working with comes from external apis or library functions that provide objects rather than maps.

Object.entries make it easy to go from objects to maps

const object = { language: 'JavaScript'.coolness: 9001 };

// Convert the object into a map:
const map = new Map(Object.entries(object));
Copy the code

The reverse is also useful: when your code uses Map, you may also need to serialize your data at some point, such as converting it to JSON to send API requests. Or, you might need to pass data to another library that expects objects instead of maps. In these cases, you need to create an object based on the mapping data. Object. FromEntries makes it simple

// Convert the map back into an object:
const objectCopy = Object.fromEntries(map);
// → {language: 'JavaScript', Coolness: 9001}
Copy the code

The object. entries and object. fromEntries methods make it easy to switch between maps and objects

Warning: Be careful of data loss

When converting a map to a normal object like the one in the above example, there is an implicit assumption that each key is unique stringing. If this assumption is not true, data loss occurs

const map = new Map([[{},'a'],
  [{}, 'b']]);Object.fromEntries(map);
// → {'[object object]': 'b'}
// Note: the value 'a' is nowhere to be found, since both keys
// stringify to the same value of '[object Object]'.
Copy the code

So before we convert a map to Object using Object.fromEntries or another method, make sure that the map’s keys produce a unique toString result.

Object. FromEntries supports the browser

To learn more

Five new ES2019 features

  • Object.fromEntries()
  • trimStart()
  • trimEnd()
  • flat()
  • flatMap()

Reference: blog.logrocket.com/5-es2019-fe…