Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

These days I have been looking at part of the source code and found that new Map() appears from time to time. As a new data structure in ES6, Map data structures are already in use in many scenarios. Let’s revisit it today.

Background of Map generation

There is a common data structure in JS – Object, which stores data in the form of key-value pairs. For example, const obj = {name: ‘Tom’}. Its key must be a string.

To solve this problem, ES6 introduces a new data structure called Map, which is similar to but more flexible than objects. Its key can be any data type, not a single string.

Basic syntax for Map

Initialize the

Initializing a Map directly uses a two-dimensional array

const newMap = new Map([['name', 'Tom'], ['age', 20], ['root', 'china']]);

Copy the code

The Map constructor takes an array as an argument and actually performs the following algorithm:

const items = [
  ['name', 'Tom'],
  ['age', 20],
  ['root', 'china']
];

const map = new Map();

items.forEach(
  ([key, value]) => map.set(key, value)
);
Copy the code

Initialize an empty Map

let newMap = new Map();
Copy the code

Matters needing attention

  • If the same key is assigned more than once, the subsequent value overrides the previous value
const map = new Map();

map
.set(1, 'aaa')
.set(1, 'bbb');

map.get(1) // "bbb"
Copy the code
  • Only references to the same object,MapThe structure treats it as the same bond
const map = new Map();

map.set(['a'], 555);
map.get(['a']) // undefined  
Copy the code

[‘a’] and [‘a’] memory addresses are different

The Map key is actually bound to the memory address, and as long as the memory address is different, it is treated as two keys.

  • Two instances of the same value inMapIt’s treated as two bonds
const map = new Map();

const k1 = ['a'];
const k2 = ['a'];

map
.set(k1, 111)
.set(k2, 222);

map.get(k1) // 111
map.get(k2) // 222
Copy the code

Map common methods and properties

The size attribute

The size property returns the total number of Map structure members.

const newMap = new Map([['name', 'Tom'], ['age', 20], ['root', 'china']]); newMap.size; / / 3Copy the code

Map.prototype.set(key, value)

The set method sets the key name key to value and returns the entire Map structure. If the key already has a value, the key value is updated, otherwise the key is generated. The set method returns the current Map object, so it can be chained

let newMap = new Map().set(1, 'a').set(2, 'b').set(3, 'c');
// Map(3) {1 => 'a', 2 => 'b', 3 => 'c'}
Copy the code

Map.prototype.get(key)

The get method reads the value of the corresponding key, and returns undefined if the key is not found.

let newMap = new Map().set(1, 'a').set(2, 'b').set(3, 'c');
newMap.get(1);  // 'a'
newMap.get(4);  // undefined
Copy the code

Map.prototype.has(key)

Returns a Boolean if a key is in the current Map object

let newMap = new Map().set(1, 'a').set(2, 'b').set(3, 'c');
newMap.has(1);  // true
newMap.has(4);  // false
Copy the code

Map.prototype.delete(key)

Delete a key, return true. If deletion fails, return false.

let newMap = new Map().set(1, 'a').set(2, 'b').set(3, 'c');
newMap.delete(1); // true
newMap.has(1);  // false
newMap.delete(1); // false
Copy the code

Map.prototype.clear()

Clears all members with no return value.

let newMap = new Map().set(1, 'a').set(2, 'b').set(3, 'c'); newMap.clear(); newMap.size; / / 0Copy the code

conclusion

If this article helped you, please like 👍 and follow ⭐️.

If there are any errors in this article, please correct them in the comments section 🙏🙏.