Map对象和普通对象的7个区别

2023-10-30

前言:

        普通对象和 ES6 的新对象 Map 都可以存储键值对,但是,它们之间有什么区别?今天来聊一聊!

1、初始化与使用

普通对象可以直接使用字面量进行初始化,而 Map 需要 Map() 构造函数进行初始化,如果想要有初始值,则需要传递一个数组或其他元素为键值对的可迭代对象。这些键值对中的每一个都将被添加到一个新的 Map 中。

    const obj = {
      name: 1,
      age: 18
    }
    // console.log('obj', obj); // obj {name: 1, age: 18}


    const map = new Map([
      ['name', 1],
      ['age', 11]
    ])
    map.set('address', 'ShenZhen'); //为 Map 对象中的键设置值。
    console.log(map.get('age')); // 获取 Map 对象中键的值。
    console.log(map.entries()); // 返回 Map 对象中键/值对的数组。
    console.log(map.keys()); // 返回 Map 对象中键的数组。
    console.log(map.values()); // 返回 Map 对象中值的数组。

    console.log('map', map); // map Map(3) {'name' => 1, 'age' => 11, 'address' => 'ShenZhen'}

与普通对象相比,Map 作为哈希表提供了许多有用的功能。比如判断一个 key 是否在 hash 表中,在 map 中可以使用 hash 方法轻松判断,但是在普通对象中可能会增加复杂度。

另外,set 方法可以为 Map 设置 key 值,get 方法可以获取 value ,size 属性可以返回当前 Map 中 key/value 对的数量,而 plain 对象需要手动计算 使用自己的方法等。。。

其他 Map() 方法

方法 描述
clear() 删除 Map 中的所有元素。
delete() 删除由键指定的元素。
has() 如果键存在,则返回 true。
forEach() 为每个键/值对调用回调。

 2、密钥类型

普通对象只接受字符串和符号作为键值,其他类型将被强制转换为字符串类型,而 Map 可以接受任何类型的 键值(包括函数、对象或任何原语)

    const obj = {};
    const map = new Map();
    const key = function () { };
    obj[key] = 1;
    map.set(key, 1);

    console.log('obj', obj); // obj {function key() {}: 1} --> function key() {}: 1
    console.log('map', map); // map Map(1) {ƒ => 1} --> {function key() {} => 1}

3、Accidental Key

普通对象从原型继承了许多属性键,例如构造函数等。因此,自己的密钥很可能与原型上的密钥发生冲突。但 Map 默认不包含任何键,它只包含那些显式放入的。

    const obj = {};
    const map = new Map();

    console.log('obj', obj.constructor); // obj ƒ Object() { [native code] }
    console.log('map', map.get('constructor')); // map undefined

4、key order

虽然现在普通对象的键进行了排序,但情况并非总是如此,而且排序很复杂。例如,如果对象中有键需要转换为字符串,则不保留对象键的原始顺序,虽然 Map 以简单的方式排序,但他始终与我们插入的顺序相同

    const obj = {
      name: 1,
      age: 11,
      3: 111
    };
    const map = new Map([
      ['name', 1],
      ['age', 11],
      [3, 111]
    ]);

    console.log('obj', obj); // obj {3: 111, name: 1, age: 11}
    console.log('map', map); // Map(3) {'name' => 1, 'age' => 11, 3 => 111}

5、迭代

我们可以使用 for...of 语句或 Map.prototype.forEach 直接迭代 Map 的属性,而普通对象不能直接迭代。

    const obj = {
      name: 1,
      age: 11,
    };
    const map = new Map([
      ['name', 1],
      ['age', 11],
    ]);

    for (const [key, value] of map) {
      console.log(`${key}:`, value); // name:1,age:2
    }
    map.forEach((t, key) => {
      console.log(`${key}:`, t); // name:1,age:2
    })

    Object.keys(obj).forEach(t => {
      console.log(`${t}:`, obj[t]); // name:1,age:2
    })

6、序列化和解析

普通对象支持 JSON 序列化,但 Map 默认无法获取正确数据。

    const obj = {
      name: 1,
      age: 11,
    };
    const map = new Map([
      ['name', 1],
      ['age', 11],
    ]);

    console.log('obj', JSON.parse(JSON.stringify(obj))); // obj {name: 1, age: 11}
    console.log('map', JSON.parse(JSON.stringify(map))); // map {}

7、性能

Map 对象在涉及频繁删除和添加键值对的场景中表现更好,而普通对象没有优化。

总结

那么普通对象应该被 Map 对象替换吗?

不,如果我们想在 JSON 和原始数据之间转换或包含特定的业务逻辑,那么我们应该使用普通对象。因为当我们只想存储键值对和循环操作或不断添加和删除属性时,使用 Map 对象是更好的选择。

Map对象虽然也是继承自底层的Object.prototype,但它为我们提供了很多实用的方法来减轻我们的认知负担,比普通对象更高级。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Map对象和普通对象的7个区别 的相关文章

随机推荐

  • MySQL 8.0 最最详细的安装教程以及错误解决办法

    如果你是来解决错误的 请点击直达 安装中的常见错误本教程也详细说明了一番 MySQL 8 0 安装教程 首先去官网下载MySQL Installer官网下载 本教程重重之重是设置密码验证方式和密码 其余步骤是详细说明 安装步骤 1 在这里我
  • Treap树实现文件C语言

    对于这个 想说的是 关于 NullNode 结点 在调用Release 释放内存之后 要将其恢复为NULL 以便下次的连续使用 自己想到的 很不错 treap c treap树实现文件 include treapTree h 全局变量声明定
  • 【Python基础】网络编程入门总结

    如何在网络中唯一标识一台计算机 IP地址 同一台计算机上多个程序如何共用网络而不冲突 网络端口 范围 0 65535 但0 1023 被占用 1024 65535 可用 不同计算机通信怎么才能相互理解 使用相同的协议 TCP UDP 基于T
  • 基于ISO13400 (DoIP) 实现车辆刷写

    近年来 在整车研发中基于以太网实现车辆高带宽通讯无疑是人们热议的话题 无论是车内基于车载以太网来减少线束成本 实现ADAS 信息娱乐系统等技术 还是基于新的电子电气架构以及远程诊断需求来实现以太网诊断 DoIP 各家OEM都投入了大量人力
  • Mac 平台相关操作

    安装第三方软件 安装第三方软件时 Mac 会提示 无法打开 DragonBonesPro app 因为无法验证开发者 解决办法就是打开控制台在控制台中输入 打开任何来源 sudo spctl master disable 之后再次安装应用程
  • 100天精通Python(数据分析篇)——第67天:Pandas数据连接、合并、加入、添加、重构函数(merge、concat、join、append、stack、unstack)

    文章目录 一 数据连接 pd merge 1 left right 2 how 3 on 4 left on right on 5 sort 6 suffixes 7 left index right index 二 数据合并 pd con
  • jvm是如何处理异常的

    jvm发现运算是已经违反了数学运算规则 java将这种常见的问题进行描述 并封装成了对象叫做ArithmeticException 当除0运算发生后 jvm将该问题打包成了一个异常对象 并将对象抛给调用者main函数 new Arithme
  • vue 多级菜单栏,鼠标移入显示鼠标移除隐藏

  • 注意力机制——注意力评分函数(代码+详解)

    目录 注意力分数 关于a函数的设计有两种思路 1 加性注意力 Additive Attention 2 缩放点积注意力 Scaled Dot Product Attention 模块导入 遮蔽softmax操作 加性注意力代码 补充知识 1
  • 地理信息安全在线培训考试题库-单选题

    1 根据 测绘成果管理条例 利用涉及国家秘密测绘成果开发生产的产品 未经 A 进行保密技术处理的 其秘密等级不得低于所用测绘成果的秘密等级 A 国务院测绘行政主管部门或者省 自治区 直辖市人民政府测绘行政主管部门 B 省级以上保密管理部门
  • OpenResty&Nginx安装ZhongKui-WAF

    Zhongkui WAF 钟馗是中国传统文化中的一个神话人物 被誉为 捉鬼大师 专门驱逐邪恶之物 Zhongkui WAF的命名灵感来源于这一神话人物 寓意着该软件能够像钟馗一样 有效地保护Web应用免受各种恶意攻击和威胁 Zhongkui
  • ModuleNotFoundError:No module named 'pyecharts' 解决pythone安装pyecharts无法正常运行问题

    一 Pyecharts安装方法 方法一 打开CMD输入命令安装 因镜像在国外 所以安装较慢 pip install pyecharts 方法二 利用国内清华镜像安装 pip install i https pypi tuna tsinghu
  • 使用vite打包可以按需引入的组件库 (rollup)

    package json name private false version 0 1 9 main lib index umd js module lib index es js types lib index d ts author n
  • BasicDao的使用

    本次博客带领大家学习BasicDao的使用 BasicDao的基本说明 DAO data access object数据访问对象 这样的通用类 称为BasicDao 是专门和数据库交互的 即完成对数据库 表 的crud操作 在BasicDa
  • tf2梯度计算为None的情况

    今天搭建用tf2搭建WGAN网络 自己来写梯度函数 在使用tf GradientTape 来求梯度时 发现求出结果为None 一般来说结果为None 表示输入变量之间没有构成可求导的关系 同时也需要理解tf GradientTape 求导的
  • 毕业设计-基于机器视觉的嵌入式烟雾识别系统- OpenCV

    目录 前言 课题背景和意义 实现技术思路 一 相关技术简介 二 图像视频识别算法研究 最后 前言 大四是整个大学期间最忙碌的时光 一边要忙着备考或实习为毕业后面临的就业升学做准备 一边要为毕业设计耗费大量精力 近几年各个学校要求的毕设项目越
  • iOS开发,定位当前所在地理位置偏移,坐标转换

    我的blog地址 http blog csdn net h qiao 欢迎访问 在开发中经常会遇到定位当前位置 而且不需要有地图之类的一系列功能 一般都会用CLLocationManger来定位 但是会发现定位出来的经纬度地理反编码之后和自
  • 新浪股票接口获取历史数据

    这两天做了一个调用新浪股票接口获取实时以及历史股票数据的应用 因为新浪没有公开关于其接口的官方文档 所以通过各种百度差了很多关于新浪股票接口的使用 不过大家基本都是转载或者直接复制 对于实时数据的获取讲的很详细 但是缺少获取历史数据的方法
  • Oracle 数据库误truncate table恢复过程

    北京某国企客户 Oracle 11g R2 数据库误truncate table CM CHECK ITEM HIS 表数据丢失 业务查询到该表时报错 此时发现数据库的备份不能用 表数据无法查询 客户Oracle 11g R2 数据库误tr
  • Map对象和普通对象的7个区别

    前言 普通对象和 ES6 的新对象 Map 都可以存储键值对 但是 它们之间有什么区别 今天来聊一聊 1 初始化与使用 普通对象可以直接使用字面量进行初始化 而 Map 需要 Map 构造函数进行初始化 如果想要有初始值 则需要传递一个数组