ES6 学习笔记（十）Map的基本用法

1 基本用法

Map类型是键值对的有序列表，而键和值都可以是任意类型。可以看做Python中的字典（Dictionary）类型。

1.1 创建方法

Map本身是一个构造函数，用来生成Map实例，如：

let m1 = new Map()

1.2 初始化

Map构造函数可以接收一个数组作为参数，该数组的成员可以是一组表示键值对的数组。也可以是任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构。如：

let map = new Map([
    ['name', 'zhang'],
    ['title', 'Author']
])

1.3 常见方法

方法	描述
set(key, value)	用于设置（添加）键值对
get(key)	通过key获取对应值
delete(value)	删除值，返回一个布尔值，表示删除是否成功
has(value)	返回一个布尔值，表示该值是否是Set实例的成员
clear()	清除所有成员，没有返回值
size	返回成员个数

相同的key不能添加，现有的value会被替换成新的value值

let m = new Map()
let o = { p: 'Hello World' }
m.set(o, 'content')
console.log(m.size); // 1
console.log(m.get(o)); // content
console.log(m.has(o)); // true
console.log(m.delete(o)); // true
console.log(m.has(o)); // false
console.log(m.clear(o)); // undefind

let m2 = new Map()
let o2 = { p: 'Hello World' }
let o3 = { q: 'JavaScript' }
m2.set(o2, 'content')
m2.set(o3, 'content2')
console.log(m2.size); // 2

let map = new Map([
    ['name', 'zhang'],
    ['title', 'Author']
])
console.log(map.size); // 2
console.log(map.has('name')); // true
console.log(map.get('name')); // zhang
console.log(map.has('title'));// true
console.log(map.get('title'));// Author

1.4 需要注意的地方

1、只有对同一个对象的引用，Map才认为是同一个键。Map的键实际上是和内存地址绑定的，只要内存地址不一样，就是为两个键。

const mm = new Map()
mm.set(['a'], 5)
// 把数组对象的引用传进去了，两者并不相等
// 不要把对象直接传进去，不然拿不到
// ['a'] == ['a'] // false
console.log(mm.get(['a']));  // undefined

const k1 = {}
const k2 = {}
// 为了稳定key值保存的对象的引用保持不变，所以用const
mm.set(k1, 100)
mm.set(k2, 200)
console.log(mm.get(k1), mm.get(k2));// 100 200

2、如果Map的key是一个简单类型的值，如数值，字符串，布尔值。只要两个值严格相等，map就认为是同一个key。

const mm = new Map()
mm.set(-0, 123)
console.log(mm.get(+0)); // 123
console.log(mm.get(-0)); // 123

mm.set(true, 1)
// mm.set(true,111)
mm.set("true", 2)
console.log(mm.get(true)); // 1
console.log(mm.get("true")); // 2

mm.set(undefined, 3)
mm.set(undefined, 333)
mm.set(null, 4)
console.log(mm.get(undefined)); // 333
console.log(mm.get(null)); // 4

mm.set(NaN, 111)
console.log(mm.get(NaN)); // 111

2 其它方法

2.1 遍历方法

Map的遍历与Set类似，前三个是三个遍历器的生成函数，后面那个是遍历方法。

方法	描述
keys()	返回键名的遍历器
values()	返回键值的遍历器
entries()	返回键值对的遍历器
forEach()	使用回调函数遍历每个成员，没有返回值

Map 结构的默认遍历器接口（Symbol.iterator属性），就是entries方法

let m1 = new Map()
m1.set("a", 100).set("b", 200).set("c", 300)
console.log(m1);
console.log(m1.keys());
console.log(m1.values());
console.log(m1.entries());
console.log(Object.keys(m1));

输出结果： Map(3) { 'a' => 100, 'b' => 200, 'c' => 300 } [Map Iterator] { 'a', 'b', 'c' } [Map Iterator] { 100, 200, 300 } [Map Entries] { [ 'a', 100 ], [ 'b', 200 ], [ 'c', 300 ] } []

2.2 Map的map( )、filter( )的使用

与Set类似，Map也可以利用扩展运算符转换为数组，从而利用map( )，filter( )等方法，如：

const map0 = new Map().set(1, 'a').set(2, 'b').set(3, 'c')
console.log(map0);
const map1 = new Map([...map0].filter(([k, v]) => k < 3))
console.log(map1);
const map2 = new Map([...map0].map(([k, v]) => [k * 2, "_" + v]))
console.log(map2);

运行结果： Map(3) { 1 => 'a', 2 => 'b', 3 => 'c' } Map(2) { 1 => 'a', 2 => 'b' } Map(3) { 2 => '_a', 4 => '_b', 6 => '_c' }

2.3 Map和其它数据结构的相互转换

2.3.1 Map转换为数组

function mapToArr(mymap) {
    const arr = [...mymap]
    return arr
}
const m1 = new Map().set('a', 1).set('b', 2).set('c', 3)
let arr = mapToArr(m1)
console.log(arr);

输出结果： [ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

2.3.2 数组转换为Map

function arrToMap(arr) {
    const mymap= new Map(arr)
    return mymap
}
const arr = [["a", 1], ["b", 2], ["c", 3]]
const m1 = arrToMap(arr)
console.log(m1);

输出结果： Map(3) { 'a' => 1, 'b' => 2, 'c' => 3 }

2.3.3 Map转换为对象

function mapToObj(mymap) {
    let obj = Object.create(null) // 创建一个没有原型对象的顶级对象
    for (let [k, v] of mymap) {
        obj[k] = v
    }
    return obj
}
const m1 = new Map()
m1.set('a', 1).set('b', 2).set('c', 3)
let obj = mapToObj(m1)
console.log(obj);

输出结果： { a: 1, b: 2, c: 3 }

如果Map的所有键都是字符串，才可以转换为对象

2.3.4 对象转换为Map

function objToMap(obj) {
    let mymap = new Map();
    for (let k of Object.keys(obj)) {
        mymap.set(k, obj[k]);
    }
    return mymap;
}
let m1 = objToMap({ a: 1, b: 2, c: 3 });
console.log(m1);

输出结果： Map(3) { 'a' => 1, 'b' => 2, 'c' => 3 }

2.3.5 Map转换为JSON

Map的键名都是字符串，可以选择转换为对象JSON

function mapToStrJSON(mymap) {
    //先将Map转换为对象，在通过对象生成JSON。
    return JSON.stringify(mapToObj(mymap));
}
let m1 = new Map().set("a", 1).set("b", 2).set("c", 3);
let json1 = mapToStrJSON(m1);
console.log(json1);

输出结果： {"a":1,"b":2,"c":3}

Map的键名有非字符串，可以转换为数组JSON

function mapToArrayJSON(mymap) {
    return JSON.stringify([...mymap]);
}
let m1 = new Map().set(true, 1).set({ foo: 2 }, ["abcdef"]);
let json2 = mapToArrayJSON(m1);
console.log(json2);

输出结果： [[true,1],[{"foo":2},["abcdef"]]]

2.3.6 JSON转换为Map

function jsonToMap(jsonStr) {
    return objToMap(JSON.parse(jsonStr));
}
let m1 = jsonToMap('{ "a": 1, "b": 2, "c": 3 }');
console.log(m1);

输出结果： Map(3) { 'a' => 1, 'b' => 2, 'c' => 3 }