ES6中map对象的使用,确实比Object好使哈

简介: ES6中Map对象的使用优势,包括任意类型作为键、直接获取大小、增删查改操作等。Map的键可以是函数、对象、NaN等,支持forEach循环和for...of循环。

Map 对象

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
我们可以让各种类型作为map的键与值。

Maps 和 Objects 的区别

  • Object的键我们一般都是使用字符串或者Symbol;
    Map的键可以是任意类型,如:函数、数组、对象、NAN等等。

  • Object的长度可以通过keys或者键数组的length获得;
    Map的长度直接通过属性size得到。

Map的key:

使用set函数来给map对象增加键值对,参数为(键的名称,值);
使用get函数可以获取当前键的值,参数为(键的名称);
使用delete函数可以删除当前键值对,参数为(键的名称);
使用size属性可以获取当前map对象的键值对个数。

         let mapObj = new Map()
        // String
        mapObj.set('name',"六卿")
        mapObj.set('age',18)
        mapObj.set('habby',['唱歌'])
        mapObj.set('loves',{
   
            'apple':"100%",
            'orange':"10%",
        })
        let a = ()=>{
   console.log("执行了a函数")}
        // fun
        mapObj.set(a,a)
        mapObj.set(NaN,'NaN')
        console.log(mapObj.has('habby'))
        console.log(mapObj.get('age'))
        console.log(mapObj.size)
        mapObj.get(a)()

在这里插入图片描述

循环Map

1.使用 for of
        let mapObj = new Map()
        mapObj.set('name',"六卿")
        mapObj.set('age',18)
        mapObj.set('habby',['唱歌'])
        mapObj.set('loves',{
   
            'apple':"100%",
            'orange':"10%",
        })
        let a = ()=>{
   console.log("执行了a函数")}
        mapObj.set(a,a)
        mapObj.set(NaN,'NaN')
        mapObj.get(a)()
        for(let key  of mapObj){
   
            console.log(key)//[name,'张俊卿']  [age,18]  [habby,['唱歌']]....
        }

循环的 let key为一个数组,数组的第一项为map对象的key,第二项为key对应的值。

1.使用 forEach
        let mapObj = new Map()
        mapObj.set('name',"六卿")
        mapObj.set('age',18)
        mapObj.set('habby',['唱歌'])
        mapObj.set('loves',{
   
            'apple':"100%",
            'orange':"10%",
        })
        let a = ()=>{
   console.log("执行了a函数")}
        mapObj.set(a,a)
        mapObj.set(NaN,'NaN')
        mapObj.get(a)()
        mapObj.forEach((value,key)=>{
   
            console.log(value,key)
        })

在这里插入图片描述
forEach传入回调函数,回调函数的第一个参数为每一项键值对的值,第二个参数为每一个键值对的键。

目录
相关文章
|
7月前
|
存储 消息中间件 人工智能
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
233 11
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
|
9月前
|
JavaScript 前端开发 开发者
讲述Vue框架中用于对象响应式变化的Object.defineProperty函数。
综上所述,Vue.js通过 `Object.defineProperty()`提供了强大的响应式能力,使得状态管理变得简洁高效。这种能力是Vue.js受到广大开发者青睐的重要原因之一。尽管Vue 3.x使用Proxy替代了该方法,但对于Vue 2.x及其之前版本,`Object.defineProperty()`是理解Vue.js内部工作机制不可或缺的一部分。
272 27
|
安全 Java
Object取值转java对象
通过本文的介绍,我们了解了几种将 `Object`类型转换为Java对象的方法,包括强制类型转换、使用 `instanceof`检查类型和泛型方法等。此外,还探讨了在集合、反射和序列化等常见场景中的应用。掌握这些方法和技巧,有助于编写更健壮和类型安全的Java代码。
891 17
|
前端开发 数据处理
对象数据的读取,看这一篇就够了!Object.keys()、Object.values()和Object.entries()用法详解;如何获取对象原型链上的属性
Object.keys()、Object.values()和Object.entries()都是利于对象操作的便捷方法,能有效提升数据处理的效率。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
存储 前端开发 API
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
该文章详细介绍了ES6中Set和Map数据结构的特性和使用方法,并探讨了它们在前端开发中的具体应用,包括如何利用这些数据结构来解决常见的编程问题。
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
|
Python
通过 type 和 object 之间的关联,进一步分析类型对象
通过 type 和 object 之间的关联,进一步分析类型对象
340 3
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
299 0
|
10月前
|
安全 Java 数据库连接
让我们讲解一下 Map 集合遍历的方式
我是小假 期待与你的下一次相遇 ~
355 43
|
存储 安全 Java
java集合框架复习----(4)Map、List、set
这篇文章是Java集合框架的复习总结,重点介绍了Map集合的特点和HashMap的使用,以及Collections工具类的使用示例,同时回顾了List、Set和Map集合的概念和特点,以及Collection工具类的作用。
java集合框架复习----(4)Map、List、set
下一篇
开通oss服务