ECMAScript 6 的Map映射

发表于 3年以前 | 总阅读数：395 次

映射（Map）是 ECMAScript 6 规范中引入的一种数据结构。这是一种存储键值对列表很方便的方法，类似于其他编程语言中的词典或者哈希表。

什么是映射

JavaScript 的对象（Object），本质上是键值对的集合（Hash结构），但是传统上只能用字符串当作键，这给使用带来了很大的限制。为了解决这个问题，ECMAScript 6 引入了 Map 数据结构。它类似于对象，也是键值对的集合，但是"键"的范围不仅仅局限于字符串，而是各种类型的值（包括对象）都可以当作键。也就是说，Object 结构（对象结构）提供了"字符串—值"的对应，而 Map 结构提供了"值—值"的对应，是一种更完善的 Hash 结构的实现。下面来看一个简单的示例，了解Map的基本用法：

1. //声明map实例
2. const page_info = new Map()
3. // 向 map 中添加元素
4. page_info.set("seo", {
5. "keywords": "infoq、Map",
6. "description":"Map对象是一种简单的键/值映射，其中的键和值可以是任意值7. （原始值或对象的值）"
})
8. page_info.set("title", "JavaScript es6的map映射")
9. console.log(page_info)
10. console.log(typeof page_info) // object

输出结果为：

1. Map {
2. 'seo' => {
3. keywords: 'infoq、Map',
4. description: 'Map对象是一种简单的键/值映射，其中的键和值可以是任意值（原始值或对象的值）'
5. },
6. 'title' => 'javascript es6的map映射'
7. }
8. object

从输出结果看，本质上Map（映射）就是一个 object 对象。

Object 与 Map 区别

Object 和 Map 的相似之处在于，都是按键存取一个值，而且键都是可以删除的。可以看出，二者之间是非常相似的，它的不同这之处在于：

MapObject意外的键 Map 默认情况不包含任何键。只包含显式插入的键。

一个 Object 有一个原型, 原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。

注意: 虽然 ES5 开始可以用 Object.create(null) 来创建一个没有原型的对象，但是这种用法不太常见。

键的类型一个 Map 的键可以是任意值，包括函数、对象或任意基本类型。一个 Object 的键必须是一个 String 或是 Symbol 。键的顺序 Map 中的 key 是有序的。因此，当迭代的时候，一个 Map 对象以插入的顺序返回键值。

一个 Object 的键是无序的

注意：自ECMAScript 2015规范以来，对象确实保留了字符串和 Symbol 键的创建顺序；因此，在只有字符串键的对象上进行迭代将按插入顺序产生键。

size Map 的键值对个数可以轻易地通过 size 属性获取 Object 的键值对个数只能手动计算迭代 Map 是 iterable 的，所以可以直接被迭代。

迭代一个 Object 需要以某种方式获取它的键然后才能迭代。性能在频繁增删键值对的场景下表现更好。在频繁添加和删除键值对的场景下未作出优化。

Map映射常用方法

常用的 Map 方法有：赋值 set(key, value) 、获取 get(key) 、移除指定键名及其对应的值delete(key) 、判断是否存在 has(key) 、获取所有值 values() 、 key/value 迭代器 entries() 、遍历 forEach() 和清空所有键/值对 clear() 等。

声明并初始化

1. const new_map = new Map();
2. console.log(new_map); //输出：Map {}

赋值 set

赋值使用 map.set(key,value) ，可以用于增加新的键/值对或者修改键/值对，返回整个Map对象。

1. const page_info = new Map()
2. // 设置值
3. page_info.set("seo", {
4. "keywords": "infoq、Map",
5. "description":"Map对象是一种简单的键/值映射，其中的键和值可以是任意值（原始值或对象的值）"
6. });
7. console.log(page_info);
8. page_info.set("seo", "seo信息");
9. console.log(page_info);

上面的示例增加值，并修改值。

1. Map {
2. 'seo' => {
3. keywords: 'infoq、Map',
4. description: 'Map对象是一种简单的键/值映射，其中的键和值可以是任意值（原始值或对象的值）'
5. }
6. }
7. Map { 'seo' => 'seo信息' }

获取键值 get

使用 get(key) 获取键值，如果获取的 key->value 不存则返回 undefined-

1. const page_info = new Map();
2. page_info.set("title", "javascript es6的map映射");
3. const title = page_info.get("title");
4. const seo_info = page_info.get("seo");
5. console.log(title); //javascript es6的map映射
6. console.log(seo_info); //undefined

删除键值 delete

map.delete(key) 删除指定 key 的键值对，返回成功或失败结果，删除成功返回 true ，删除失败返回 false 。

1. const page_info = new Map();
2. page_info.set("title", "javascript es6的map映射");
3. page_info.set("author", "infoq");
4. console.log(page_info); // Map { 'title' => 'javascript es6的map映射', 'author' => 'infoq' }
5. 
6. const deleted_author = page_info.delete("author");
7. const deleted_seo = page_info.delete("seo");
8. console.log(deleted_author); // true
9. console.log(deleted_seo); // false
10. console.log(page_info); // Map { 'title' => 'javascript es6的map映射' }

判断键值是否存在 has

使用 map.has(key) 判断指定 key 是否存在。

1. const page_info = new Map();
2. page_info.set("title", "javascript es6的map映射");
3. console.log(page_info); // Map { 'title' => 'javascript es6的map映射' }
4. 
5. console.log(page_info.has("title")); // true
6. console.log(page_info.has("seo")); // false

获取所有键值 values()

1. const page_info = new Map();
2. page_info.set("title", "javascript es6的map映射");
3. page_info.set("author", "infoq");
4. console.log(page_info.values()); // [Map Iterator] { 'javascript es6的map映射', 'infoq' }

key/value 迭代器 entries()

使用 map.entries() 返回一个包含Map对象中每一个 [key, value] 数组的Iterator迭代器。

1. const page_info = new Map();
2. page_info.set("title", "javascript es6的map映射");
3. page_info.set("author", "infoq");
4. console.log(page_info.entries());

输出的结果为：

1. [Map Entries] {
2. [ 'title', 'javascript es6的map映射' ],
3. [ 'author', 'infoq' ]
4. }

遍历所有键值 forEach(callback)

1. const page_info = new Map();
2. page_info.set("title", "javascript es6的map映射");
3. page_info.set("author", "infoq");
4. page_info.forEach((value,key)=>{
5. console.log(key,value);
6. });

输出的结果为：

1. title javascript es6的map映射
2. author infoq

清空Map映射所有键值 clear()

使用 map.clear() 清空Map所有的键值对。

1. const page_info = new Map();
2. page_info.set("title", "javascript es6的map映射");
3. page_info.set("author", "infoq");
4. page_info.clear();
5. console.log(page_info); // Map {}

与其它数据结构的转换

Map映射转为数组

Map转为数组最方便方法是使用扩展运算符 ...

1. const page_info = new Map();
2. page_info.set("title", "javascript es6的map映射");
3. page_info.set("author", "infoq");
4. console.log([...page_info]); // [ [ 'title', 'javascript es6的map映射' ], [ 'author', 'infoq' ] ]

Map映射转为对象

1. function mapToObj(map) {
2. const obj = Object.create(null);
3. map.forEach((v,k)=>{
4. obj[k] = v;
5. });
6. return obj;
7. }
8. const page_info = new Map();
9. page_info.set("title", "javascript es6的map映射");
10. page_info.set("author", "infoq");
11. 
12. console.log( mapToObj(page_info));

输出结果为：

1. [Object: null prototype] {
2. title: 'javascript es6的map映射',
3. author: 'infoq'
4. }

数组转为Map映射

将数组传入Map构造函数即可，即 new Map(array) 。

1. const page_info = [
2. ["title","javascript es6的map映射"],
3. ["author","infoq"]
4. ];
5. console.log(new Map(page_info)); // Map { 'title' => 'javascript es6的map映射', 'author' => 'infoq' }

对象转为Map

对象转为Map映射通过 Object.entries() 。

1. const page_info = {
2. title:"javascript es6的map映射",
3. author:"infoq"
4. };
5. console.log(new Map(Object.entries(page_info))); // Map { 'title' => 'javascript es6的map映射', 'author' => 'infoq' }

映射Map转为jsON

Map 转为 jsON ，步骤是先把Map转为对象，即前面的 mapToObj ，然后使用 JSON.stringify 方法。

1. function mapToObj(map) {
2. const obj = Object.create(null);
3. map.forEach((v,k)=>{
4. obj[k] = v;
5. });
6. return obj;
7. }
8. function mapToJson(map){
9. return JSON.stringify(mapToObj(map));
10. }
11. const page_info = new Map();
12. page_info.set("title", "javascript es6的map映射");
13. page_info.set("author", "infoq");
14. console.log( mapToJson(page_info)); // {"title":"javascript es6的map映射","author":"infoq"}

感谢阅读！希望你今天学到了一些新知识。本文完~