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

let m = new Map();

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

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

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

attribute to get the number of elements in the current collection<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;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

Copy after login

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

Copy after login

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) {}

Copy after login

##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

• 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
,

】

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!