1 基本用法

Map类型是键值对的有序列表,而键和值都可以是任意类型。可以看做Python中的字典(Dictionary)类型。

1.1 创建方法

Map本身是一个构造函数,用来生成Map实例,如:

let m1 = new Map()

1.2 初始化

Map构造函数可以接收一个数组作为参数,该数组的成员可以是一组表示键值对的数组。也可以是任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构。如:

let map = new Map([
['name', 'zhang'],
['title', 'Author']
])

1.3 常见方法

方法 描述
set(key, value) 用于设置(添加)键值对
get(key) 通过key获取对应值
delete(value) 删除值,返回一个布尔值,表示删除是否成功
has(value) 返回一个布尔值,表示该值是否是Set实例的成员
clear() 清除所有成员,没有返回值
size 返回成员个数

相同的key不能添加,现有的value会被替换成新的value值

let m = new Map()
let o = { p: 'Hello World' }
m.set(o, 'content')
console.log(m.size); // 1
console.log(m.get(o)); // content
console.log(m.has(o)); // true
console.log(m.delete(o)); // true
console.log(m.has(o)); // false
console.log(m.clear(o)); // undefind let m2 = new Map()
let o2 = { p: 'Hello World' }
let o3 = { q: 'JavaScript' }
m2.set(o2, 'content')
m2.set(o3, 'content2')
console.log(m2.size); // 2
let map = new Map([
['name', 'zhang'],
['title', 'Author']
])
console.log(map.size); // 2
console.log(map.has('name')); // true
console.log(map.get('name')); // zhang
console.log(map.has('title'));// true
console.log(map.get('title'));// Author

1.4 需要注意的地方

1、只有对同一个对象的引用,Map才认为是同一个键。Map的键实际上是和内存地址绑定的,只要内存地址不一样,就是为两个键。

const mm = new Map()
mm.set(['a'], 5)
// 把数组对象的引用传进去了,两者并不相等
// 不要把对象直接传进去,不然拿不到
// ['a'] == ['a'] // false
console.log(mm.get(['a'])); // undefined const k1 = {}
const k2 = {}
// 为了稳定key值保存的对象的引用保持不变,所以用const
mm.set(k1, 100)
mm.set(k2, 200)
console.log(mm.get(k1), mm.get(k2));// 100 200

2、如果Map的key是一个简单类型的值,如数值,字符串,布尔值。只要两个值严格相等,map就认为是同一个key。

const mm = new Map()
mm.set(-0, 123)
console.log(mm.get(+0)); // 123
console.log(mm.get(-0)); // 123 mm.set(true, 1)
// mm.set(true,111)
mm.set("true", 2)
console.log(mm.get(true)); // 1
console.log(mm.get("true")); // 2 mm.set(undefined, 3)
mm.set(undefined, 333)
mm.set(null, 4)
console.log(mm.get(undefined)); // 333
console.log(mm.get(null)); // 4 mm.set(NaN, 111)
console.log(mm.get(NaN)); // 111

2 其它方法

2.1 遍历方法

Map的遍历与Set类似,前三个是三个遍历器的生成函数,后面那个是遍历方法。

方法 描述
keys() 返回键名的遍历器
values() 返回键值的遍历器
entries() 返回键值对的遍历器
forEach() 使用回调函数遍历每个成员,没有返回值

Map 结构的默认遍历器接口(Symbol.iterator属性),就是entries方法

let m1 = new Map()
m1.set("a", 100).set("b", 200).set("c", 300)
console.log(m1);
console.log(m1.keys());
console.log(m1.values());
console.log(m1.entries());
console.log(Object.keys(m1));

输出结果:
Map(3) { 'a' => 100, 'b' => 200, 'c' => 300 }
[Map Iterator] { 'a', 'b', 'c' }
[Map Iterator] { 100, 200, 300 }
[Map Entries] { [ 'a', 100 ], [ 'b', 200 ], [ 'c', 300 ] }
[]

2.2 Map的map( )、filter( )的使用

与Set类似,Map也可以利用扩展运算符转换为数组,从而利用map( ),filter( )等方法,如:

const map0 = new Map().set(1, 'a').set(2, 'b').set(3, 'c')
console.log(map0);
const map1 = new Map([...map0].filter(([k, v]) => k < 3))
console.log(map1);
const map2 = new Map([...map0].map(([k, v]) => [k * 2, "_" + v]))
console.log(map2);

运行结果:
Map(3) { 1 => 'a', 2 => 'b', 3 => 'c' }
Map(2) { 1 => 'a', 2 => 'b' }
Map(3) { 2 => '_a', 4 => '_b', 6 => '_c' }

2.3 Map和其它数据结构的相互转换

2.3.1 Map转换为数组

function mapToArr(mymap) {
const arr = [...mymap]
return arr
}
const m1 = new Map().set('a', 1).set('b', 2).set('c', 3)
let arr = mapToArr(m1)
console.log(arr);

输出结果:
[ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

2.3.2 数组转换为Map

function arrToMap(arr) {
const mymap= new Map(arr)
return mymap
}
const arr = [["a", 1], ["b", 2], ["c", 3]]
const m1 = arrToMap(arr)
console.log(m1);

输出结果:
Map(3) { 'a' => 1, 'b' => 2, 'c' => 3 }

2.3.3 Map转换为对象

function mapToObj(mymap) {
let obj = Object.create(null) // 创建一个没有原型对象的顶级对象
for (let [k, v] of mymap) {
obj[k] = v
}
return obj
}
const m1 = new Map()
m1.set('a', 1).set('b', 2).set('c', 3)
let obj = mapToObj(m1)
console.log(obj);

输出结果:
{ a: 1, b: 2, c: 3 }

如果Map的所有键都是字符串,才可以转换为对象

2.3.4 对象转换为Map

function objToMap(obj) {
let mymap = new Map();
for (let k of Object.keys(obj)) {
mymap.set(k, obj[k]);
}
return mymap;
}
let m1 = objToMap({ a: 1, b: 2, c: 3 });
console.log(m1);

输出结果:
Map(3) { 'a' => 1, 'b' => 2, 'c' => 3 }

2.3.5 Map转换为JSON

Map的键名都是字符串,可以选择转换为对象JSON

function mapToStrJSON(mymap) {
//先将Map转换为对象,在通过对象生成JSON。
return JSON.stringify(mapToObj(mymap));
}
let m1 = new Map().set("a", 1).set("b", 2).set("c", 3);
let json1 = mapToStrJSON(m1);
console.log(json1);

输出结果:
{"a":1,"b":2,"c":3}

Map的键名有非字符串,可以转换为数组JSON

function mapToArrayJSON(mymap) {
return JSON.stringify([...mymap]);
}
let m1 = new Map().set(true, 1).set({ foo: 2 }, ["abcdef"]);
let json2 = mapToArrayJSON(m1);
console.log(json2);

输出结果:
[[true,1],[{"foo":2},["abcdef"]]]

2.3.6 JSON转换为Map

function jsonToMap(jsonStr) {
return objToMap(JSON.parse(jsonStr));
}
let m1 = jsonToMap('{ "a": 1, "b": 2, "c": 3 }');
console.log(m1);

输出结果:
Map(3) { 'a' => 1, 'b' => 2, 'c' => 3 }

ES6 学习笔记(十)Map的基本用法的更多相关文章

  1. ES6学习笔记之map、set与数组、对象的对比

    ES6 ES5中的数据结构,主要是用Array和Object.在ES6中主要新增了Set和Map数据结构.到目前为止,常用的数据结构有四种Array.Object.Set.Map.下面话不多说了,来一 ...

  2. Mybatis-Plus 实战完整学习笔记(十)------条件构造器核心用法大全(下)

    31.升序orderByAsc 31.升序orderByAsc List<Employee> employeeList = employeeMapper.selectList(new Qu ...

  3. ES6学习笔记十:模块的导入、导出

    一:模块导入 1) import { 要导入的属性.方法民 } from '模块路径'; 2)该种方法需要有配置文件,指明模块所在路径 import { 要导入的属性.方法民 } from '模块名' ...

  4. JS&ES6学习笔记(持续更新)

    ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...

  5. ES6学习笔记<五> Module的操作——import、export、as

    import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

  6. ES6学习笔记<三> 生成器函数与yield

    为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...

  7. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  8. ES6学习笔记<一> let const class extends super

    学习参考地址1  学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...

  9. Go语言学习笔记十二: 范围(Range)

    Go语言学习笔记十二: 范围(Range) rang这个关键字主要用来遍历数组,切片,通道或Map.在数组和切片中返回索引值,在Map中返回key. 这个特别像python的方式.不过写法上比较怪异使 ...

  10. ES6学习笔记之块级作用域

    ES6学习笔记:块级作用域 作用域分类 全局作用域 局部作用域 块级作用域 全局作用域示例 var i=2; for (var i = 0; i < 10; i++) { } console.l ...

随机推荐

  1. screen -中断保留-屏幕同步

    工作中经常用到 screen 用处: 中断保留 和屏幕同步. yum install screen screen -S name 创建 -ls 查看 -r 恢复 -x 同屏

  2. 有一个线性表,采用带头结点的单链表L来存储,设计一个算法将其逆置,且不能建立新节点,只能通过表中已有的节点的重新组合来完成。

    有一个线性表,采用带头结点的单链表L来存储,设计一个算法将其逆置,且不能建立新节点,只能通过表中已有的节点的重新组合来完成. 分析:线性表中关于逆序的问题,就是用建立链表的头插法.而本题要求不能建立新 ...

  3. html、css实现导航栏5种常用下拉效果

    实现的效果:鼠标移入按钮时按钮中的内容就会出现,分别展示不同的出现效果.效果难点:不使用JavaScript,那这个效果的难点就是在于:hover伪类的掌控,以及考验对html的结构掌握. 1. ht ...

  4. 简单的java代码审计

    描述 很简单的代码审计 java安全--Fastjson反序列化 java安全--SQL注入 Fastjson 反序列化 首先看一下配置文件,对于Maven项目,我们首先从pom.xml文件开始审计引 ...

  5. good thing

  6. 实时降噪(Real-time Denoising):Nvidia Real-time Denoisers 源码剖析

    目录 Nvidia Real-time Denoisers(NRD) v3.x ReBLUR 前置知识 空间滤波(Spatial Filtering):Diffuse & Specular 泊 ...

  7. Javascript实现base64的加密解密方法

    1 function Base64() { 2 // private property 3 _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijkl ...

  8. 延宕执行,妙用无穷,Go lang1.18入门精炼教程,由白丁入鸿儒,Golang中defer关键字延迟调用机制使用EP17

    先行定义,延后执行.不得不佩服Go lang设计者天才的设计,事实上,defer关键字就相当于Python中的try{ ...}except{ ...}finally{...}结构设计中的finall ...

  9. windows清理必看

    清理缓存 代码如下 介绍此文件夹都是缓存文件全选删除即可 ctrl+A全选shift+del强制删除(不会添加到回收站) %temp% 找到C盘右击属性选择想要删除的文件进行清理即可 清理完点击清理系 ...

  10. 我的Vue之旅、02 ES6基础、模块、路径、IO

    自定义模块 为什么要模块?模块化源代码能给我们带来什么好处? 试想一个巨无霸网购平台,在没有模块化的情况下,如果出现bug,程序员就要在几百万行代码里调试,导致后期维护成本上升,为了解决问题,模块化按 ...