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

JavaScript高级程序设计读书分享之6章——MapSet

JavaScript高级程序设计(第4版)读书分享笔记记录

适用于刚入门前端的同志

 Map

        作为 ECMAScript 6 的新增特性,Map 是一种新的集合类型,为这门语言带来了真正的键/值存储机制。Map 的大多数特性都可以通过 Object 类型实现,但二者之间还是存在一些细微的差异。

  • 使用 new 关键字和 Map 构造函数可以创建一个空映射:
const m = new Map()

使用嵌套数组初始化映射 

// 使用嵌套数组初始化映射const m1 = new Map([ ["key1", "val1"], ["key2", "val2"], ["key3", "val3"] ]);
  • 方法:set()、get()、has()、delete()、clear()

  • set()方法返回映射实例,因此可以把多个操作连缀起来
  • 属性:size
const m = new Map()m.set('age',18)//has()方法,如果存在键值就返回发生true,不存在就返回false
console.log( m.has('firstName') )  //false
console.log( m.has('age') ) // true//get()方法,如果存在键值就返回键对应的值,不存在就返回undefined
console.log( m.get('firstName') ) //undefained
console.log( m.get('age') ) //18//set()方法可以链式操作,set(键,值)
m.set("firstName", "Matt").set("lastName", "Frisbie")//size属性
console.log(m.size) // 3//delete()方法,删除某个键值对
m.delete('age')
console.log( m.has('age') ) // false
console.log(m.size) // 2//clear()方法,清空对象
m.clear()
console.log(m.size) // 0
  • Object 只能使用数值、字符串或符号作为键不同,Map 可以使用任何 JavaScript 数据类型作为
const m = new Map(); const functionKey = function() {}; 
const symbolKey = Symbol(); 
const objectKey = new Object(); m.set(functionKey, "functionValue"); 
m.set(symbolKey, "symbolValue"); 
m.set(objectKey, "objectValue"); alert(m.get(functionKey)); // functionValue 
alert(m.get(symbolKey)); // symbolValue 
alert(m.get(objectKey)); // objectValue
  • 顺序与迭代

通过 entries()方法(或者 Symbol.iterator 属性,它引用 entries())取得这个迭代器
const m = new Map([ ["key1", "val1"], ["key2", "val2"], ["key3", "val3"] 
]); alert(m.entries === m[Symbol.iterator]); // true for (let pair of m.entries()) { alert(pair); 
} 
// [key1,val1] 
// [key2,val2] 
// [key3,val3] for (let pair of m[Symbol.iterator]()) { alert(pair); 
} 
// [key1,val1] 
// [key2,val2] 
// [key3,val3]
keys()values()分别返回以插入顺序生成键和值的迭代器:
const m = new Map([ ["key1", "val1"], ["key2", "val2"], ["key3", "val3"] 
]); for (let key of m.keys()) { console.log(key); 
} 
// key1 
// key2 
// key3 for (let key of m.values()) { console.log(key); 
} 
// value1 
// value2 
// value3

Objec和Map的比较

  • 内存占用
        Object 和 Map 的工程级实现在不同浏览器间存在明显差异,但存储单个键/值对所占用的内存数量都会随键的数量线性增加。但给定固定大小的内存,Map 大约可以比 Object 多存储 50%的键/值对。
  • 插入性能
        Object 和 Map 中插入新键/值对的消耗大致相当,不过插入 Map 在所有浏览器中一般会稍微快 一点儿如果代码涉及大量插入操作,那么显然 Map 的性能更佳
  • 查找速度
        与插入不同,从大型 Object Map 中查找键/值对的性能差异极小,但如果只包含少量键/值对,则 Object 有时候速度更快
  • 删除性能
如果代码涉及大量删除操作,那么毫无疑问应该选择 Map

Set

        ECMAScript 6 新增的 Set 是一种新集合类型,为这门语言带来集合数据结构。Set 在很多方面都像是加强的 Map,这是因为它们的大多数 API 和行为都是共有的。
使用 new 关键字和 Set 构造函数可以创建一个空集合:
const m = new Set();
使用数组初始化集合
// 使用数组初始化集合 
const s1 = new Set(["val1", "val2", "val3"]);

 方法属性

方法: add()、has()、delete()、clear()

属性:size

const s = new Set();s.add('Tom')//has()  
console.log(s.has('Jerry')) //false
console.log(s.has('Tom')) //true//size
console.log(s.size) // 1//add()
s.add('Jerry').add('Mary')
console.log(s.size) // 3//delete()
s.delete('Tom') 
console.log(s.size) // 2//clear()
s.clear()
console.log(s.size) // 0

顺序与迭代

调用的迭代方法与map一致
const s = new Set(["val1", "val2", "val3"]); 
for (let pair of s.entries()) { console.log(pair); 
} 
// ["val1", "val1"] 
// ["val2", "val2"] 
// ["val3", "val3"]

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

相关文章:

  • 改进的 A*算法的路径规划(路径规划+代码+毕业设计)
  • Tina_Linux存储性能参考指南
  • NCRE计算机等级考试Python真题(四)
  • LeetCode每周刷题总结2.20-2.26
  • u盘里删除的文件可以恢复吗?分享解决方法
  • 十、vben框架如何使用table来写报表
  • jQuery:入门
  • 实例3:树莓派呼吸灯
  • android适配ipv6,请求慢?
  • 【LeetCode】剑指 Offer(10)
  • 学校AI视频行为分析监测系统 opencv
  • 内存数据库的设计与实现(已在大型项目中应用)
  • Linux基础命令-stat显示文件的状态信息
  • SQL入门DEMO
  • 辉光管时钟学习制作及开源软硬件工程
  • 动手学深度学习(第二版)学习笔记 第三章
  • 冯诺依曼体系结构与操作系统的概念及理解
  • 【深度探讨】如何利用区块链改善公共服务
  • 【打卡】图分析与节点嵌入
  • python元编程详解
  • 为什么文档对 SaaS 公司至关重要?
  • Echarts 实现电池效果的柱状图
  • 计算机网络高频知识点(一)
  • JavaScript split()方法
  • 前端面试题 —— 性能优化
  • 我的周刊(第080期)
  • 操作系统——7.进程的定义,组成,组成方式和特征
  • CRI-O, Containerd, Docker, Postman等概念介绍
  • 【原创】java+swing+mysql设备预约管理系统设计与实现
  • 7、kubernetes(k8s)Dashboard 安装