• ES6 Map数据结构


    1.Map是什么?

    ES6 提供的另一种新的引用类型的数据结构 它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键)

    以前引用类型中的对象也是键值对的集合 但是键限于字符串

    总结起来就是:

    • Object 结构提供了“字符串—值”的对应,
    • Map 结构提供了“值—值”的对应,是一种更完善的 “键值对” 结构实现。
    • 如果你需要“键值对”的数据结构,Map 比 Object 更合适
    • 对象作为键,会隐式的调用toString()方法,从而导致后一个覆盖前一个键
    • 接受数组作为参数,该数组必须表示键值对的数组
    • Map传址,所以对象作为键名时传输的是地址,相同{},{}形式最为键,值不相等
    • Map接受数组作为参数的本质是通过forEach()循环,然后循环体内使用解构赋值items.forEach(([key, value],index) => map.set(key,value))
    • Map自带方法keys(),values(),entries(),forEach()等
    • Map参数的扩展:只要是具有 Iterator 接口且成员为键值对都可以作为Map的参数

    2.怎么声明Map数据结构及Map的方法:set(), get(), has(), delete()

    1. const m = new Map();
    2. const o = { p: 'Hello World' };
    3. m.set(o, 'content')
    4. console.log( m.get(o) ); //"content"
    5. console.log( m.has(o) );// true
    6. console.log( m.delete(o) );// true
    7. console.log( m.has(o) );// false

    3.证明是引用类型数据 instanceof 、Object.prototype.toString().call()

    为什么instanceof可以判断对象或数组?

    https://blog.csdn.net/qq_34569497/article/details/133889333

    1. let res = map instanceof Map
    2. let resMap = Object.prototype.toString.call(map)
    3. console.log(res); // true
    4. console.log(resMap); // [object Map]

    4.Map和对象的区别:对象作为键,会隐式的调用toString()方法,从而导致后一个覆盖前一个键

    对象作为键,会隐式的调用toString()方法,从而导致后一个覆盖前一个键

    1. let o1 = { a: 1 }
    2. let o2 = { b: 1 }
    3. let o3 = {}
    4. o3[o1] = 1
    5. o3[o2] = 2
    6. console.log(o3) // [object Object]: 2
    7. Object.keys(o3).map((v, i) => {
    8. console.log(v); // [object Object]
    9. console.log(i); // 0
    10. console.log(typeof v); // string
    11. })

    Map就不存在覆盖: 

    1. let o1 = { a: 1 }
    2. let o2 = { b: 1 }
    3. let o3 = new Map()
    4. o3.set(o1, '123')
    5. o3.set(o2, '234')
    6. console.log(o3);
    7. console.log(o3.get(o1));
    8. console.log(o3.get(o2));

    5.接受数组作为参数——该数组必须是表示键值对的数组

    作为构造函数,Map 也可以接受一个数组作为参数。注意该数组的成员是一个个表示键值对的数组。

    1. const map = new Map([
    2. ['name', '张三'],
    3. ['title', 'Author']
    4. ]);
    5. map.get('name') // "张三"
    6. map.get('title') // "Author"

    6.Map传址特点--对象作为键名时,传输的是地址,所以下例中的两个{x:1}虽然长相一样,但实际值不同(存储在堆内存的两个位置)

    对象作为键名时,传输的是地址,所以下例中的两个 {name:'曹操'} 虽然长相一样,但实际值不同(存储在堆内存的两个位置)

    1. const map = new Map([
    2. ['name', '张三'],
    3. ['title', 'Author'],
    4. [{name:'曹操'},'枭雄']
    5. ]);
    6. map.get('name') // "张三"
    7. map.get('title') // "Author"
    8. map.get({name:'曹操'});//返回undefined。为什么?因为应用数据类型比较的是地址 {name:'曹操'} !=={name:'曹操'}。

    想要obj最为key并且可以获取值,必须以下面形式才行:

    1. let obj = {name:'曹操'};
    2. const map = new Map([obj,'枭雄']);
    3. map.get(obj);//'枭雄'

    7.Map构造函数接受数组作为参数的本质,内部机制使用forEach进行遍历

    内部机制:

    • 通过items通过forEach()进行遍历 ,items.forEach(([key, value],index) => map.set(key,value))
    • 并且使用到数组解构的模式匹配
    1. const items = [
    2. ['name', '张三'],
    3. ['title', 'Author']
    4. ];
    5. const map = new Map();
    6. items.forEach(([key, value],index) => map.set(key,value))

    8.Map自带的一些方法 keys() values() entries()

    9.Map参数的扩展

    任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构 都可以当作Map构造函数的参数

    1. const set = new Set([
    2. ['foo', 1],
    3. ['bar', 2]
    4. ]);
    5. const m1 = new Map(set);
    6. m1.get('foo') // 1
    7. const m2 = new Map([['baz', 3]]);
    8. const m3 = new Map(m2);
    9. m3.get('baz') // 3

  • 相关阅读:
    React(5)-类组件的setState
    我们在讲的 Database Plus,到底能解决什么样的问题?
    Windows下Git Bash调用rsync
    图解 SQL 执行顺序,通俗易懂!
    uniapp 路由不要显示#
    SpringBoot——整合数据库,springSecurity,shiro、整合thymeleaf
    十九章总结
    1.使用SpringBoot整合Activiti6(工作流)
    2023程序员HR面试面经
    CB2-2CARD之Debian(Bookworm)安装Gnome看CCTV
  • 原文地址:https://blog.csdn.net/qq_34569497/article/details/133889007