Shulou(Shulou.com)06/03 Report--

This article introduces how to use Object.entries in JavaScript, the content is very detailed, interested friends can use for reference, I hope it can be helpful to you.

Preface

Usually we often use static methods on the Object class, such as Object.keys, Object.values, Object.assign, etc., but we may rarely use the Object.entries method. This article will explain two tips on the Object.entries method.

Action

The Object.entries () method returns an array of key-value pairs of enumerable properties of a given object, which arranges and uses for. The in loop returns in the same order as it iterates through the object (the difference is that the for-in loop also enumerates properties in the prototype chain).

Example

Const obj = {foo: 'bar', baz: 42}; console.log (Object.entries (obj)); / / [[' foo', 'bar'], [' baz', 42]] / / array like objectconst obj = {0:'a', 1: 'baked, 2:' c'}; console.log (Object.entries (obj)) / / [['0A','a'], ['1','b'], ['2','c']] / / array like object with random key orderingconst anObj = {100:'a', 2: 'baked, 7:' c'}; console.log (Object.entries (anObj)) / / [['2percent,' b'], ['7percent,' c'], ['100percent,' a']] / / getFoo is property which isn't enumerableconst myObj = Object.create ({}, {getFoo: {value () {return this.foo;}); myObj.foo = 'bar';console.log (Object.entries (myObj)) / / [['foo',' bar']] / / non-object argument will be coerced to an objectconsole.log (Object.entries ('foo')); / / [[' 0percent,'f'], ['1percent,' o'], ['2percent,' o'] / / iterate through key-value gracefullyconst obj = {a: 5, b: 7, c: 9} For (const [key, value] of Object.entries (obj)) {console.log (`${key} ${value}`); / / "a 5", "b 7", "c 9"} / / Or, using array extrasObject.entries (obj). ForEach (([key, value]) = > {console.log (`${key} ${value}`); / / "a 5", "b 7", "c 9" 1. Traversing ordinary objects using for...of

Many novice front-end buddies may have written the following code:

Let obj = {a: 1, b: 2} for (let value of obj) {/ /...}

But after running it, I found that, oh ho, the report was wrong:

Uncaught TypeError: obj is not iterable

As a result, traversing ordinary objects becomes a uniform for...in traversal. But because for...in traverses not only the object's own properties, but also the object prototype, we also need to add a filter when using it, such as:

For (let key in obj) {if (Object.prototype.hasOwnProperty.call (obj, key)) {/ /...}}

You can see that it's not elegant to write like this. The reason why ordinary objects cannot be traversed with for...of is that ordinary objects do not implement the iterator interface (the iterator on JS will write a special article). The JS array implements the iterator interface, so the array of key-value pairs obtained through Object.entries can be traversed by for...of:

For (let [key, value] of Object.entries (obj)) {/ /...}

Object.entries returns an array of key-value pairs of enumerable properties of the object itself, excluding the properties on the prototype

two。 Conversion between ordinary objects and Map objects

You can see that normal objects are converted to Map objects in the project, and you are still traversing with for...in:

Let obj = {a: 1, b: 2} let map = new Map (); for (let key in obj) {if (Object.prototype.hasOwnProperty.call (obj, key)) {map.set (key, obj [key]);}}

In fact, the Map constructor can accept the initialization of a key-value array, which means that you can use Object.entries to convert ordinary objects into Map objects:

Let map = new Map (Object.entries (obj))

So how do Map objects go back to normal objects? Do you still use traversal? No, you can use the Object.fromEntries static method to transform:

Let obj = Object.fromEntries (map)

At this point, many friends may still not understand the conversion relationship between ordinary objects, key-value arrays, and Map objects. To sum up: Object.entries and Object.fromEntries are two opposite operations.

On how to use Object.entries in JavaScript to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.