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个区别 的相关文章

  • 将鼠标悬停时的鼠标光标更改为锚状样式

    如果我将鼠标悬停在div鼠标光标将更改为 HTML 锚点中的光标 我怎样才能做到这一点 假设你的div has an id myDiv 将以下内容添加到您的 CSS 中 这cursor pointer指定光标应与用于锚点 超链接 的手形图标
  • Javascript 函数查找数字的倍数

    创建一个名为的函数multiplesOf 它将接受两个参数 第一个参数是数字数组 第二个参数是数字 该函数应返回一个新数组 该数组由参数数组中的每个数字组成 该数字是参数数字的倍数 So multiplesOf 5 6 7 8 9 10 3
  • 是否存在 IsCallable 为 false 但 IsConstructor 为 true 的 JS 对象?

    ECMAScript 规范函数可调用 https www ecma international org ecma 262 6 0 index html sec iscallable当且仅当其参数具有 Call 内部方法时返回 true 它在
  • Javascript Promise“then”始终运行,即使 Promise 未能执行

    我希望当调用第二个 then 时不执行第三个 then 但是 即使 Promise 被拒绝 调用第二个 then 并且代码返回 rejected 然后返回 undefined 它仍然调用第三个 then 如何不运行第三个 then 这样 未
  • Three.js:缩放几何图形后错误的 BoundingBox

    在我的场景中 我有一个简单的立方体 var test new THREE Mesh new THREE CubeGeometry 10 10 10 new THREE MeshBasicMaterial scene add test 该立方
  • 使用 JavaScript 禁用第三方 cookie

    我正在努力根据所有在欧盟运营的公司的数据保护规则实施新的 Cookie 政策合规性 根据该规则 用户在使用任何网站时必须能够拒绝 接受除必需的 Cookie 之外的所有内容 在我客户的网站中 我可以看到正在存储以下第三方 cookie ga
  • 摩卡 - Chai Karma“套件未定义”

    我对 jscript tdd 很陌生 遇到了问题 希望有人能告诉我我在做什么 在浏览器中运行测试 通过 HTML 文件 一切正常 通过节点和业力运行它们我得到以下异常 我想在 node js 主机的 karma 中使用 Mocha 和 Ch
  • 可以在初始 DOM 解析期间/之前修改 DOM 吗?

    是否可以在初始 DOM 解析期间或之前修改 DOM 或者我是否必须等到 DOM 被解析和构建之后才能与其交互 更具体地说 是否有可能阻止 DOM 中的脚本元素使用用户脚本 内容脚本或 Chrome 或 Firefox 中的类似脚本运行 在解
  • 隐藏 Div 的父级

    我只是想隐藏父divcomments section div class content content green div div div 我试过这个 document getElementById comments section pa
  • 设置 cookie 时中断 JavaScript 执行

    当设置 cookie 时 是否可以始终中断浏览器开发人员工具中的 javascript 执行 无需显式设置 JS 断点 document cookie 在 html head 块的开头添加此代码片段效果很好
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • Chrome 扩展程序在代码中使用 client_secret

    我正在开发具有自己的 oAuth 授权的 Google Chrome 扩展 当然 我必须使用 client id 和 client secret 作为请求令牌 有什么办法可以向用户隐藏这些数据吗 由于此请求只是 javascript 源代码
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 检查 jQuery 1.7 中是否存在基于文本的选择选项

    所以我有以下 HTML 片段
  • Firebase 函数 onWrite 未被调用

    我正在尝试使用 Firebase 函数实现一个触发器 该触发器会复制数据库中的一些数据 我想观看所有添加的内容votes user vote 结构为 我尝试的代码是 const functions require firebase func
  • Three.js 各种大小的粒子

    我是 Three js 的新手 正在尝试找出添加 1000 个粒子的最佳方法 每个粒子都有不同的大小和颜色 每个粒子的纹理是通过绘制画布创建的 通过使用粒子系统 所有粒子都具有相同的颜色和大小 为每个粒子创建一个粒子系统是非常低效的 有没有
  • 对于只触及我的工作表的 Google 表格脚本,收到“此应用程序未经验证”

    我正在编写一个 Google Sheets 脚本 我只想访问与 gs 文件关联的同一电子表格中的数据 似乎我应该有权在自己的电子表格中运行脚本 但是每当我运行一个函数时 我都会得到一个This app isn t verified信息 我该
  • 如何用另一个响应替换窗口的 URL 哈希?

    我正在尝试使用替换方法更改哈希 URL document location hash 但它不起作用 function var anchor document location hash this returns me a string va
  • JavaScript 相对路径

    在第一个 html 文件中 我使用了一个变量类别链接 var categoryLinks Career prospects http localhost Landa DirectManagers 511 HelenaChechik Dim0
  • 如何确定所有角度2分量都已渲染?

    当所有 Angular2 组件完成渲染时 是否会触发一个角度事件 For jQuery 我们可以用 function 然而 对于 Angular2 当domready事件被触发 html 只包含角度组件标签 每个组件完成渲染后 domrea

随机推荐

  • 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 构造函数进行初始化 如果想要有初始值 则需要传递一个数组