Before ES5, there was no such data collection as Map, and ES6 added it.
Map is a collection of key-value, the key can be any type of data, similar to the object, but the key of the object can only be a string.
The following is a detailed description of my understanding of its features and use.
Map data collection
1. Create a Map instance through new Map()
let map = new Map()
2. Add values to the Map collection -- the key can be any type of data
// 方式 1： 通过传入二维数组
let map1 = new Map([[1, 2], [3, 4], [5, 6]])
// 方式 2： 通过 set() 方法进行添加值
let map2 = new Map()
map2.set(.1, 2132)
map2.set(true, {
})
map2.set({
}, .31241)
map2.set(NaN, [1, 2, 3])
map2.set([], 32131312)
3. Repeatedly adding keys, the key of the basic data type will overwrite the value, and the reference type will not, because the memory addresses are different
let map = new Map()
map.set(111, 222)
map.set(111, 3333)
map.set(true, [])
map.set(NaN, {
})
map.set({
}, 1111)
map.set({
}, 333)
map.set([1,2], true)
map.set([1,2], 'rerffds')
4. Map methods: set(), get(), has(), delete(), clear(), size
let map = new Map([[true, 111], [{
}, 4124], [NaN, false]])
let arr = [1, 2]
map.set(111, 222) // 设置 键 111，对应的值为 222
map.set(arr, {
}) // 设置 键 为变量 arr，对应的值为 {}
map.get(111) // 获取键 111 ，对应的值 ---> 222
map.get(43141414) // 获取不存在的键 43141414 ，对应的值 ---> undefined
map.has(true) // 是否存在键 true ---> true
map.has({
}) // 是否存在键 {} ---> false
map.has(arr) // 是否存在键 arr ---> false true
map.size // 5
map.clear() //清除所有成员数据
5. Centralized way of traversing Map: keys(), values(), entries(), for...of and forEach()
let map = new Map([[1, 2], [3, 4], [5, 6]])
// 遍历键 key
for(let key of map.keys()){
console.log(key);
}
/* 输出结果为：
1
3
5
*/
// 遍历键值 value
for(let value of map.values()){
console.log(value);
}
/* 输出结果为：
2
4
6
*/
// 遍历键值
for(let item of map.entries()){
console.log(item[0], item[1]);
}
for(let [key, value] of map.entries()){
console.log(key, value);
}
for(let [key, value] of map){
console.log(key, value);
}
/* 输出结果都为：
1 2
3 4
5 6
*/
6. Interconversion between Map and two-dimensional array
// 二维数组转 Map方式 1：直接作为 Map 参数传入
let arrRes1 = [[1, 2], [3, 4], [5, 6]]
let mapRes1 = new Map(arrRes1)
// 二维数组转 Map方式 2：遍历 for...of
let arrRes2 = [[1, 2], [3, 4], [5, 6]]
let mapRes2 = new Map()
arrRes2.forEach(item => {
mapRes2.set(item[0], item[1])
})
// 二维数组转 Map方式 2：遍历 for
let arrRes3 = [[1, 2], [3, 4], [5, 6]]
let mapRes3 = new Map()
for(let i = 0; i < arrRes3.length; i++){
mapRes3.set(arrRes3[i][0], arrRes3[i][0])
}
//=====================================================//
// Map 转二维数组方式 1： 使用展开符 ...
let map1 = new Map([[1, 2], [3, 4], [5, 6]])
let arr1 = [...map1]
// Map 转二维数组方式 2： 使用 Array.form
let map2 = new Map([[1, 2], [3, 4], [5, 6]])
let arr2 = Array.from(map2)
// Map 转二维数组方式 3： 使用遍历 forEach
let map3 = new Map([[1, 2], [3, 4], [5, 6]])
let arr3 = []
map3.forEach(item => {
arr3.push([item[0], item[1]])
})
// Map 转二维数组方式 4： 使用遍历 for...of
let map4 = new Map([[1, 2], [3, 4], [5, 6]])
let arr4 = []
for(let [key, value] of map4){
arr4.push([key, value])
}
7. Interconversion between Map and object
// 对象转 Map 方式1：使用 Object.entries()
let objRes1 = {
'name': 'bob',
age: 111,
sex: '男'
}
let mapRes1 = new Map(Object.entries(objRes1))
// 对象转 Map 方式2：使用 遍历 for...in
let objRes2 = {
'name': 'bob',
age: 111,
sex: '男'
}
let mapRes2 = new Map()
for(let key in objRes2){
mapRes2.set(key, objRes2[key])
}
//==========================================
// Map 转对象：使用 遍历 for...of
let map1 = new Map([["name", "bob"],["age", 11],["sex", "男"]])
let obj1 = {
}
for(let [key, value] of map1){
obj1[key] = value;
}
expand
1. WeakMap is similar to Map, but the key of WeakMap must be an object (except null)
2. The object pointed to by the key of WeakMap is not included in the garbage collection mechanism, unless the key is cleared by itself
let weakMap = new WeakMap()
weakMap.set({
}, 1111)
weakMap.set({
name: 'bob'}, true)
weakMap.set([], NaN)
weakMap.set([1,2], {
})
Just record this, I wish you all a happy! ! ! ! ! !
