ES6 学习笔记(十)Map的基本用法
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的基本用法的更多相关文章
- ES6学习笔记之map、set与数组、对象的对比
ES6 ES5中的数据结构,主要是用Array和Object.在ES6中主要新增了Set和Map数据结构.到目前为止,常用的数据结构有四种Array.Object.Set.Map.下面话不多说了,来一 ...
- Mybatis-Plus 实战完整学习笔记(十)------条件构造器核心用法大全(下)
31.升序orderByAsc 31.升序orderByAsc List<Employee> employeeList = employeeMapper.selectList(new Qu ...
- ES6学习笔记十:模块的导入、导出
一:模块导入 1) import { 要导入的属性.方法民 } from '模块路径'; 2)该种方法需要有配置文件,指明模块所在路径 import { 要导入的属性.方法民 } from '模块名' ...
- JS&ES6学习笔记(持续更新)
ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...
- ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
- ES6学习笔记<三> 生成器函数与yield
为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- ES6学习笔记<一> let const class extends super
学习参考地址1 学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...
- Go语言学习笔记十二: 范围(Range)
Go语言学习笔记十二: 范围(Range) rang这个关键字主要用来遍历数组,切片,通道或Map.在数组和切片中返回索引值,在Map中返回key. 这个特别像python的方式.不过写法上比较怪异使 ...
- ES6学习笔记之块级作用域
ES6学习笔记:块级作用域 作用域分类 全局作用域 局部作用域 块级作用域 全局作用域示例 var i=2; for (var i = 0; i < 10; i++) { } console.l ...
随机推荐
- screen -中断保留-屏幕同步
工作中经常用到 screen 用处: 中断保留 和屏幕同步. yum install screen screen -S name 创建 -ls 查看 -r 恢复 -x 同屏
- 有一个线性表,采用带头结点的单链表L来存储,设计一个算法将其逆置,且不能建立新节点,只能通过表中已有的节点的重新组合来完成。
有一个线性表,采用带头结点的单链表L来存储,设计一个算法将其逆置,且不能建立新节点,只能通过表中已有的节点的重新组合来完成. 分析:线性表中关于逆序的问题,就是用建立链表的头插法.而本题要求不能建立新 ...
- html、css实现导航栏5种常用下拉效果
实现的效果:鼠标移入按钮时按钮中的内容就会出现,分别展示不同的出现效果.效果难点:不使用JavaScript,那这个效果的难点就是在于:hover伪类的掌控,以及考验对html的结构掌握. 1. ht ...
- 简单的java代码审计
描述 很简单的代码审计 java安全--Fastjson反序列化 java安全--SQL注入 Fastjson 反序列化 首先看一下配置文件,对于Maven项目,我们首先从pom.xml文件开始审计引 ...
- good thing
- 实时降噪(Real-time Denoising):Nvidia Real-time Denoisers 源码剖析
目录 Nvidia Real-time Denoisers(NRD) v3.x ReBLUR 前置知识 空间滤波(Spatial Filtering):Diffuse & Specular 泊 ...
- Javascript实现base64的加密解密方法
1 function Base64() { 2 // private property 3 _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijkl ...
- 延宕执行,妙用无穷,Go lang1.18入门精炼教程,由白丁入鸿儒,Golang中defer关键字延迟调用机制使用EP17
先行定义,延后执行.不得不佩服Go lang设计者天才的设计,事实上,defer关键字就相当于Python中的try{ ...}except{ ...}finally{...}结构设计中的finall ...
- windows清理必看
清理缓存 代码如下 介绍此文件夹都是缓存文件全选删除即可 ctrl+A全选shift+del强制删除(不会添加到回收站) %temp% 找到C盘右击属性选择想要删除的文件进行清理即可 清理完点击清理系 ...
- 我的Vue之旅、02 ES6基础、模块、路径、IO
自定义模块 为什么要模块?模块化源代码能给我们带来什么好处? 试想一个巨无霸网购平台,在没有模块化的情况下,如果出现bug,程序员就要在几百万行代码里调试,导致后期维护成本上升,为了解决问题,模块化按 ...