【金秋打卡】第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、对象的对比学习中，知识点还是比较容易掌握的，期待后面的学习内容。