JS中Map对象与object的区别

news/2024/7/11 0:14:02 标签: javascript, 前端, 开发语言, es6

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

共同点

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

javascript">		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均可以

javascript">		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的创建方式:

javascript">        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对象的创建方式:

javascript">let m = new Map()

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

javascript">        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)方法设置属性。

javascript">		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 的键值对个数只能手动计算

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

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


http://www.niftyadmin.cn/n/5131370.html

相关文章

Ubuntu卸载或重置防火墙规则

Ubuntu卸载或重置防火墙规则 1、开启防火墙后查看对应规则编号,然后进行删除 sudo ufw status numbered ——查看所有规则编号id sudo ufw delete 2 ——删除对应id的规则(比如删除2号规则) 2、按规则来删除。 例如,如果你使用s…

银河麒麟服务器版v4安装程序缺少依赖包,改为利用手机联网在线安装

1 将安卓手机连接使用usb转typec线连接到服务器的usb口。(linux桌面版)也可以类似的方法手机联网。 2 在手机热点中打开usb共享 3 使用ifconfig命令找到手机被服务器识别成的网卡名 4 使用dhclient “手机网卡名”命令,使服务器能上网。 5 变…

8通道模数转换AD7091驱动代码SPI接口ADC,verilog

名称:8通道模数转换AD7091驱动代码 软件:QuartusII 语言:Verilog 代码功能: 使用verilog代码设计AD7091R-8驱动代码 控制接口为SPI接口,实现8通道模数转换,输出8通道数字信号。 FPGA代码Verilog/VHDL代码…

三十八、【进阶】最左前缀法则

1、理解 最左前缀法则,如果索引了多列(联合索引),要遵守最左前缀法则,最左前缀法则是致,查询从索引的最左列开始,并且不跳过索引中的列。 如果跳过某一列,索引将部分失效(该索引后面的字段索引全部失效)。 …

Spring Cloud:四 【详细】

目录 统一网关Gateway 网关的实现 搭建网关 编写配置文件 路由断言工程 路由的过滤器 全局过滤器 网关过滤器执行顺序 网关的cors跨域配置 问题及解决 统一网关Gateway 网关的实现 SpringCloud中存在两种网关 gateway:基于Spring5中提供的WebFlux实现&a…

【Java】PAT Basic Level 1024 科学计数法

题目 1024 科学计数法 作者 HOU, Qiming 单位 浙江大学 科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,其满足正则表达式 [-][1-9].[0-9]E[-][0-9],即数字的整数部分只有 1 位,小数部分至少有 1 位,该数字及其指…

vue中如何获取当时时间时分秒

在 Vue 中可以使用 JavaScript 中的 Date 对象来获取当前时间&#xff0c;然后使用 Vue 中的数据绑定将时间显示在页面上。 <template><div><p>当前时间&#xff1a;{{ time }}</p></div> </template><script> export default {dat…

优化Vue项目架构和模块化:提升应用性能与开发效率

&#x1f31f;优化Vue项目架构和模块化&#xff1a;提升应用性能与开发效率&#x1f4aa; 在Vue.js的项目开发中&#xff0c;优化项目架构和模块化是提升应用性能和开发效率的关键。通过合理的架构设计和模块化开发&#xff0c;我们可以有效地降低代码复杂度&#xff0c;提高可…