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传入回调函数,回调函数的第一个参数为每一项键值对的值,第二个参数为每一个键值对的键。

目录
相关文章
|
15天前
|
存储 消息中间件 人工智能
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
49 11
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
|
3月前
|
JavaScript 前端开发 开发者
讲述Vue框架中用于对象响应式变化的Object.defineProperty函数。
综上所述,Vue.js通过 `Object.defineProperty()`提供了强大的响应式能力,使得状态管理变得简洁高效。这种能力是Vue.js受到广大开发者青睐的重要原因之一。尽管Vue 3.x使用Proxy替代了该方法,但对于Vue 2.x及其之前版本,`Object.defineProperty()`是理解Vue.js内部工作机制不可或缺的一部分。
130 27
|
9月前
|
安全 Java
Object取值转java对象
通过本文的介绍,我们了解了几种将 `Object`类型转换为Java对象的方法,包括强制类型转换、使用 `instanceof`检查类型和泛型方法等。此外,还探讨了在集合、反射和序列化等常见场景中的应用。掌握这些方法和技巧,有助于编写更健壮和类型安全的Java代码。
464 17
|
7月前
|
前端开发 数据处理
对象数据的读取,看这一篇就够了!Object.keys()、Object.values()和Object.entries()用法详解;如何获取对象原型链上的属性
Object.keys()、Object.values()和Object.entries()都是利于对象操作的便捷方法,能有效提升数据处理的效率。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
存储 前端开发 API
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
该文章详细介绍了ES6中Set和Map数据结构的特性和使用方法,并探讨了它们在前端开发中的具体应用,包括如何利用这些数据结构来解决常见的编程问题。
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
|
12月前
|
Python
通过 type 和 object 之间的关联,进一步分析类型对象
通过 type 和 object 之间的关联,进一步分析类型对象
175 3
|
12月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
185 0
|
7月前
|
安全 IDE Java
重学Java基础篇—Java Object类常用方法深度解析
Java中,Object类作为所有类的超类,提供了多个核心方法以支持对象的基本行为。其中,`toString()`用于对象的字符串表示,重写时应包含关键信息;`equals()`与`hashCode()`需成对重写,确保对象等价判断的一致性;`getClass()`用于运行时类型识别;`clone()`实现对象复制,需区分浅拷贝与深拷贝;`wait()/notify()`支持线程协作。此外,`finalize()`已过时,建议使用更安全的资源管理方式。合理运用这些方法,并遵循最佳实践,可提升代码质量与健壮性。
192 1
|
7月前
|
Java
课时78:Object类的基本概念
Object类的主要特点是可以解决参数的统一问题,使用object类可以接受所有的数据类型。 1. Object类简介 2. 观察Object类接收所有子类对象 3. 使用Object类接收数组
139 0
|
10月前
|
JSON Java Apache
Java基础-常用API-Object类
继承是面向对象编程的重要特性,允许从已有类派生新类。Java采用单继承机制,默认所有类继承自Object类。Object类提供了多个常用方法,如`clone()`用于复制对象,`equals()`判断对象是否相等,`hashCode()`计算哈希码,`toString()`返回对象的字符串表示,`wait()`、`notify()`和`notifyAll()`用于线程同步,`finalize()`在对象被垃圾回收时调用。掌握这些方法有助于更好地理解和使用Java中的对象行为。
121 8