20190727-前端笔记-Map结构

在JS的对象（Object）中，本质是就是键值对的集合（HASH）

{
"name":"Kisn",
Brith:941018
}

但是在实际情况使用中，我们不能很好地使用它，它也会导致很多意外。特别是，我想要一个动态的键时.

const data = {};
const element = document.getElementById('myDiv');

data[element] = 'metadata';
data['[object HTMLDivElement]'] // "metadata"

所以我们现在有一个数据结构，它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

Map

let m = new Map(),
    o = {a:1};
    
m.set(o,'this is a json')
m.got(0) // 'this is a json'

m.has(o) // true
m.delete(o) // true
m.has(o) // false

将对象o当做m的一个键

• new Map().get(x) 获取键为x的值
• new Map().delete(x) 删除键为x的键值对
• new Map().has(x) 判断是否包含x键值对

但是我在看阮一峰的md的时候，看到一些针对自己的问题，不太好理解。我在下面梳理下：

如何new Map()

我看过阮一峰的文章以后，我自己尝试new一个Map数据的，但是老是报错：

正确的写法

var m5 = new Map([
    ["asd","name"],
    [{no:1,name:'Kisn',age:25},'intro']
])

我的理解是new Map()里面是类数组[],类数组[]里面才是对象（参数）=> [[object,value],[object1,value2]]。

注意事项

在Map数据结构中，我们需要注意的是，Map的键指向的是一个对象，而不是一个具体的值

const map = new Map();

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

为什么会报undefined?

因为很可能两个['a']没有指向同一个对象，内存地址是不一样的。所以在Map数据结构中被视为2个键.

const m = new Map();

const key1 = ['a'];
const key2 = ['a'];

m.set(key1,'1')
 .set(key2,2);

m.get(key1) // '1'
m.get(key2) // 2

遍历方法

let m = new Map([
['name','Kisn'],
['age','25'],
['job','F2E']
])

// 遍历Map的键（key）
for(let key of m.keys()){
    console.log(key)
}
// name
// age
// job

// 遍历Map的值（value）
for(let val of m.values()){
    console.log(val);
}
// Kisn
// 25 
// F2E

// 遍历Map的建和值
for(let item of map.entries()){
    console.log(item[0],item[1])
}
// or
for(let [key,val] of map.entries()){
    console.log(key,val);
}
// or 忽悠.entries相同
for(let [key, val] of map){
    console.log(key,val);
}

// 'name' ,'kisn'
// 'age','25'
// 'job','F2E'

拓展运算符(...)

let m = new Map([
['name','Kisn'],
['age','25'],
['job','F2E']
])

[...m]
// ['name','Kisn'],['age','25'],['job','F2E']`

[...m.entries()]
// ['name','Kisn'],['age','25'],['job','F2E']`

[...m.keys()]
// ['name','age','job']

[...m.values()]
//['Kisn','25','F2E']

我们可以利用Map数据结构的map方法和filter做了什么？

let m = new Map([
    ['name','Kisn'],
    ['age','25'],
    ['job','F2E']
])

// 筛选出`key!=='age'`的键值对生成一个新的Map数组
let m2 = new Map(
    [...m].filter([(key,val])=> key !=='age')
)

// 循环`m`,形成一个的数据
let m3 = new Map(
    [...m].map(([k,v]) => [`${k}:`,v] )
)

参考

ES6-Set&Map