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'))

通过has方法检验映射是否存在

.delete()

emptyMap.delete('name')
console.log("delete结果====>", emptyMap);

使用delete删除一个映射

.clear()

 emptyMap.clear()console.log("emptyMap的size====>", emptyMap.size);

clear后,所有映射关系都被清除了

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);
}

Map可以使用forof方法展开迭代

拓展运算符

console.log("拓展运算符用于Map数据类型", [...emptyMap]);

拓展运算符与forof公用迭代器

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数据类型...相关推荐

  1. 类型 never 上不存在属性

    场景 function testComponent {const ref = useRef(null);.....ref.current.<method>(); // 此处报错return ...

  2. angular踩坑:类型“HTMLElement”上不存在属性“selectedIndex”。ts(2339)

    原文链接:https://www.longkui.site/program/frontend/angular-htmlelement/4934/ 0.背景 报错如下: 类型"HTMLElem ...

  3. Mac上构建OpenGL红宝书上的triangles程序

    最近查考的资源较多,列几个主要出处: 参考:stackoverflow上的问答 参考:opengl/glut官网文档 参考:github上的源码 参考:apple上对opengl支持的介绍 (Owed ...

  4. javascript 高级程序设计_JavaScript 经典「红宝书」,几代前端人的入门选择

    人的一生中总要读几本经典书,在这个"经典"泛滥的年代,什么才是权威的代表,我想大概是一本的书的口碑,能积累下上佳口碑的书,往往也是能经得住时间推敲的.比如这本: 相信许多前端开发者 ...

  5. 市面上仅此一本的 App 安全“红宝书”,终于来了!

    2014 年初,移动互联网产业快速发展,App 井喷式爆发,绝大多数使用的是 Android 系统.但是那时候大多数的开发者没有做好 App 的安全防护措施,面对移动互联网黑灰产的攻击,App 基本上 ...

  6. Mac上OpenGL红宝书例程环境适配

    参考:OpenGL编程指南第8版(红宝书) 参考:https://github.com/badousuan/openGLredBook9th (Owed by: 春夜喜雨 http://blog.cs ...

  7. Angular5 Angular6类型“ObservableResponse”上不存在属性“map”

    Angular5: 类型"Observable<Response>"上不存在属性"map", 引入: import 'rxjs/add/operat ...

  8. 一起读JavaScript红宝书 —— 02语法基础(上)

    JavaScript高级程序设计读书笔记,前端神作不容错过.原书近100万字,内容太多,故作笔记尽量在不缩减内容的情况下缩减字数,方便复习和回顾. 语法基础(上) 1. 语法 2. 关键字和保留字 3 ...

  9. ts给Number类型数据添加自定义方法报错:类型“Number”上不存在属性“divideStr”的解决方案

    问题:直接添加方法报错. // 切割字符串或数字,将10000000转换成10,000,000的格式 String.prototype.divideStr = Number.prototype.div ...

最新文章

  1. 测序发展史,150年的风雨历程 (第二版)
  2. awk截取字符命令_Linux运维基础技能: 脚本编程与Linux命令
  3. Oracle专家调优秘密
  4. 微服务之旅:从 Netflix OSS 到 Istio Service Mesh
  5. 【数据挖掘】贝叶斯公式应用 拼写纠正示例分析 ( 先验概率 | 似然概率 | 后验概率 )
  6. ubuntu服务器php7.2启用mysqli(不用reboot超简单)
  7. iOS 限制输入字数完美解决方案
  8. OJ 169 Majority Element
  9. 地球不是圆的,别让教科书限制了孩子的想象力!
  10. uva 10037——Bridge
  11. oracle之单行函数2
  12. (06)Vivado约束基础
  13. 安装qt5后编译运行后有关Qt at-spi的警告
  14. 论文笔记-深度估计(1)Depth Map Prediction from a Single Image using a Multi-Scale Deep Network
  15. 3.15PMP试题每日一题
  16. (转)中国大学改名大全2007最新版(笑掉大牙)
  17. 【数据结构】栈和队列的异同
  18. Linux学习笔记11
  19. 螺旋图形Linux,一个实例带你熟练使用UG中的螺旋线,新手必备!
  20. python网络爬虫从入门到实践 第5章 (一)

热门文章

  1. 数据 正则化 python_python3.6怎么单独正则化/标准化DataFrame中的指定列数据
  2. php json获取get请求,PHP简单的Curl的Get请求和Curl的Post请求和file_get_contents的Get请求获取接口JSON数据...
  3. qt下实现文件的拖拽打开
  4. Python locals 函数 - Python零基础入门教程
  5. Python map 函数 -Python零基础入门教程
  6. java当中有关循环的代码_有关Java循环的内容,编程中还是比较常用的,下面分享给大家几个循环的示例代码,练习一下。1、循环输出1到100之间所有能被3或能被4整除的数。pack...
  7. 投后管理岗面试_2020天津水务招79人,管理岗+操作岗,专科起报
  8. python boxplot orient_Python 可视化 | Seaborn5 分钟入门 (三)——boxplot 和 violinplot
  9. .net mysql 类库_(精华)2020年6月27日 C#类库 MySqlHelper(Ado.net数据库封装)
  10. android l 电池,DIY新技能--M1L换电池