Chapter 6 of JavaScript Advanced Programming Reading Sharing - Map&Set

JavaScript Advanced Programming (4th Edition) Reading Sharing Note Recording

Applicable to comrades who are just getting started

 Map

        New to ECMAScript 6 , Map is a new collection type that brings true key/value storage to the language. Most of the features of Map can be implemented by Object type, but there are still some subtle differences between the two.

• An empty map can be created using the new keyword and the Map constructor:

const m = new Map()

Initialize map with nested array 

// 使用嵌套数组初始化映射
 const m1 = new Map([ 
  ["key1", "val1"], 
  ["key2", "val2"], 
  ["key3", "val3"] 
 ]);

• Methods: set(), get(), has(), delete(), clear()

• The set() method returns a mapping instance, so multiple operations can be concatenated
• Attribute: size

const m = new Map()

m.set('age',18)

//has()方法，如果存在键值就返回发生true，不存在就返回false
console.log( m.has('firstName') )  //false
console.log( m.has('age') ) // true

//get()方法,如果存在键值就返回键对应的值，不存在就返回undefined
console.log( m.get('firstName') ) //undefained
console.log( m.get('age') ) //18

//set()方法可以链式操作，set(键，值)
m.set("firstName", "Matt").set("lastName", "Frisbie")

//size属性
console.log(m.size) // 3

//delete()方法，删除某个键值对
m.delete('age')
console.log( m.has('age') ) // false
console.log(m.size) // 2

//clear()方法，清空对象
m.clear()
console.log(m.size) // 0

• Unlike Object , which can only use numeric values, strings, or symbols as keys, Map can use any JavaScript data type as a key

const m = new Map(); 


const functionKey = function() {}; 
const symbolKey = Symbol(); 
const objectKey = new Object(); 


m.set(functionKey, "functionValue"); 
m.set(symbolKey, "symbolValue"); 
m.set(objectKey, "objectValue"); 

alert(m.get(functionKey)); // functionValue 
alert(m.get(symbolKey)); // symbolValue 
alert(m.get(objectKey)); // objectValue

• Sequence and Iteration

Get this iterator through the entries() method (or the Symbol.iterator property, which refers to entries() )

const m = new Map([ 
 ["key1", "val1"], 
 ["key2", "val2"], 
 ["key3", "val3"] 
]); 

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


for (let pair of m.entries()) { 
 alert(pair); 
} 
// [key1,val1] 
// [key2,val2] 
// [key3,val3] 


for (let pair of m[Symbol.iterator]()) { 
 alert(pair); 
} 
// [key1,val1] 
// [key2,val2] 
// [key3,val3]

keys() and values() return iterators yielding keys and values, respectively, in insertion order:

const m = new Map([ 
 ["key1", "val1"], 
 ["key2", "val2"], 
 ["key3", "val3"] 
]); 

for (let key of m.keys()) { 
 console.log(key); 
} 
// key1 
// key2 
// key3 

for (let key of m.values()) { 
 console.log(key); 
} 
// value1 
// value2 
// value3

Comparison of Object and Map

• memory usage

The engineering-level implementations of         Object and Map vary significantly between browsers , but the amount of memory used to store a single key/value pair increases linearly with the number of keys. But given a fixed size of memory, Map can store about 50% more key / value pairs than Object .

• Insertion performance

The cost of inserting new key / value pairs in         Object and Map is about the same, although inserting into Map is generally slightly faster in all browsers . If the code involves a lot of insert operations, then obviously the performance of Map is better

• search speed

        Unlike inserting, the performance difference in finding key / value pairs from a large Object and Map is minimal, but Object is sometimes faster if it contains only a small number of key / value pairs

• delete performance

If the code involves a lot of delete operations, then there is no doubt that Map should be chosen

Set

        ECMAScript 6's new Set is a new collection type that brings collection data structures to the language. Sets are in many ways like enhanced Maps in that most of their API and behavior are common.

An empty collection can be created using the new keyword and the Set constructor:

const m = new Set();

Initialize collection with array

// 使用数组初始化集合 
const s1 = new Set(["val1", "val2", "val3"]);

 method attribute

Methods: add(), has(), delete(), clear()

Attribute: size

const s = new Set();

s.add('Tom')

//has()  
console.log(s.has('Jerry')) //false
console.log(s.has('Tom')) //true

//size
console.log(s.size) // 1

//add()
s.add('Jerry').add('Mary')
console.log(s.size) // 3

//delete()
s.delete('Tom') 
console.log(s.size) // 2

//clear()
s.clear()
console.log(s.size) // 0

Sequence and Iteration

The iterative method called is consistent with map

const s = new Set(["val1", "val2", "val3"]); 
for (let pair of s.entries()) { 
 console.log(pair); 
} 
// ["val1", "val1"] 
// ["val2", "val2"] 
// ["val3", "val3"]