深入理解Map数据结构(一) 之初识Map

前言:  在ES6之前, 存储键/值结构时采用的是 Object 对象存储的形式, 且键只能是字符串数字, ES6推出的 Symbol 出现之后, 键也可以是 Symbol 类型 . 同时ES6也推出了 Map 新型数据结构, 具备存储键/值形式的能力, 但键的类型就远远不受限制了, 可以是任意类型, 但两者的区别不仅如此, 在操作大量键/值数据时, 双方有着不同的优劣 . 由于 Map 的很多功能特性 Object 都能实现, 所以这也是 Map 略少的原因 .

---

目录

创建 Map 数据

操作 Map 数据的方法

实操演练

---

 

创建 Map 数据

通过 new 关键字来初始化 Map 数据, 传入的参数必须是可迭代对象

    // 创建一个空的 Map 数据结构
    const map1 = new Map(1, 23)
    console.log(Map); // 报错 参数是不可迭代的

    // 初始化 Map 数据结构
    const str = 'a'
    const fun = function() { }
    const obj = { a: 1 }
    const arr = []
    const map2 = new Map([
      [str, 'string'],
      [fun, 'function'],
      [obj, 'object'],
      [arr, 'array']
    ])

 查看输出第二个map结构的结果

操作 Map 数据的方法

map 构造函数内定义了操作 map 实例的很多方法

set	添加键值对
get	获取键对应的值
has	查询是否有某个键
size	查询map中有多少对键值
delete	删除某个键
clear	清空map中的数据
values	获取map值的迭代器
keys	获取map键的迭代器
entries	获取mao键值结构的迭代器
Symbol(Symbol.toStringTag)	map转成字符串时构造函数的值

实操演练

1. set 添加键值

const map = new Map()
    map.set(1, 'one')

结果: 

2.  get 获取键对应的值

    const obj = { a: '1' }
    const map = new Map(
      [
        [1, 'one'],
        [obj, 'object']
      ]
    )
    const res1 = map.get(1)
    const res2 = map.get(obj)
    console.log(res1, res2);

结果: 

3. has 查询键

    const obj = { a: '1' }
    const map = new Map(
      [
        [1, 'one'],
        [obj, 'object']
      ]
    )
    const res1 = map.has(1)
    const res2 = map.has(obj)
    const res3 = map.has('a')
    console.log(res1, res2, res3); // true true false

4. size 查询有多少对键值

    const obj = { a: '1' }
    const map = new Map(
      [
        [1, 'one'],
        [obj, 'object']
      ]
    )
    console.log(map.size); // 2

5. delete 删除键

   const obj = { a: '1' }
    const map = new Map(
      [
        [1, 'one'],
        [obj, 'object']
      ]
    )
    map.delete(1)
    console.log(map);

 打印结果 : 

6. clear 清空键

   const obj = { a: '1' }
    const map = new Map(
      [
        [1, 'one'],
        [obj, 'object']
      ]
    )
    map.clear()
    console.log(map);

打印结果 :  

 7. values  值迭代器

想要把迭代器转成数字统一使用 Array.from

    const str = 'a'
    const fun = function() { }
    const obj = { a: 1 }
    const arr = []
    const map2 = new Map([
      [str, 'string'],
      [fun, 'function'],
      [obj, 'object'],
      [arr, 'array']
    ])
    console.log(map2.values());
    console.log(Array.from(map2.values()));

 

 8. keys    键迭代器

    const str = 'a'
    const fun = function() { }
    const obj = { a: 1 }
    const arr = []
    const map2 = new Map([
      [str, 'string'],
      [fun, 'function'],
      [obj, 'object'],
      [arr, 'array']
    ])
    console.log(Array.from(map2.keys()));
    console.log(map2.keys());

 9. entries 键值迭代器

    const str = 'a'
    const fun = function() { }
    const obj = { a: 1 }
    const arr = []
    const map2 = new Map([
      [str, 'string'],
      [fun, 'function'],
      [obj, 'object'],
      [arr, 'array']
    ])
    console.log(Array.from(map2.entries()));
    console.log(map2.entries());

 

 10. Symbol(Symbol.toStringTag)  转字符串构造函数的值

    const str = 'a'
    const fun = function() { }
    const obj = { a: 1 }
    const arr = []
    const map2 = new Map([
      [str, 'string'],
      [fun, 'function'],
      [obj, 'object'],
      [arr, 'array']
    ])
    console.log(map2[Symbol.toStringTag]);
    console.log(map2.toString());