Is es6 map a reference type?

Map is a reference type; map (collection) is a new reference data type in es6, which represents the mapping relationship of data. Data in the map collection data type is stored in a "key/value" manner. You can use the properties of the object as the key and use the properties to reference the value; the map can be created using new, for example "const myMap = new Map();" .

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

map is a reference type.

es6 map

Before ES6, to implement 'key'=>'value' in JavaScript, which is what we often call key-value pairs, is to use Object to complete. However, this implementation method has problems in special scenarios. ES6 has introduced a new collection type called Map, which brings a true key-value pair storage mechanism to the language.

map (collection) is a new reference data type in es6, which represents the mapping relationship of data; data in the map collection data type is stored in a "key/value" manner, and you can use the properties of the object As keys, use properties to reference values.

1-1 Create Map

Use the new keyword to instantiate a map

let m = new Map();

console.log(m);
// Map(0) {}

Initialization when creating:
Pass in a two-dimensional array parameter (an iterable object, the key value is passed in as an array internally)
For each sub-array, the first element corresponds to map key, the second element is the value

let m = new Map([[{}, 222], [{}, '123']]);

console.log(m);
// Map(2) { {} => 222, {} => '123' }

##1-2 Map Api

1-2-1 Add mapping element

Add through the set() method, passing in two parameters, the first The key of the map is passed in first, and the value of the map is passed in the second one. What is returned is the mapping set (meaning it can be added in a chain)

let m = new Map();

m.set('prop', '值');

console.log(m);
// Map(1) { 'prop' => '值' }

Chained addition of key values

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m);
// Map(3) { 'prop' => '值', 'prop2' => false, 'num' => { id: 13 } }

##1-2-2 Mapping set length Use the

size

attribute to get the number of elements in the current collection<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>let m = new Map(); m.set(&amp;#39;prop&amp;#39;, &amp;#39;值&amp;#39;).set(&amp;#39;prop2&amp;#39;, false).set(&amp;#39;num&amp;#39;, {id: 13}); console.log(m.size);</pre><div class="contentsignin">Copy after login</div></div>

1-2-3 Get elementsGet the element through the get() method and pass in the key of the target

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m.get('prop2'));
// false

##1-2-4 Delete the elementDelete an element in the mapping collection through the delete() method and return a Boolean value indicating whether the deletion is successful or failed

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

m.delete('prop2');
// true

console.log(m.get('prop2'), m.size);
// undefined 2

1-2-5 Detect whether the element is ExistenceUse the has() method to detect whether the target element exists and return the Boolean value of the detection result

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

m.delete('prop2');
// true

console.log(m.has('prop2'), m.has('num'));
// false  true

1-2-6 Clear the element MethodUse the clear() method to clear all elements and return a Boolean value of successful clearing

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

m.clear();
// true

console.log(m);
// Map(0) {}

##1-3 Sequence With iterationmap can iterate elements according to the order of insertion The mapping instance will provide (iterator). It can generate an array in the form of [key, value] in the order of insertion, and can pass entries () method (or provided Symbol.iterator) iterator interface traversal.

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m.entries === m[Symbol.iterator]);// true

for(let k1 of m.entries()){
    console.log(k1);
    // [ 'prop', '值' ]
    // [ 'prop2', false ]
    // [ 'num', { id: 13 } ]
    // 遍历的属性即对应映射元素的键值对数组
}

for(let k2 of m.keys()){
    console.log(k2);
    // prop
    // prop2
    // num
    // 遍历的属性对应映射元素的键
}

for(let k3 of m.values()){
    console.log(k3);
    // 值
    // false
    // { id: 13 }
    // 遍历的属性对应映射元素的值
}

for(let k4 of m[Symbol.iterator]()){
    console.log(k4);
    // [ 'prop', '值' ]
    // [ 'prop2', false ]
    // [ 'num', { id: 13 } ]
    // 遍历的属性即对应映射元素的键值对数组
}

1-4 Comparison with ObjectMemory usage

Browser The difference will lead to different memory usage between the two storage methods. However, given the memory size, map stores about 50% more key-value pairs than Object.

• Insert Performance

  Insertion speed The performance of map and Object above are roughly the same, but if the code involves a large number of insertions, it is recommended to use map

• Find speed

  The difference is smaller Small, Object is better when it contains only a small number of key-value pairs

• Delete performance

  Object's delete() performance is poor, while map's delete() The performance is good. If the data involves a large number of deletion operations, it is recommended to use map

• [Related recommendations:

  javascript video tutorial
,

programming video

】

The above is the detailed content of Is es6 map a reference type?. For more information, please follow other related articles on the PHP Chinese website!