一、课程名称:前端工程师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、对象的对比学习中,知识点还是比较容易掌握的,期待后面的学习内容。