类型“unknown”上不存在属性“foreach”_JavaScript红宝书第四版精简解析系列--映射Map数据类型...
Map数据类型
顾名思义
也就是映射类型,包含一个[[Entries]]私有特性
我们可以使用一个二维数组作为初始值
const map1 = new Map([[1, 1],[2, 2],[3, 3],]);
console.log("Map数据类型====>", map1);
当然也可以使用迭代器进行初始化
const map2 = new Map({[Symbol.iterator]: function* () {yield* [[1, 1],[2, 2],[3, 3],];},});console.log("Map数据类型====>", map2);
我们来看一下Map数据类型内部结构(着重看下私有特性)
我们可以看到,Map数据类型包含了一个[[Entries]]私有特性
这个特性中可以看到一个清晰的映射关系
而在Map数据类型的原型上还挂在了很多方法
诸如 get set delete clear等操作方法
还有一个关于size属性的get访问器特性
另外,我们还可以清晰地看到
Map数据类型包含着迭代器属性,且迭代方法默认为entries()
我们首先来学习一下关于Map的操作方法
.set()
const emptyMap = new Map();console.log("emptyMap====>", emptyMap);emptyMap.set('name', 'shang')console.log("set结果====>", emptyMap);
由于set方法会返回被操作的Map数据,所以可以链式调用
emptyMap.set("gender", "male").set("age", 17);console.log("set结果====>", emptyMap);
.get()
console.log('get方法====>', emptyMap.get('name')
.has()
console.log('has方法====>', emptyMap.has('name'))
.delete()
emptyMap.delete('name')
console.log("delete结果====>", emptyMap);
.clear()
emptyMap.clear()console.log("emptyMap的size====>", emptyMap.size);
Map数据类型可以接受各种类型的作为键
这里我们测试一下,function, Symbol 以及Object类型
const functionKey = function() {};const symbolKey = Symbol()const objectKey = new Object()emptyMap.set(functionKey, functionKey).set(symbolKey, symbolKey).set(objectKey, objectKey)console.log('各种特殊键值对===>', emptyMap)
复杂类型作为键值时,Map类型并不保存快照,而是保存指针
这句话听起来挺唬人
but其实理解起来很简单
我举个例子
const emptyArr = [];
const emptyObj = {};
emptyMap.set(emptyArr, emptyObj);
emptyArr.push("1");
emptyObj.name = "shang";
console.log("复杂类型特殊键值对===>", emptyMap);
console.log("复杂类型特殊值===>", emptyMap.get(emptyArr));
顺序维护和迭代方法
Map会自动维护关于元素的顺序
而且从上面Map数据类型原型链我们可以得知
Map数据类型包含一个默认方法为entries的迭代器
console.log('Map数据类型默认迭代器', emptyMap.entries === emptyMap[Symbol.iterator])
forof
for (const [key, value] of emptyMap) {console.log("forof映射元素分别为===>", key, value);
}
拓展运算符
console.log("拓展运算符用于Map数据类型", [...emptyMap]);
forEach方法
emptyMap.forEach((value, key) => {console.log("forEach映射元素分别为===>", key, value);
});
Map关于forEach的迭代效果与数组类似,value在前,key在后
Map使用values & keys 返回映射的迭代器
keys返回映射关于key的迭代器
可以用于forof 拓展运算符 Map Set等等
// Map使用values & keys 返回映射的迭代器
const keysIterator = emptyMap.keys();
console.log("Map的keys的迭代器===>", keysIterator);
for (const iterator of keysIterator) {console.log("keysIterator===>", iterator);
}
values返回映射关于value的迭代器
可以用于forof 拓展运算符 Map Set等等
const valuesIterator = emptyMap.values();
console.log("Map的values的迭代器===>", valuesIterator);
for (const iterator of valuesIterator) {console.log("valuesIterator===>", iterator);
}
Map相较于Object有何优缺点???
数据类型 | 占用内存 | 插入数据 | 删除数据 | 查数据 |
---|---|---|---|---|
Map | 同等数据量比Object少占50%内存 | 插入更快,更省性能 | 删除更快,更省性能 | × |
Object | × | × | × | 有线性优化,查找更快,数据量越大查找优势越明显 |
类型“unknown”上不存在属性“foreach”_JavaScript红宝书第四版精简解析系列--映射Map数据类型...相关推荐
- 类型 never 上不存在属性
场景 function testComponent {const ref = useRef(null);.....ref.current.<method>(); // 此处报错return ...
- angular踩坑:类型“HTMLElement”上不存在属性“selectedIndex”。ts(2339)
原文链接:https://www.longkui.site/program/frontend/angular-htmlelement/4934/ 0.背景 报错如下: 类型"HTMLElem ...
- Mac上构建OpenGL红宝书上的triangles程序
最近查考的资源较多,列几个主要出处: 参考:stackoverflow上的问答 参考:opengl/glut官网文档 参考:github上的源码 参考:apple上对opengl支持的介绍 (Owed ...
- javascript 高级程序设计_JavaScript 经典「红宝书」,几代前端人的入门选择
人的一生中总要读几本经典书,在这个"经典"泛滥的年代,什么才是权威的代表,我想大概是一本的书的口碑,能积累下上佳口碑的书,往往也是能经得住时间推敲的.比如这本: 相信许多前端开发者 ...
- 市面上仅此一本的 App 安全“红宝书”,终于来了!
2014 年初,移动互联网产业快速发展,App 井喷式爆发,绝大多数使用的是 Android 系统.但是那时候大多数的开发者没有做好 App 的安全防护措施,面对移动互联网黑灰产的攻击,App 基本上 ...
- Mac上OpenGL红宝书例程环境适配
参考:OpenGL编程指南第8版(红宝书) 参考:https://github.com/badousuan/openGLredBook9th (Owed by: 春夜喜雨 http://blog.cs ...
- Angular5 Angular6类型“ObservableResponse”上不存在属性“map”
Angular5: 类型"Observable<Response>"上不存在属性"map", 引入: import 'rxjs/add/operat ...
- 一起读JavaScript红宝书 —— 02语法基础(上)
JavaScript高级程序设计读书笔记,前端神作不容错过.原书近100万字,内容太多,故作笔记尽量在不缩减内容的情况下缩减字数,方便复习和回顾. 语法基础(上) 1. 语法 2. 关键字和保留字 3 ...
- ts给Number类型数据添加自定义方法报错:类型“Number”上不存在属性“divideStr”的解决方案
问题:直接添加方法报错. // 切割字符串或数字,将10000000转换成10,000,000的格式 String.prototype.divideStr = Number.prototype.div ...
最新文章
- 测序发展史,150年的风雨历程 (第二版)
- awk截取字符命令_Linux运维基础技能: 脚本编程与Linux命令
- Oracle专家调优秘密
- 微服务之旅:从 Netflix OSS 到 Istio Service Mesh
- 【数据挖掘】贝叶斯公式应用 拼写纠正示例分析 ( 先验概率 | 似然概率 | 后验概率 )
- ubuntu服务器php7.2启用mysqli(不用reboot超简单)
- iOS 限制输入字数完美解决方案
- OJ 169 Majority Element
- 地球不是圆的,别让教科书限制了孩子的想象力!
- uva 10037——Bridge
- oracle之单行函数2
- (06)Vivado约束基础
- 安装qt5后编译运行后有关Qt at-spi的警告
- 论文笔记-深度估计(1)Depth Map Prediction from a Single Image using a Multi-Scale Deep Network
- 3.15PMP试题每日一题
- (转)中国大学改名大全2007最新版(笑掉大牙)
- 【数据结构】栈和队列的异同
- Linux学习笔记11
- 螺旋图形Linux,一个实例带你熟练使用UG中的螺旋线,新手必备!
- python网络爬虫从入门到实践 第5章 (一)
热门文章
- 数据 正则化 python_python3.6怎么单独正则化/标准化DataFrame中的指定列数据
- php json获取get请求,PHP简单的Curl的Get请求和Curl的Post请求和file_get_contents的Get请求获取接口JSON数据...
- qt下实现文件的拖拽打开
- Python locals 函数 - Python零基础入门教程
- Python map 函数 -Python零基础入门教程
- java当中有关循环的代码_有关Java循环的内容,编程中还是比较常用的,下面分享给大家几个循环的示例代码,练习一下。1、循环输出1到100之间所有能被3或能被4整除的数。pack...
- 投后管理岗面试_2020天津水务招79人,管理岗+操作岗,专科起报
- python boxplot orient_Python 可视化 | Seaborn5 分钟入门 (三)——boxplot 和 violinplot
- .net mysql 类库_(精华)2020年6月27日 C#类库 MySqlHelper(Ado.net数据库封装)
- android l 电池,DIY新技能--M1L换电池