当前位置: 首页 > article >正文

JS中Map对象与object的区别

若想了解Map对象可以阅读本人这篇ES6初步了解Map
Map对象与object有什么区别?让我为大家介绍一下吧!

共同点

二者都是以key-value的形式对数据进行存储

		const obj = {
            name:"zs",
            age:18
        }
        console.log(obj)
        let m = new Map()
        m.set("name","zs")
        m.set("age",18)
        console.log(m)

在这里插入图片描述

不同点

1.key的数据类型范围不同,obj可以作为key的仅有number、string、symbol,map均可以

		const obj = {
            name:"zs",
            age:18,
            [Symbol("11")]:"22"
        }
        console.log(obj)
        let m = new Map()
        m.set("name","zs")
        m.set("age",18)
        m.set(Symbol("11"),22)
        m.set([1,2,3],33)
        m.set({},33)
        console.log(m)

在这里插入图片描述
2.key的顺序不同,obj通过obj.keys()打印出来的属性顺序是 number–字符串,map的key顺序是声明顺序。
在这里插入图片描述

在这里插入图片描述
3.创建方式不同。obj有三种创建方式 字面量{}、new Object() 、构造函数。map仅支持new Map()
obj的创建方式:

        const obj = {
            name:"zs",
            age:18
        }
        console.log(obj)
        // 2.new Object
        let obj1 = new Object()
        console.log(obj1)
        // 3.构造函数
        function Person(name,age){
            this.name = name
            this.age = age
        }
        let obj2 = new Person("zs",18)
        console.log(obj2)

在这里插入图片描述
Map对象的创建方式:

let m = new Map()

在这里插入图片描述
4. key的调用不同。 map只能用原生的get方法调用。

        const obj = {
            name:"zs"
        }
        console.log(obj["name"]) //zs
        let m = new Map()
        m.set("name","ls")
        console.log(m.get("name")) //ls

5.设置属性的方式不同。map只能使用set(key,val)方法设置属性。

		const obj = {}
        obj["name"] = "zs"
        console.log(obj)
        let m = new Map()
        m.set("name","ls")
        console.log(m)

在这里插入图片描述

6.Size属性。map有size属性,对象没有。Map.size 返回 Map 中元素的数量,而 Object 的键值对个数只能手动计算

        let m = new Map()
        m.set("name","ls")
        m.set("age",18)
        console.log(m.size) //2

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!


http://www.kler.cn/news/108796.html

相关文章:

  • pythonWeb主流框架分析
  • css-表格样式
  • 【Java 进阶篇】解决Java Web应用中请求参数中文乱码问题
  • Python Wordcloud报错:Only supported for TrueType fonts,多种解决方案
  • 97. 交错字符串
  • Go学习第十二章——Go反射与TCP编程
  • 如何使用drawio画流程图以及导入导出
  • 微服务parent工程和子工程pom文件配置注意
  • 基于Qt 文本读写(QFile/QTextStream/QDataStream)实现
  • C++编程题目------平面上的最接近点对(分治算法)
  • C++设计模式_13_Flyweight享元模式
  • 漏洞复现-showdoc文件上传_v2.8.3_(CNVD-2020-26585)
  • Python环境下LaTeX数学公式转图像方案调研与探讨
  • 【大数据Hive】hive 表数据优化使用详解
  • 西工大CSAPP第二章课后题2.55答案及解析
  • 什么是程序化交易
  • 计算机网络--第一次作业
  • C51--PWN-舵机控制
  • 直线模组怎么分类?
  • 在JS中,var 、let 、const 总结
  • ENSP L2TP 配置
  • springboot 配置文件加载顺序
  • 微信小程序vue+uniapp旅游景点门票预订系统 名胜风景推荐系统
  • End-to-End Adversarial-Attention Network for Multi-Modal Clustering
  • leetCode 260.只出现一次的数字 ||| + 位运算
  • 这个故事有点长 - 舟山
  • 洛谷 B2135:单词替换
  • 2022年上半年上午易错题(软件设计师考试)
  • 信息检索与数据挖掘 | 【实验】排名检索模型
  • Cesium弹窗可随地图移动