当前位置: 首页 > news >正文

ES6 Map数据结构

1.Map是什么?

ES6 提供的另一种新的引用类型的数据结构 它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键)

以前引用类型中的对象也是键值对的集合 但是键限于字符串

总结起来就是:

  • Object 结构提供了“字符串—值”的对应,
  • Map 结构提供了“值—值”的对应,是一种更完善的 “键值对” 结构实现。
  • 如果你需要“键值对”的数据结构,Map 比 Object 更合适
  • 对象作为键,会隐式的调用toString()方法,从而导致后一个覆盖前一个键
  • 接受数组作为参数,该数组必须表示键值对的数组
  • Map传址,所以对象作为键名时传输的是地址,相同{},{}形式最为键,值不相等
  • Map接受数组作为参数的本质是通过forEach()循环,然后循环体内使用解构赋值items.forEach(([key, value],index) => map.set(key,value))
  • Map自带方法keys(),values(),entries(),forEach()等
  • Map参数的扩展:只要是具有 Iterator 接口且成员为键值对都可以作为Map的参数

2.怎么声明Map数据结构及Map的方法:set(), get(), has(), delete()

        const m = new Map();const o = { p: 'Hello World' };m.set(o, 'content')console.log( m.get(o) ); //"content"console.log( m.has(o) );// trueconsole.log( m.delete(o) );// trueconsole.log( m.has(o) );// false

3.证明是引用类型数据 instanceof 、Object.prototype.toString().call()

为什么instanceof可以判断对象或数组?

https://blog.csdn.net/qq_34569497/article/details/133889333

let res = map instanceof Map
let resMap = Object.prototype.toString.call(map)
console.log(res); // true
console.log(resMap); // [object Map]

4.Map和对象的区别:对象作为键,会隐式的调用toString()方法,从而导致后一个覆盖前一个键

对象作为键,会隐式的调用toString()方法,从而导致后一个覆盖前一个键

        let o1 = { a: 1 }let o2 = { b: 1 }let o3 = {}o3[o1] = 1o3[o2] = 2console.log(o3) // [object Object]: 2Object.keys(o3).map((v, i) => {console.log(v); // [object Object]console.log(i); // 0console.log(typeof v); // string})

Map就不存在覆盖: 

        let o1 = { a: 1 }let o2 = { b: 1 }let o3 = new Map()o3.set(o1, '123')o3.set(o2, '234')console.log(o3);console.log(o3.get(o1));console.log(o3.get(o2));

5.接受数组作为参数——该数组必须是表示键值对的数组

作为构造函数,Map 也可以接受一个数组作为参数。注意该数组的成员是一个个表示键值对的数组。

const map = new Map([['name', '张三'],['title', 'Author']
]);
map.get('name') // "张三"
map.get('title') // "Author"

6.Map传址特点--对象作为键名时,传输的是地址,所以下例中的两个{x:1}虽然长相一样,但实际值不同(存储在堆内存的两个位置)

对象作为键名时,传输的是地址,所以下例中的两个 {name:'曹操'} 虽然长相一样,但实际值不同(存储在堆内存的两个位置)

const map = new Map([['name', '张三'],['title', 'Author'],[{name:'曹操'},'枭雄']
]);
map.get('name') // "张三"
map.get('title') // "Author"
map.get({name:'曹操'});//返回undefined。为什么?因为应用数据类型比较的是地址 {name:'曹操'} !=={name:'曹操'}。

想要obj最为key并且可以获取值,必须以下面形式才行:

let obj = {name:'曹操'};
const map = new Map([obj,'枭雄']);
map.get(obj);//'枭雄'

7.Map构造函数接受数组作为参数的本质,内部机制使用forEach进行遍历

内部机制:

  • 通过items通过forEach()进行遍历 ,items.forEach(([key, value],index) => map.set(key,value))
  • 并且使用到数组解构的模式匹配
const items = [['name', '张三'],['title', 'Author']
];
const map = new Map();
items.forEach(([key, value],index) => map.set(key,value))

8.Map自带的一些方法 keys() values() entries()

9.Map参数的扩展

任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构 都可以当作Map构造函数的参数

const set = new Set([['foo', 1],['bar', 2]
]);
const m1 = new Map(set);
m1.get('foo') // 1
const m2 = new Map([['baz', 3]]);
const m3 = new Map(m2);
m3.get('baz') // 3

http://www.lryc.cn/news/196001.html

相关文章:

  • 网页数据采集HTTP Get,Post登录提交数据--VBS之Microsoft.XMLHTTP对象
  • 强化科技创新“辐射力”,中国移动的数智化大棋局
  • 喜报 | 擎创科技实力亮相2023科创会并荣获科技创新奖
  • vue3学习(九)--- keep-alive缓存组件
  • 用servlet实现一个简单的猜数字游戏。
  • 前端取消请求
  • 关于6轴球腕机械臂的肩部奇异描述纠正
  • Python —— hou.Node class
  • MATLAB——RBF、GRNN和PNN神经网络案例参考程序
  • E138: Can‘t write viminfo file
  • Compose Canvas基础(2) 图形转换
  • 【计算机网络笔记】分组交换中的报文交付时间计算例题
  • JVS-rules规则引擎,解决大数据风控的自动化决策利器
  • dvaJs在react 项目中的简单使用
  • 如何将las数据转换为osgb数据?
  • 创新与重塑,佛塑科技打造集团型 CRM 建设标杆
  • STM32CUBEMX_DMA串口空闲中断接收+接收发送缓冲区
  • 酸蚀刻对钛医药材料纳米形态表面特性及活化能的影响
  • iOS代码混淆工具推荐:IPA Guard详细介绍
  • Vue检测数据的原理
  • 队列的运行算法
  • KVM/qemu安装UOS 直接让输入用户密码
  • 画一条0.5px的线、设置小于12px的字体、解决 1px 问题
  • Unity中Shader的深度写入ZWrite
  • Jetson nano 系列之7—jetson 通过rtp将视频发给远程host
  • 有哪些值得推荐的优秀 HTMLCSS 网站前端设计的网络资源(博客、论坛)?
  • RTSP/Onvif安防视频平台EasyNVR级联至EasyNVS系统不显示通道,是什么原因?
  • 点云处理【三】(点云降采样)
  • GB/T 41510-2022 起重机械安全评估规范 通用要求 摘要
  • 【vr】【unity】白马VR课堂系列-VR开发核心基础05-主体设置-手柄对象的引入和设置