案头见蠹鱼，犹胜凡俦侣。这篇文章主要讲述悟透前端 | ECMAScript 6 的 Map 映射相关的知识，希望能为你提供帮助。
文章图片
什么是映射
javascript 的对象（Object），本质上是键值对的集合（Hash结构），但是传统上只能用字符串当作键，这给使用带来了很大的限制。为了解决这个问题，ECMAScript 6 引入了 Map 数据结构。它类似于对象，也是键值对的集合，但是"
键"
的范围不仅仅局限于字符串，而是各种类型的值（包括对象）都可以当作键。也就是说，Object 结构（对象结构）提供了"
字符串—值"
的对应，而 Map 结构提供了"
值—值"
的对应，是一种更完善的 Hash 结构的实现。下面来看一个简单的示例，了解Map的基本用法：
// 声明map实例
const page_info = new Map()
// 向 map 中添加元素
page_info.set("seo", {
"keywords": "devpoint、Map",
"description":"Map对象是一种简单的键/值映射，其中的键和值可以是任意值（原始值或对象的值）"
})
page_info.set("title", "javascript es6的map映射")
console.log(page_info)
console.log(typeof page_info) // object输出结果为：
Map {
seo =>
{
keywords: devpoint、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": "devpoint、Map",
"description":"Map对象是一种简单的键/值映射，其中的键和值可以是任意值（原始值或对象的值）"
});
console.log(page_info);
page_info.set("seo", "seo信息");
console.log(page_info);
上面的示例增加值，并修改值。
Map {
seo =>
{
keywords: devpoint、Map,
description: Map对象是一种简单的键/值映射，其中的键和值可以是任意值（原始值或对象的值）
}
}
Map { seo =>
seo信息 }获取键值get使用
get(key) 获取键值，如果获取的 key-&
gt;
value 不存则返回 undefinedconst 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", "devpoint");
console.log(page_info);
// Map { title =>
javascript es6的map映射, author =>
devpoint }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", "devpoint");
console.log(page_info.values());
// [Map Iterator] { javascript es6的map映射, devpoint }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", "devpoint");
console.log(page_info.entries());
输出的结果为：
[Map Entries] {
[ title, javascript es6的map映射 ],
[ author, devpoint ]
}遍历所有键值
forEach(callback)
const page_info = new Map();
page_info.set("title", "javascript es6的map映射");
page_info.set("author", "devpoint");
page_info.forEach((value,key)=>
{
console.log(key,value);
});
输出的结果为：
title javascript es6的map映射
author devpoint清空Map映射所有键值
clear()使用 map.clear() 清空Map所有的键值对。const page_info = new Map();
page_info.set("title", "javascript es6的map映射");
page_info.set("author", "devpoint");
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", "devpoint");
console.log([...page_info]);
// [ [ title, javascript es6的map映射 ], [ author, devpoint ] ]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", "devpoint");
console.log( mapToObj(page_info));
输出结果为：
[Object: null prototype] {
title: javascript es6的map映射,
author: devpoint
}数组转为Map映射将数组传入 Map 构造函数即可，即
new Map(array)。const page_info = [
["title","javascript es6的map映射"],
["author","devpoint"]
];
console.log(new Map(page_info));
// Map { title =>
javascript es6的map映射, author =>
devpoint }对象转为Map对象转为Map映射通过
Object.entries()。const page_info = {
title:"javascript es6的map映射",
author:"devpoint"
};
console.log(new Map(Object.entries(page_info)));
// Map { title =>
javascript es6的map映射, author =>
devpoint }映射Map转为JSON【悟透前端 | ECMAScript 6 的 Map 映射】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", "devpoint");
console.log( mapToJson(page_info));
// {"title":"javascript es6的map映射","author":"devpoint"}完
推荐阅读
- 玩转MapStruct,手把手带你学会！
- UI 自动化找元素太难（AIRtest 框架你值得拥有！）
- 学习Java必备的基础知识06，要想学好必须扎实基本功（?建议收藏）#yyds干货盘点#
- PyTorch教程 参数访问#yyds干货盘点#
- Linux中的DHCP网址重分配
- Prometheus监控运维实战十八（ Alertmanager集群）
- 实验（linux搭建FTP服务器）
- [Flutter]专题Flutter 中的 AppBar详解#yyds干货盘点#
- 码云出现错误git@gitee.com: Permission denied (publickey). fatal: Could not read from remote repository.P