JS中Map对象与object的区别

简介: 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

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

相关文章
|
1月前
|
JavaScript 前端开发 开发者
flat、flatmap与map的用法区别
本文介绍了 JavaScript 数组方法 `flat()`、`flatMap()` 和 `map()` 的用法及区别。`flat()` 可按指定深度递归展平数组,参数为深度,默认一层;`flatMap()` 结合了 `map()` 和 `flat()` 功能,返回一维数组,长度可能不同于原数组;而 `map()` 返回与原数组长度一致的新数组。通过多个代码示例展示了三者的功能和差异,帮助开发者更好地理解和使用这些方法。
|
2月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
6月前
|
设计模式 JavaScript 前端开发
js中new和object.creat区别
【10月更文挑战第29天】`new` 关键字和 `Object.create()` 方法在创建对象的方式、原型链继承、属性初始化以及适用场景等方面都存在差异。在实际开发中,需要根据具体的需求和设计模式来选择合适的方法来创建对象。
|
7月前
|
存储 JavaScript 前端开发
Set、Map、WeakSet 和 WeakMap 的区别
在 JavaScript 中,Set 和 Map 用于存储唯一值和键值对,支持多种操作方法,如添加、删除和检查元素。WeakSet 和 WeakMap 则存储弱引用的对象,有助于防止内存泄漏,适合特定场景使用。
|
7月前
|
存储 缓存 Java
【用Java学习数据结构系列】HashMap与TreeMap的区别,以及Map与Set的关系
【用Java学习数据结构系列】HashMap与TreeMap的区别,以及Map与Set的关系
102 1
|
8月前
|
存储 JavaScript 前端开发
js的map和set |21
js的map和set |21
|
8月前
|
JavaScript 前端开发
js map和reduce
js map和reduce
|
7月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
120 0
|
7月前
|
存储 JavaScript 前端开发
js中map属性
js中map属性
84 0
|
7月前
|
前端开发 JavaScript 索引
JavaScript 数组常用高阶函数总结,包括插入,删除,更新,反转,排序等,如map、splice等
JavaScript数组的常用高阶函数,包括遍历、插入、删除、更新、反转和排序等操作,如map、splice、push、pop、reverse等。
59 0