ES6 Map数据结构

这篇具有很好参考价值的文章主要介绍了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()

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

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

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

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

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

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

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

        let o1 = { a: 1 }
        let o2 = { b: 1 }
        let o3 = {}
        o3[o1] = 1
        o3[o2] = 2
        console.log(o3) // [object Object]: 2
        Object.keys(o3).map((v, i) => {
            console.log(v); // [object Object]
            console.log(i); // 0
            console.log(typeof v); // string
        })

Map就不存在覆盖: 

        let o1 = { a: 1 }
        let o2 = { b: 1 }
        let o3 = new Map()
        o3.set(o1, '123')
        o3.set(o2, '234')
        console.log(o3);
        console.log(o3.get(o1));
        console.log(o3.get(o2));

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

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

const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);
map.get('name') // "张三"
map.get('title') // "Author"

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

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

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

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

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

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

内部机制:

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

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

9.Map参数的扩展

任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构 都可以当作Map构造函数的参数文章来源地址https://www.toymoban.com/news/detail-723604.html

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

到了这里,关于ES6 Map数据结构的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JS 怎么理解ES6新增Set、Map两种数据结构?

    目录 一、前言 二、Set 1.Set数据结构定义 2.Set数据结构的特性 3.Set数据结构的基本使用 4.Set遍历数据 5.Set 的使用场景 6.WeakSet的使用 7.垃圾回收机制 三、Map 1.Map数据结构定义 2.Map数据结构的特性 3.Map数据结构的基本使用  4.Map遍历数据 5.Map的使用场景 6.WeakMap的使用 7.垃圾回收

    2024年02月08日
    浏览(27)
  • 【高阶数据结构】Map 和 Set(详解)

    (꒪ꇴ꒪(꒪ꇴ꒪ )🐣,我是 Scort 目前状态:大三非科班啃C++中 🌍博客主页:张小姐的猫~江湖背景 快上车🚘,握好方向盘跟我有一起打天下嘞! 送给自己的一句鸡汤🤔: 🔥真正的大师永远怀着一颗学徒的心 作者水平很有限,如果发现错误,可在评论区指正,感谢🙏 🎉🎉

    2024年01月23日
    浏览(32)
  • 【高阶数据结构】封装Map和Set

    (꒪ꇴ꒪(꒪ꇴ꒪ )🐣,我是 Scort 目前状态:大三非科班啃C++中 🌍博客主页:张小姐的猫~江湖背景 快上车🚘,握好方向盘跟我有一起打天下嘞! 送给自己的一句鸡汤🤔: 🔥真正的大师永远怀着一颗学徒的心 作者水平很有限,如果发现错误,可在评论区指正,感谢🙏 🎉🎉

    2024年01月20日
    浏览(37)
  • 【高阶数据结构】封装unordered_map 和 unordered_set

    (꒪ꇴ꒪(꒪ꇴ꒪ )🐣,我是 Scort 目前状态:大三非科班啃C++中 🌍博客主页:张小姐的猫~江湖背景 快上车🚘,握好方向盘跟我有一起打天下嘞! 送给自己的一句鸡汤🤔: 🔥真正的大师永远怀着一颗学徒的心 作者水平很有限,如果发现错误,可在评论区指正,感谢🙏 🎉🎉

    2024年02月03日
    浏览(33)
  • JavaScript(ES6)数据结构与算法之树

    6.1 概念 非线性结构 n(n=0)个节点构成的有限集合,n=0时称为空树 对于任一非空树 有一个根节点 其余节点可以构成子树 树的术语: 节点的度 :节点的子树个数 树的度 :树所有节点中最大的度数 叶节点 /叶子节点:度为零的节点 父节点:有子树的的节点是子树根节点的父节

    2024年02月04日
    浏览(28)
  • 【高阶数据结构】map和set的介绍和使用 {关联式容器;键值对;map和set;multimap和multiset;OJ练习}

    关联式容器和序列式容器是C++ STL中的两种不同类型的容器。 关联式容器是基于键值对的容器 ,其中每个元素都有一个唯一的键值,可以通过键值来访问元素。关联式容器包括set、multiset、map和multimap。 序列式容器是基于元素序列的容器 ,其中元素按照一定的顺序排列,可以

    2024年02月11日
    浏览(32)
  • ES6: Map结构

    它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比

    2024年02月11日
    浏览(32)
  • 高阶数据结构——图

    图的基本概念 图是由顶点集合和边的集合组成的一种数据结构,记作 G = ( V , E ) G=(V, E)G=(V,E) 。 有向图和无向图: 在有向图中,顶点对 x , y 是有序的,顶点对 x , y 称为顶点 x 到顶点 y 的一条边, x , y 和 y,x是两条不同的边。 在无向图中,顶点对 ( x , y ) 是无序的,顶点对

    2024年02月07日
    浏览(20)
  • 高阶数据结构 ——— 图

    图的基本概念 图是由顶点集合和边的集合组成的一种数据结构,记作 G = ( V , E ) G=(V, E) G = ( V , E ) 。 有向图和无向图: 在有向图中,顶点对 x , y x, y x , y 是有序的,顶点对 x , y x, y x , y 称为顶点 x x x 到顶点 y y y 的一条边, x , y x, y x , y 和 y , x y, x y , x 是两条不同的边。 在

    2024年02月08日
    浏览(34)
  • 高阶数据结构 ——— 并查集

    并查集是一种树型的数据结构,用于处理一些不相交集合的合并及查询问题。 并查集通常用森林来表示,森林中的每棵树表示一个集合,树中的结点对应一个元素。 说明一下: 虽然利用其他数据结构也能完成不相交集合的合并及查询,但在数据量极大的情况下,其耗费的时

    2024年02月03日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包