映射（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": "infoq、Map", "description":"Map对象是一种简单的键/值映射，其中的键和值可以是任意值（原始值或对象的值）"})page_info.set("title", "javascript es6的map映射")console.log(page_info) console.log(typeof page_info) // object
复制代码
输出结果为：
Map { 'seo' => { keywords: 'infoq、Map', description: 'Map对象是一种简单的键/值映射，其中的键和值可以是任意值（原始值或对象的值）' }, 'title' => 'javascript es6的map映射'}object
复制代码
从输出结果看，本质上 Map（映射）就是一个object对象。
Object与Map区别
Object和Map的相似之处在于，都是按键存取一个值，而且键都是可以删除的。可以看出，二者之间是非常相似的，它的不同这之处在于：
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": "infoq、Map", "description":"Map对象是一种简单的键/值映射，其中的键和值可以是任意值（原始值或对象的值）"});console.log(page_info);page_info.set("seo", "seo信息");console.log(page_info);
复制代码
上面的示例增加值，并修改值。
Map { 'seo' => { keywords: 'infoq、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", "infoq");console.log(page_info); // Map { 'title' => 'javascript es6的map映射', 'author' => 'infoq' }
const deleted_author = page_info.delete("author");const deleted_seo = page_info.delete("seo");console.log(deleted_author); // trueconsole.log(deleted_seo); // falseconsole.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")); // trueconsole.log(page_info.has("seo")); // false
复制代码
获取所有键值values()
const page_info = new Map();page_info.set("title", "javascript es6的map映射");page_info.set("author", "infoq");console.log(page_info.values()); // [Map Iterator] { 'javascript es6的map映射', 'infoq' }
复制代码
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", "infoq");console.log(page_info.entries());
复制代码
输出的结果为：
[Map Entries] { [ 'title', 'javascript es6的map映射' ], [ 'author', 'infoq' ]}
复制代码
遍历所有键值forEach(callback)
const page_info = new Map();page_info.set("title", "javascript es6的map映射");page_info.set("author", "infoq");page_info.forEach((value,key)=>{ console.log(key,value);});
复制代码
输出的结果为：
title javascript es6的map映射author infoq
复制代码
清空 Map 映射所有键值clear()
使用map.clear()清空 Map 所有的键值对。
const page_info = new Map();page_info.set("title", "javascript es6的map映射");page_info.set("author", "infoq");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", "infoq");console.log([...page_info]); // [ [ 'title', 'javascript es6的map映射' ], [ 'author', 'infoq' ] ]
复制代码
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", "infoq");
console.log( mapToObj(page_info));
复制代码
输出结果为：
[Object: null prototype] { title: 'javascript es6的map映射', author: 'infoq'}
复制代码
数组转为 Map 映射
将数组传入 Map 构造函数即可，即new Map(array)。
const page_info = [ ["title","javascript es6的map映射"], ["author","infoq"]];console.log(new Map(page_info)); // Map { 'title' => 'javascript es6的map映射', 'author' => 'infoq' }
复制代码
对象转为 Map
对象转为 Map 映射通过Object.entries()。
const page_info = { title:"javascript es6的map映射", author:"infoq"};console.log(new Map(Object.entries(page_info))); // Map { 'title' => 'javascript es6的map映射', 'author' => 'infoq' }
复制代码
映射 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", "infoq");console.log( mapToJson(page_info)); // {"title":"javascript es6的map映射","author":"infoq"}
复制代码
评论 (1 条评论)