ECMAScript 6的Map映射

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

什么是映射

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

下面来看一个简单的示例，了解Map的基本用法：

//声明map实例
const page_info = new Map()
// 向 map 中添加元素
page_info.set("seo", {
    "keywords": "80深圳、Map",
    "description":"Map对象是一种简单的键/值映射，其中的键和值可以是任意值（原始值或对象的值）"
})
page_info.set("title", "javascript es6的map映射")
console.log(page_info) 
console.log(typeof page_info) // object

输出结果为：

Map {
  'seo' => {
    keywords: '80深圳、Map',
    description: 'Map对象是一种简单的键/值映射，其中的键和值可以是任意值（原始值或对象的值）'
  },
  'title' => 'javascript es6的map映射'
}
object

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

Object与Map区别

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

  Map Object

意外的键	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()  等。

声明并初始化

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

赋值set

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

const page_info = new Map()
// 设置值
page_info.set("seo", {
    "keywords": "80深圳、Map",
    "description":"Map对象是一种简单的键/值映射，其中的键和值可以是任意值（原始值或对象的值）"
});
console.log(page_info);
page_info.set("seo", "seo信息");
console.log(page_info);

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

Map {
  'seo' => {
    keywords: '80深圳、Map',
    description: 'Map对象是一种简单的键/值映射，其中的键和值可以是任意值（原始值或对象的值）'
  }
}
Map { 'seo' => 'seo信息' }

获取键值get

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

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

删除键值delete

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

const page_info = new Map();
page_info.set("title", "javascript es6的map映射");
page_info.set("author", "80sz.com");
console.log(page_info);         // Map { 'title' => 'javascript es6的map映射', 'author' => '80sz.com' }

const deleted_author = page_info.delete("author");
const deleted_seo = page_info.delete("seo");
console.log(deleted_author);   // true
console.log(deleted_seo);      // false
console.log(page_info);        // Map { 'title' => 'javascript es6的map映射' }

判断键值是否存在has

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

const page_info = new Map();
page_info.set("title", "javascript es6的map映射");
console.log(page_info);         // Map { 'title' => 'javascript es6的map映射' }

console.log(page_info.has("title"));   // true
console.log(page_info.has("seo"));     // false

获取所有键值values()

const page_info = new Map();
page_info.set("title", "javascript es6的map映射");
page_info.set("author", "80sz.com");
console.log(page_info.values());       // [Map Iterator] { 'javascript es6的map映射', '80sz.com' }

key/value迭代器entries()

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

const page_info = new Map();
page_info.set("title", "javascript es6的map映射");
page_info.set("author", "80sz.com");
console.log(page_info.entries());

输出的结果为：

[Map Entries] {
  [ 'title', 'javascript es6的map映射' ],
  [ 'author', '80sz.com' ]
}

遍历所有键值forEach(callback)

const page_info = new Map();
page_info.set("title", "javascript es6的map映射");
page_info.set("author", "80sz.com");
page_info.forEach((value,key)=>{
    console.log(key,value);
});

输出的结果为：

title javascript es6的map映射
author 80sz.com

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

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

const page_info = new Map();
page_info.set("title", "javascript es6的map映射");
page_info.set("author", "80sz.com");
page_info.clear();
console.log(page_info);  // Map {}

与其它数据结构的转换

Map映射转为数组

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

const page_info = new Map();
page_info.set("title", "javascript es6的map映射");
page_info.set("author", "80sz.com");
console.log([...page_info]);  // [ [ 'title', 'javascript es6的map映射' ], [ 'author', '80sz.com' ] ]

Map映射转为对象

function mapToObj(map) {
    const obj = Object.create(null);
    map.forEach((v,k)=>{
        obj[k] = v;
    });
    return obj;
}
const page_info = new Map();
page_info.set("title", "javascript es6的map映射");
page_info.set("author", "80sz.com");

console.log( mapToObj(page_info)); 

输出结果为：

[Object: null prototype] {
  title: 'javascript es6的map映射',
  author: '80sz.com'
}

数组转为Map映射

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

const page_info = [
    ["title","javascript es6的map映射"],
    ["author","80sz.com"]
];
console.log(new Map(page_info)); // Map { 'title' => 'javascript es6的map映射', 'author' => '80sz.com' }

对象转为Map

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

const page_info = {
    title:"javascript es6的map映射",
    author:"80sz.com"
};
console.log(new Map(Object.entries(page_info)));  // Map { 'title' => 'javascript es6的map映射', 'author' => '80sz.com' }

映射Map转为JSON

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

function mapToObj(map) {
    const obj = Object.create(null);
    map.forEach((v,k)=>{
        obj[k] = v;
    });
    return obj;
}
function mapToJson(map){
    return JSON.stringify(mapToObj(map));
}
const page_info = new Map();
page_info.set("title", "javascript es6的map映射");
page_info.set("author", "80sz.com");
console.log( mapToJson(page_info));   // {"title":"javascript es6的map映射","author":"80sz.com"}