JS中Map对象与object的区别

若想了解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

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

相关推荐
波波0076 分钟前
每日一题:在 .NET 中遍历集合(如 List<T>、数组、字典)的过程中进行增删改查会不会有影响?可能引发哪些问题?实际开发中应如何避免?
前端·list
历程里程碑9 分钟前
Linux 18 进程控制
linux·运维·服务器·开发语言·数据结构·c++·笔记
froginwe1112 分钟前
C# 预处理器指令
开发语言
念念不忘 必有回响16 分钟前
码云流水线前端资源传输至目标服务器
运维·服务器·前端
爱装代码的小瓶子18 分钟前
【c++与Linux基础】文件篇(5)- 文件管理系统:
linux·开发语言·c++
我是伪码农23 分钟前
Vue 2.2
前端·javascript·vue.js
马猴烧酒.25 分钟前
【团队空间|第十一天】基础功能实现,RBAC权限控制,ShardingSphere详解
java·开发语言·数据库
●VON26 分钟前
React Native for OpenHarmony:深入剖析 Switch 组件的状态绑定、无障碍与样式定制
javascript·学习·react native·react.js·von
fengxin_rou26 分钟前
从 String 到 Zset:Redis 核心数据结构全解析及排行榜应用
java·开发语言·redis·多线程
Re.不晚28 分钟前
Java进阶之路--线程最最详细讲解
java·开发语言