【金秋打卡】第17天Map的方法与属性
2022/11/10 4:23:55
本文主要是介绍【金秋打卡】第17天Map的方法与属性,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、课程名称:前端工程师2022版
二、课程章节:ES6语法扩展-Set和Map数据结构
三、课程讲师:Alex
四、课程内容
1、Map是什么
(1)认识Map
Map翻译过来是''映射''的意思(但不推荐使用这个翻译,因为翻译有时候会失真),Map与对象类似,Map和对象本质上都是键值对的集合(即聚集在一起)
const m = new Map();
// 使用set方法添加键值对
m.set("name", "alex");
m.set("age", 18);
console.log(m); //Map(2) {'name' => 'alex', 'age' => 18}
(2)Map和对象的区别
1)对象一般是使用字符串当作键,即使传引用类型,也会被转为字符串
2)以下类型都可以作为Map的键
①基本数据类型:数字、字符串、布尔值、undefined、null
②引用数据类型:对象([]、{}、函数、Set、Map等)
const m = new Map();
m.set("name", "alex");
m.set(true, "true"); //前面的true没有加引号,是布尔类型,不是字符串
m.set({}, "object");
m.set(new Set([1, 2]), "set");
m.set(undefined, "undefined"); //前面的undefined没有加引号,就是undefined类型
m.set(null, "null");
console.log(m);
2、Map实例的方法和属性
(1)方法
1)set:可以往Map里面添加成员,键如果已经存在,后添加的键值对覆盖已有的
const m = new Map();
m.set("age", 18).set(true, "true").set("age", 20);
console.log(m); //Map(2) {'age' => 20, true => 'true'}
2)get:可以获取Map中的成员,当get获取不存在的成员时,返回undefined
console.log(m.get("age")); //20
console.log(m.get("true")); //undefined
console.log(m.get(true)); //true
3)has:可以判断是否有某个成员,返回值时布尔值
console.log(m.has("age")); //true
console.log(m.has("true")); //false
4)delete:可以删除某个成员,使用delete删除不存在的成员,什么都不会发生,也不会报错
m.delete('age');
m.delete('name');
console.log(m); //Map(1) {true => 'true'}
5)clear:可以清空Map中的全部成员
m.clear();
console.log(m); //Map(0) {size: 0}
6)forEach:可以遍历Map,此时参数key不再和value一样了,因为Map中有key
m.forEach(function (value, key, map) {
console.log(value, key, map); //如:20 'age' Map(2) {'age' => 20, true => 'true'}
console.log(value, key, map === m); //true
console.log(this); //#document
},document);
(2)属性:(只有一个)size,可以用来获取Map中键值对的个数,这是对象没有的功能 console.log(m.size); //2
五、课程心得
今天初步学习了Map的相关知识,在与Set、对象的对比学习中,知识点还是比较容易掌握的,期待后面的学习内容。
这篇关于【金秋打卡】第17天Map的方法与属性的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?