开篇

ES6里除了增加了Set（集合）类型外（笔者在这篇文章《Set与WeakSet》有过介绍），今天的这篇文章笔者将继续介绍ES6引入的新类型——Map(映射类型)和其对应的弱类型WeakMap。映射类型在计算机科学中定义属于关联数组，而关联数组的定义是若干键值对(Key/Value Pair)组成的集合,其中每个Key值都只能出现一次。

本篇文章将从以下方面进行介绍：

• Map代码示例

• Map常用方法示例

• Map与Object的区别

• weakMap介绍

本篇文章阅读时间预计5分钟

01

Map代码示例

Map的键和值可以是任何数据类型，键值对按照插入顺序排列，下段代码演示了Map的一些用法：

let map = new Map();let o = {n: 1};map.set(o, "A"); //addmap.set("2", 9);console.log(map.has("2")); //check if key existsconsole.log(map.get(o)); //retrieve value associated with keyconsole.log(...map);console.log(map);map.delete("2"); //delete key and associated valuemap.clear(); //delete everything//create a map from iterable objectlet map_1 = new Map([[1, 2], [4, 5]]);console.log(map_1.size); //number of keys

上述代码将会输出：

trueA[ { n: 1 }, 'A' ] [ '2', 9 ]Map { { n: 1 } => 'A', '2' => 9 }2

从上述代码中，我们可以看出使用new Map()语法进行声明，Map键的类型可以使用任意对象作为键（字符串，object类型），我们还可以直接以二维数组键值对的形传入到构建函数中，第一项为键，后一项为值。

Map中如果插入重复的键，会怎么样？如下段代码所示：

const map=new Map([['foo',1],['foo',2]]);console.log(map);console.log(map.get('foo'));

上述代码将会输出：

Map { 'foo' => 2 }2

上述代码我们可以看出，如果存在相同的键，则会按照FIFO（First in First Out,先进先出）原则，后面的键值信息会覆盖前面的键值信息。

02

Map常用方法示例

以下表格罗列了Map相关的常用操作方法：

增删键值对与清空MAP

let user={name:"Aaron",id:1234};let userHobbyMap=new Map();userHobbyMap.set(user,['Ice fishing','Family Outting']);//添加键值对console.log(userHobbyMap);userHobbyMap.delete(user);//删除键值对userHobbyMap.clear(); //清空键值对console.log(userHobbyMap);

上述代码将会输出：

Map { { name: 'Aaron', id: 1234 } => [ 'Ice fishing', 'Family Outting' ] }Map {}

获取键值对

与Set集合对象不一样，集合对象的元素没有元素位置的标识，故没有办法获取集合某元素，但是映射对象由键值对组成，所以可以利用键来获取对应的值。

const map=new Map();map.set('foo', 'bar');console.log(map.get('foo')); //output bar

检查映射对象中是否存在某键

与Set集合一样，Map映射也可以使用has(键)的方法来检查是否包含某键。

const map=new Map([['foo',1]]);console.log(map.has('foo'));//output trueconsole.log(map.has('bar'));//output false

遍历映射中的键值对

映射对象在设计上同样也是一种可迭代的对象，可以通过for-of循环对其遍历，同时也可以使用foreach进行遍历。

映射对象中带有entries()方法，用于返回包含所有键值对的可迭代的二元数组对象，而for-of和foreach便是先利用entries()方法先将映射对象转换成一个类数组对象，然年再进行迭代。

const map=new Map([['foo',1],['bar',2]]);console.log(Array.from(map.entries()));//output//[ [ 'foo', 1 ], [ 'bar', 2 ] ]for(const [key,value] of map){    console.log(`${key}:${value}`);}//output//foo:1//bar:2map.forEach((value,key,map)=>    console.log(`${key}:${value}`))//output//foo:1//bar:2

03

Map与Object的区别

说了这么多映射对象的方法，Map和Object对象有哪些区别呢？以下表格进行了总结：

从中我们可以看出Map对象可以使用任何对象作为键，这就解决了我们实际应用中一个很大的痛点，比如现在有一个DOM对象作为键时，Object就不是那么好用了。

04

WeakMap

与集合类型（Set）一样，映射类型也有一个Weak版本的WeakMap。WeakMap和WeakSet很相似，只不过WeakMap的键会检查变量的引用，只要其中任意一个引用被释放，该键值对就会被删除。

以下三点是Map和WeakMap的主要区别：

1. Map对象的键可以是任何类型，但WeakMap对象中的键只能是对象引用

2. WeakMap不能包含无引用的对象，否则会被自动清除出集合（垃圾回收机制）。

3. WeakSet对象是不可枚举的，无法获取大小。

下段代码示例验证了WeakMap的以上特性：

let weakmap = new WeakMap();(function(){    let o = {n: 1};    weakmap.set(o, "A");})();  // here 'o' key is garbage collectedlet s = {m: 1};weakmap.set(s, "B");console.log(weakmap.get(s));console.log(...weakmap); // exception thrownweakmap.delete(s);weakmap.clear(); // Exception, no such functionlet weakmap_1 = new WeakMap([[{}, 2], [{}, 5]]); //this worksconsole.log(weakmap_1.size); //undefined”

const weakmap=new WeakMap();let keyObject={id:1};const valObject={score:100};weakmap.set(keyObject, valObject);console.log(weakmap.get(keyObject));//output { score: 100 }keyObject=null;console.log(weakmap.has(keyObject));//output false

05

小节

今天的内容就介绍到这里，我们明白了Map是一个键值对的映射对象，相比Object来说可以使用任何键做为键值，并且能够很方便的获取键值对。WeakMap相对于Map是一个不可枚举的对象，必须使用对象作为键值。如何更好的使用Map和WeakMap还需要具体结合我们实际的业务场景进行灵活使用。

精彩推荐

ES6基础丨let和作用域

ES6基础丨const介绍

ES6基础丨默认参数值

ES6基础丨展开语法（Spread syntax）

ES6基础丨解构赋值（destructuring assignment）

ES6基础丨箭头函数（Arrow functions）

ES6基础丨模板字符串（Template String）

ES6基础丨Set与WeakSet

JavaScript基础丨前端不懂它，会再多框架也不过只是会用而已！

JavaScript基础丨你真的了解JavaScript吗?

JavaScript基础丨回调(callback)是什么?

JavaScript基础丨Promise使用指南

JavaScript基础丨深入学习async/await

JS加载慢？谷歌大神带你飞!(文末送电子书)

19年你应该关注这50款前端热门工具（上）

19年你应该关注这50款前端热门工具（中）

19年你应该关注这50款前端热门工具（下）

专注分享当下最实用的前端技术。关注前端达人，与达人一起学习进步！

长按关注"前端达人"