JavaScript中的Map数据结构详解 JavaScript中的Map数据结构详解

1.?什么是 Map
2.?Map 构造函数

2.1)?数组
2.2)?Set
2.3)?Map

3.?Map 的实例属性和方法

3.1) Map 的属性

size

3.2) Map 的方法

set
get
has
delete
clear
forEach

4.?Map的注意事项

5.?Map的使用场景

总结

1.?什么是 Map Map 就是映射的意思，即从键到值的映射。

Map 保存键值对，并且能够记住键的原始插入顺序。

那么它和 Object 有什么区别？
对象一般用字符串作键

const obj = { val : "object"}

任何值(对象或者原始值) 都可以作为 Map 的一个键或一个值

const m = new Map(); ; m.set('val', 'map'); m.set(1, 'number'); m.set(new Set([1, 2]), 'set'); m.set({}, 'object'); console.log(m);

文章图片

所以，在键值对的数据结构中，Map 比 Object 更为合适

2.?Map 构造函数对于 Set 的构造函数的参数，可以传递以下几种形式。

2.1)?数组
注意，要传递的是二维数组，因为二维数组才能体现出键值对

const m = new Map([['val', 'map'],['apple', 'fruit']]); console.log(m);

文章图片

2.2)?Set
以 Set 作为参数，也要体现出键值对形式
对 Set 不了解的，想了解的可以看看下面这篇文章：JavaScript—Set

const m = new Map(new Set([['tigger', 'animal'],['orange', 'fruit']])); console.log(m);

文章图片

2.3)?Map

const m1 = new Map([['watermelon', 'fruit'],['cat', 'animal']])const m2 = new Map(m1); console.log(m2);

文章图片

这里相当于把m1复制过去，给了m2，不过它们不是同一个 Map

console.log(m2 === m1);

文章图片

综上，Map 构造函数的参数要能体现出键值对的形式。

3.?Map 的实例属性和方法
3.1) Map 的属性

size Map 的属性，有一个属性size，用来存储它的成员个数

const m = new Map([['val', 'map'],['cat', 'animal'],['orange', 'fruit']]); console.log(m.size);

文章图片

3.2) Map 的方法

set 给 Map 中添加成员

const m = new Map(); // 它的参数为两个，第一个为键，第二个为值m.set('val', 'map'); console.log(m); // 可以连缀 Setm.set('orange', 'fruit').set('cat', 'animal'); console.log(m); // 添加的新成员如果键已经存在了，那么将会覆盖它// 键的顺序不会发生改变，因为 Map 能够记住键的原始插入顺序m.set('orange', 'sweet'); console.log(m);

文章图片

get 通过键获取 Map 的成员

const m = new Map([['val', 'map'],['orange', 'fruit'],['cat', 'animal'],[true, 'false']]); console.log(m.get('val')); console.log(m.get(true)); // 获取不存在的键时，会返回 undefinedconsole.log(m.get('tigger'));

文章图片

has 用来判断 Map 是否含有某个键

const m = new Map([['val', 'map'],['orange', 'fruit'],['cat', 'animal'],[true, 'false']]); console.log(m.has(true)); console.log(m.has('true'));

文章图片

delete 通过键，来删除 Map 中的成员

const m = new Map([['val', 'map'],['orange', 'fruit'],['cat', 'animal'],[true, 'false']]); m.delete('cat'); // 删除不存在的成员，将什么也不会发生，也不会报错m.delete('true'); console.log(m);

文章图片

clear 删除 Map 的所有成员

const m = new Map([['val', 'map'],['orange', 'fruit'],['cat', 'animal'],[true, 'false']]); m.clear(); console.log(m);

文章图片

forEach 用来遍历 Map 的成员
它有两个参数，第一个参数为回调函数，第二个参数设定回调函数中this指向什么，即

m.forEach(回调函数, 回调函数的指向)

先来看第一个参数

m.forEach(function(value, key, map){ value 就是 Map 的值 key 就是 Map 的键 map 就是前面Map的本身，即这里 map === m});

通过一个例子理解一下：

const m = new Map([['val', 'map'],['orange', 'fruit'],['cat', 'animal'],[true, 'false']]); m.forEach(function(value, key, map) {console.log(value, key, map == m); }); const m = new Map([['val', 'map'],['orange', 'fruit'],['cat', 'animal'],[true, 'false']]); m.forEach(function(value, key, map) {console.log(value, key, map == m); });

文章图片

再来看第二个参数

const m = new Map([['val', 'map'],['orange', 'fruit'],['cat', 'animal'],[true, 'false']]); m.forEach(function(value, key, map) {console.log(this); }, document); const m = new Map([['val', 'map'],['orange', 'fruit'],['cat', 'animal'],[true, 'false']]); m.forEach(function(value, key, map) {console.log(this); }, document);