This is the 10th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

preface

Today we are going to talk about choosing between Map and Object. Before ECMAScript 6, implementing “key/value” storage in JavaScript could be done easily and efficiently using object, that is, using object properties as keys and using properties to reference values. But this implementation is not without its problems, for which the TC39 committee has defined a specification for “key/value” storage. A new feature of ECMAScript 6, Map is a new collection type that brings true key/value storage to the language. Most of Map’s features can be implemented with the Object type, but there are some subtle differences. Which one to use is still worth careful scrutiny.

For example,

Unlike Object, which can only use numeric values, strings, or symbols as keys, Maps can use any JavaScript data type as keys. Map uses the Same ValueZero comparison operation internally (defined internally by the ECMAScript specification and not available in the language), which is basically equivalent to using strict object equality criteria to check key matches. Like Object, there is no limit to the value of the map. \

 const m = neW Map(a); \const functionKey ,= function (){}; \const symbolKey = Symbol(a);const objectKey = new Object(a); \ m. set (functionKey, "functionValue"); \ m. set (symbolKey, "symbolValue")); 
 m . set ( objectKey " objectValue ");
 alert ( m . get ( functionKey ));
 alert ( m . get ( symbolKey )); 
 alert ( m . get ( objectKey ));1)

 alert ( m . get ( function (){}));// undefined \
Copy the code

Differences and Opinions

For most Web development tasks, the choice between Object and Map is a matter of personal preference, with little impact. However, for developers who care about memory and performance, there are significant differences between objects and maps. 1. Memory Footprint The engineering level implementation of Objects and Maps varies significantly between browsers, but the amount of memory used to store a single key/value pair increases linearly with the number of keys. Adding or removing key/value pairs in batches depends on the engineering implementation of the type of memory allocated by each browser. This varies by browser, but given a fixed size of memory, Map can store approximately 50% more key/value pairs than Object. 2. Insert performance Inserting new key/value pairs into Object and Map costs roughly the same, although inserting a Map is generally a little faster in all browsers. For both types, insertion speed does not increase linearly with the number of key/value pairs. If the code involves a lot of interpolation, then clearly the Map performs better. 3. Search speed Unlike insertion, finding key/value pairs from large objects and maps has minimal performance differences, but Obfect is sometimes faster if it contains only a small number of key/value pairs. In the case of objects as arrays (such as contiguous integers as attributes), the browser engine can be optimized to use a more efficient layout in memory. This is not possible for Map. For both types, lookup speed does not increase linearly with the number of key/value pairs. If your code involves a lot of lookups, it might be better to choose Object in some cases. 4. Delete performance Using delete “The performance of deleting the Object property has long been criticized, and it still is in many browsers. As a result, some pseudo-deletion of object attributes occurs, including setting the attribute value to undefined or null. But all too often, this is a nasty or inappropriate compromise. For most browser engines, Map’s Dolete0 operation is faster than insert and search. If your code involves a lot of deletion, you should definitely choose Map.