Use of Object.fromEntries and Object.entries

object.entries() Convert an object to an array. But what if you want to do the opposite? No more thinking! Use Object.fromEntries() to convert array to object.

const keyValuePair = [
  ['cow', 'val1'],
  ['pig', 'val2'],
];
Object.fromEntries(keyValuePair);
// { cow: 'val1', pig: 'val2' }

Object.fromEntries

Let’s first point out the anatomy of an object. An object is something with a key and a value.

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

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

There are two types of parameters that meet these requirements:

1. Arrays with nested key-value pairs
2. Map objects

Use Object.fromEntries Convert Array to Object

This is a nested array with key value pairs

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

When we apply Object.fromEntries to it, we Objects can be obtained from it.

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

Convert Map to object using Object.fromEntries

JavaScript ES6 brings us a new object called map, which is very similar to an object.

Let’s create new Map object

// 使用构造函数
const map = new Map([
  ['key 1', 'value 1'],
  ['key 2', 'value 2'],
]);
// 或者我们可以使用实例方法，"set"
const map = new Map();
map.set('key 1', 'value 1');
map.set('key 2', 'value 2');
// 结果
// Map(2) {"key 1" => "value 1", "key 2" => "value 2"}

Now, we convert Map to object using Object.fromEntries

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

Object.fromEntries with other TypeError for type

Be careful when you try to pass other data types to Object.fromEntries, all of which will throw an error

❌ Uncaught TypeError

Make sure to only pass key-value pairs

Object.fromEntries vs Object.entries

Object.fromEntries has the opposite effect of Object.entries. So Object.entries will transform our array and return a new nested array of key-value pairs. And Object.fromEntries will convert this 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' }

Object to Object conversion

If you read the original TC39 proposal, this is why this new method was introduced. With the introduction of Object.entries there is no easy way to convert the result back to an object.

Usually, when we choose to use Object.entries, it is because it gives us access to many nifty array methods, such as filter. But after doing the conversion, we're a bit stuck with that array.

const food = { meat: 'v1', broccoli: 'v2', carrot: 'v3' };
// Stuck in Array land
const vegetarian = Object.entries(food).filter(
  ([key, value]) => key !== 'meat',
);
// [ ["broccoli", "v2"], ["carrot", "v3"] ]

We can take advantage of all these useful array methods and still get our objects back, and finally, the conversion from object to object.

const food = { meat: 'v1', broccoli: 'v2', carrot: 'v3' };
// Yay, still in Object land
const vegetarian = Object.fromEntries(
  Object.entries(food).filter(([key, value]) => key !== 'meat'),
);
// { broccoli: 'v2', carrot: 'v3' }

Browser support

Except Internet Explorer, most mainstream browsers support this method.

Recommended tutorial: "JS Tutorial"

The above is the detailed content of Use of Object.fromEntries and Object.entries. For more information, please follow other related articles on the PHP Chinese website!