JavaScript Map 和 Object 的区别解析

 更新时间:2022年08月18日 11:02:07   作者:m0_67402341  
在JavaScript中,Map 和 Object 看起来都是用键值对来存储数据,那么他们有什么不同呢,这篇文章主要介绍了JavaScript Map 和 Object 的区别,需要的朋友可以参考下

在JavaScript中,MapObject 看起来都是用键值对来存储数据,那么他们有什么不同呢?

不同点

Key filed

在 Object 中, key 必须是简单数据类型(整数,字符串或者是 symbol),而在 Map 中则可以是 JavaScript 支持的所有数据类型,也就是说可以用一个 Object 来当做一个Map元素的 key。

元素顺序

Map 元素的顺序遵循插入的顺序,而 Object 的则没有这一特性。

继承

Map 继承自 Object 对象。

新建实例

Object 支持以下几种方法来创建新的实例:

var obj = {...};
var obj = new Object();
var obj = Object.create(null);

Map 仅支持下面这一种构建方法:

var map = new Map([[1, 2], [2, 3]]); // map = {1 => 2, 2 => 3}

数据访问

Map 想要访问元素,可以使用 Map 本身的原生方法:

map.get(1) // 2

Object 可以通过 .[ ] 来访问

obj.id;
obj['id'];

判断某个元素是否在 Map 中可以使用

map.has(1);

判断某个元素是不是在 Object 中需要以下操作:

obj.id === undefined;
// 或者
'id' in obj;

另外需要注意的一点是,Object 可以使用 Object.prototype.hasOwnProperty() 来判断某个key是否是这个对象本身的属性,从原型链继承的属性不包括在内。

新增一个数据

Map 可以使用 set() 操作:

map.set(key, value)
// 当传入的 key 已经存在的时候,Map 会覆盖之前的值

Object 新增一个属性可以使用:

obj['key'] = value;
obj.key = value;
// object也会覆盖

删除数据

在 Object 中没有原生的删除方法,我们可以使用如下方式:

delete obj.id;
// 下面这种做法效率更高
obj.id = undefined

需要注意的是,使用 delete 会真正的将属性从对象中删除,而使用赋值 undefined 的方式,仅仅是值变成了 undefined。属性仍然在对象上,也就意味着 在使用 for … in… 去遍历的时候,仍然会访问到该属性。

Map 有原生的 delete 方法来删除元素:

var isDeleteSucceeded = map.delete(1);
console.log(isDeleteSucceeded ); // true
// 全部删除
map.clear();

获取size

Map 自身有 size 属性,可以自己维持 size 的变化。
Object 则需要借助 Object.keys() 来计算

console.log(Object.keys(obj).length); 

Iterating

Map 自身支持迭代,Object 不支持。

如何确定一个类型是不是支持迭代呢? 可以使用以下方法:

console.log(typeof obj[Symbol.iterator]); // undefined
console.log(typeof map[Symbol.iterator]); // function

何时使用 Map ,何时使用 Object?

虽然Map 在很多时候优于 Object,但是作为 JavaScript 最基础的数据类型,还是有很多情景更适合使用 Object。

  • 当所要存储的是简单数据类型,并且 key 都为字符串或者整数或者 Symbol 的时候,优先使用 Object ,因为Object可以使用 字符变量 的方式创建,更加高效。
  • 当需要在单独的逻辑中访问属性或者元素的时候,应该使用 Object,例如:
var obj = {
id: 1,
name: “It's Me!”,
print: function(){
return Object Id: ${this.id}, with Name: ${this.name};
}
}
console.log(obj.print());//Object Id: 1, with Name: It's Me.
// 以上操作不能用 Map 实现
  • JSON 直接支持 Object,但不支持 Map
  • Map 是纯粹的 hash, 而 Object 还存在一些其他内在逻辑,所以在执行 delete 的时候会有性能问题。所以写入删除密集的情况应该使用 Map。
  • Map 会按照插入顺序保持元素的顺序,而Object做不到。
  • Map 在存储大量元素的时候性能表现更好,特别是在代码执行时不能确定 key 的类型的情况。

到此这篇关于JavaScript Map 和 Object 的区别的文章就介绍到这了,更多相关JavaScript Map 和 Object 区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript使用addEventListener添加事件监听用法实例

    JavaScript使用addEventListener添加事件监听用法实例

    这篇文章主要介绍了JavaScript使用addEventListener添加事件监听的方法,实例分析了addEventListener方法的相关使用技巧,需要的朋友可以参考下
    2015-06-06
  • 一文读懂TS 中联合类型和交叉类型各自的含义

    一文读懂TS 中联合类型和交叉类型各自的含义

    联合类型在 TypeScript 中相当流行,你可能已经用过很多次了。交叉类型稍微不那么常见,它们似乎引起更多的困惑,这篇文章主要介绍了一文读懂TS 中联合类型和交叉类型的含义,需要的朋友可以参考下
    2022-12-12
  • js获取当前路径的简单示例代码

    js获取当前路径的简单示例代码

    本篇文章主要是对js获取当前路径的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 如何用JavaScipt测网速

    如何用JavaScipt测网速

    这篇文章主要介绍了如何用JavaScipt测网速,对测网速感兴趣的同学,可以参考下
    2021-05-05
  • 写gulp遇到的ES6问题详解

    写gulp遇到的ES6问题详解

    这篇文章主要给大家介绍了关于在写gulp遇到的ES6问题的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • javascript实现自动输出文本(打字特效)

    javascript实现自动输出文本(打字特效)

    文字如何实现打字的效果呢?在浏览网页的时候也经常能看到这种效果。本文给大家汇总介绍了几种打字效果的文字特效,文字一个一个地打印在页面上。
    2015-08-08
  • JavaScript移动端常用事件之touch触摸事件详解

    JavaScript移动端常用事件之touch触摸事件详解

    触屏事件touch也称为触摸事件,touch对象代表一个触摸点,触摸点可能是一根手指,也可能是一根触摸笔,触屏事件可响应用户手指(或触摸笔)对屏幕或者触控板操作,下面这篇文章主要给大家介绍了关于JavaScript移动端常用事件之touch触摸事件的相关资料,需要的朋友可以参考下
    2022-10-10
  • JavaScript数据结构链表知识详解

    JavaScript数据结构链表知识详解

    存储有序的元素集合,但不同于数组,链表中的元素在内存中不是连续放置的。每个元素由一个存储元素本身的节点和一个指向下一个元素的引用(也称指针或链接)组成。下面通过本文给大家详细介绍下,需要的朋友参考下
    2016-11-11
  • JavaScript 防抖debounce与节流thorttle

    JavaScript 防抖debounce与节流thorttle

    这篇文章主要介绍了JavaScript 防抖debounce与节流thorttle,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-05-05
  • 解决js下referer兼容各大浏览器的方法

    解决js下referer兼容各大浏览器的方法

    众所周知,我们web开发人员痛恨IE浏览器,因为IE不支持标准,标准外的默认行为又和其他浏览器经常不一致,所以我们在做项目的时候,经常需要专门针对IE来做些文章,当然对于referer也不例外,今天我们就来看下如何让referer兼容主流浏览器
    2014-11-11

最新评论