前端JavaScript篇之map和Object的区别、map和weakMap的区别

news2024/12/24 18:18:43

目录

  • map和Object的区别
  • map和weakMap的区别

map和Object的区别

  • Object是JavaScript的内置对象，用于存储键值对。
  • Object的键必须是字符串或符号，值可以是任意类型。
  • Map是ES6引入的新数据结构，用于存储键值对。
  • Map的键可以是任意类型，值也可以是任意类型。

Object是JavaScript中的内置对象，用于存储键值对（属性和属性值）的集合。它是一种非常常见和灵活的数据结构，可以通过点符号或方括号来访问和修改属性。

Map是ES6引入的新数据结构，也用于存储键值对的集合。与Object不同的是，Map的键可以是任意数据类型，而不仅限于字符串或符号。Map提供了更多的方法来操作和遍历键值对，例如set、get、has和delete。

// 使用Object存储键值对
const obj = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
}

console.log(obj.key1) // 输出："value1"

// 使用Map存储键值对
const map = new Map()
map.set('key1', 'value1')
map.set('key2', 'value2')
map.set('key3', 'value3')

console.log(map.get('key1')) // 输出："value1"

请添加图片描述

在上述例子中，我们首先使用Object存储了一组键值对，其中键为字符串，值为字符串。我们可以使用点符号来访问对象的属性，例如obj.key1返回值为"value1"。

接下来，我们使用Map存储了相同的键值对。使用new Map()创建了一个新的Map对象，然后使用set方法来添加键值对。与Object不同的是，我们可以使用任意类型的键，例如字符串或数字。通过map.get("key1")可以获取到对应的值，返回值为"value1"。

Map和Object是两种不同的数据结构，用于存储键值对。它们之间有一些区别和特点：

  1. 键的类型：Map的键可以是任意类型，包括对象、函数、基本类型等；而Object的键只能是字符串或符号。

  2. 键值对的顺序：Map中的键值对是有序的，即按照插入顺序进行迭代；而Object中的键值对是无序的，迭代顺序不确定。

  3. 键值对的个数：Map中的键值对个数可以通过size属性获取；而Object的键值对个数需要手动计算。

  4. 迭代方式：Map可以直接使用for...of循环进行迭代，或者使用forEach方法；而Object需要先获取键的数组，然后再进行迭代。

  5. 键的唯一性：Map中的键是唯一的，不会存在重复的键；而Object中如果使用相同的键进行多次赋值，后面的值会覆盖前面的值。

  6. 性能：在频繁增删键值对的场景下，Map的性能通常会更好，而在静态数据的场景下，Object的性能可能更好。

// 使用Map存储键值对
const map = new Map()
map.set('key1', 'value1')
map.set('key2', 'value2')
map.set('key3', 'value3')

console.log(map.size) // 输出：3

// 使用Object存储键值对
const obj = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
}

let count = 0
for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    count++
  }
}

console.log(count) // 输出：3

请添加图片描述
在上述示例中，我们使用Map和Object分别存储了相同的键值对。通过size属性可以获取Map中键值对的个数，通过手动计算可以获取Object中键值对的个数，都为3。

map和weakMap的区别

当涉及到存储键值对的时候，JavaScript提供了两种不同的数据结构：Map和WeakMap。它们都有自己的特点和用途。

Map：

  • Map是一个有序的键值对集合，其中的键可以是任何类型，包括对象、函数、基本类型等。
  • Map中的键值对是通过set方法添加的，通过get方法获取对应的值。
  • Map提供了size属性来获取键值对的个数。
  • Map可以使用has方法来检查指定的键是否存在。
  • Map可以使用delete方法来删除指定的键值对。
  • Map可以使用clear方法来清空所有的键值对。
  • Map可以使用forEach方法或者for...of循环来迭代键值对。

WeakMap：

  • WeakMap也是一个键值对集合，但是它的键必须是对象。
  • WeakMap中的键值对是通过set方法添加的，通过get方法获取对应的值。
  • WeakMap没有提供size属性，也没有提供直接的迭代方法。
  • WeakMap的键是弱引用的，如果键没有被其他对象引用，垃圾回收时会自动删除对应的键值对。
  • WeakMap没有提供类似has、delete、clear等方法，因为这些方法可能会干扰垃圾回收的机制。

下面是一个使用Map和WeakMap的示例：

// 使用Map存储键值对
const map = new Map()
const key1 = { name: 'John' }
const key2 = { name: 'Jane' }

map.set(key1, 'value1')
map.set(key2, 'value2')

console.log(map.get(key1)) // 输出："value1"
console.log(map.size) // 输出：2
console.log(map.has(key2)) // 输出：true

map.delete(key1)
console.log(map.size) // 输出：1

map.clear()
console.log(map.size) // 输出：0

// 使用WeakMap存储键值对
const weakMap = new WeakMap()
const weakKey1 = { name: 'John' }
const weakKey2 = { name: 'Jane' }

weakMap.set(weakKey1, 'value1')
weakMap.set(weakKey2, 'value2')

console.log(weakMap.get(weakKey1)) // 输出："value1"

weakKey1.name = 'Mike'
console.log(weakMap.get(weakKey1)) // 输出："value1"，键对象属性修改不会导致键值对的删除

请添加图片描述

在上述示例中，我们使用Map和WeakMap分别存储了相同的键值对。通过set方法设置键值对，通过get方法获取值。

对于Map，我们可以使用任意类型的键，例如对象key1和key2，并通过set方法设置键值对，通过get方法获取值。我们还展示了size属性、has方法、delete方法和clear方法的用法。

对于WeakMap，我们同样可以使用对象作为键，例如weakKey1和weakKey2。通过set方法设置键值对，通过get方法获取值。需要注意的是，如果键没有被其他对象引用，垃圾回收时会自动删除对应的键值对。键被修改后，对应的键值对被自动删除。

Map和WeakMap是两种不同的数据结构，用于存储键值对。它们之间有一些区别和特点：

  1. 键的引用类型：Map的键可以是任意类型，包括对象、函数、基本类型等；而WeakMap的键必须是对象。

  2. 引用关系：Map中的键值对存在强引用关系，即使键没有被其他对象引用，也不会被垃圾回收；而WeakMap中的键值对存在弱引用关系，如果键没有被其他对象引用，垃圾回收时会自动删除对应的键值对。

  3. 迭代方式：Map可以直接使用for...of循环进行迭代，或者使用forEach方法；而WeakMap没有提供直接的迭代方法。

  4. 键的唯一性：Map中的键是唯一的，不会存在重复的键；而WeakMap中的键是弱引用，不同的对象可以拥有相同的键。

  5. 性能：WeakMap在某些场景下的性能可能会更好，因为它的键值对可以被垃圾回收，不会造成内存泄漏。

// 使用Map存储键值对
const map = new Map()
const key1 = { name: 'John' }
const key2 = { name: 'Jane' }

map.set(key1, 'value1')
map.set(key2, 'value2')

console.log(map.get(key1)) // 输出："value1"

// 使用WeakMap存储键值对
const weakMap = new WeakMap()
const weakKey1 = { name: 'John' }
const weakKey2 = { name: 'Jane' }

weakMap.set(weakKey1, 'value1')
weakMap.set(weakKey2, 'value2')

console.log(weakMap.get(weakKey1)) // 输出："value1"

在上述示例中，我们分别使用Map和WeakMap存储了相同的键值对。通过键获取对应的值，可以发现它们的使用方式是相似的。

对于Map，我们可以使用任意类型的键，例如对象key1和key2，并通过set方法设置键值对，通过get方法获取值。

对于WeakMap，我们同样可以使用对象作为键，例如weakKey1和weakKey2。通过set方法设置键值对，通过get方法获取值。需要注意的是，如果键没有被其他对象引用，垃圾回收时会自动删除对应的键值对。

这就是Map和WeakMap的基本区别和用法。Map适用于需要存储键值对且不需要自动删除的场景；而WeakMap适用于需要存储键值对且希望自动删除的场景。

持续学习总结记录中，回顾一下上面的内容：
Map 和 Object 都是 JavaScript 中用于存储键值对的数据结构，但它们之间有一些区别。Object 的键必须是字符串或符号，而 Map 的键可以是任何类型，包括对象和函数。Map 中的键值对是有序的，而且可以通过 size 属性获取 Map 的大小。WeakMap 只接受对象作为键，并且这些对象是弱引用的，它的值可以是任何类型。与 Map 不同的是，WeakMap 中的键值对不是可枚举的，也不能通过 size 属性获取 WeakMap 的大小。在处理大量数据时，Map 的性能比 Object 更好，而 WeakMap 的性能比 Map 更好。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1430543.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

高中数学两面角习题练习1

高中数学两面角习题练习1

用到的定理 2 第1问证明： 第2问用到的知识和例子： 二面角锐角钝角判断的快速技巧 https://www.bilibili.com/video/BV13P41157K1/?spm_id_from333.788.recommend_more_video.0&vd_source91b03ee59c462b7b3cfbd57346cf1001 叉乘的几何意义及应用 …
阅读更多...
day39 不同路径 不同路径Ⅱ

day39 不同路径 不同路径Ⅱ

题目1：62 不同路径 题目链接：62 不同路径 题意 机器人位于m*n网格的左上角每次只能向下或向右移动一步，到达网格的右下角,返回不同路径的数量 动态规划 动规五部曲 1）dp数组及下标i的含义 dp[i][j]：到达(i,j)有…
阅读更多...
2024年 复习 HTML5+CSS3+移动web 笔记 之CSS遍 第5天

2024年 复习 HTML5+CSS3+移动web 笔记 之CSS遍 第5天

第 五 天 整个网站例 5.1 准备工作 项目目录与版心 base.css 5.2 网页制作思路 5.3 header 区域-整体布局 5.4 header区域-logo 5.5 header区域-导航 index.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8">&l…
阅读更多...
代码随想录算法训练营29期Day41|LeetCode 343,96

代码随想录算法训练营29期Day41|LeetCode 343,96

文档讲解&#xff1a;整数拆分 不同的二叉搜索树 343.整数拆分 题目链接&#xff1a;https://leetcode.cn/problems/integer-break/description/ 思路&#xff1a; 题目要求我们拆分n&#xff0c;拆成k个数使其乘积和最大&#xff0c;然而题目中并没有给出k&#xff0c;所以…
阅读更多...
[python]基于opencv实现的车道线检测

[python]基于opencv实现的车道线检测

【检测原理】 一、首先进行canny边缘检测&#xff0c;为获取车道线边缘做准备 二、进行ROI提取获取确切的车道线边缘&#xff08;红色线内部&#xff09; 三、利用概率霍夫变换获取直线&#xff0c;并将斜率正数和复数的线段给分割开来 四、离群值过滤&#xff0c;剔除斜率…
阅读更多...
uniapp 高德地图显示

uniapp 高德地图显示

1. uniapp 高德地图显示 使用前需到**高德开放平台&#xff08;https://lbs.amap.com/&#xff09;**创建应用并申请Key   登录 高德开放平台&#xff0c;进入“控制台”&#xff0c;如果没有注册账号请先根据页面提示注册账号   打开 “应用管理” -> “我的应用”页面…
阅读更多...
Springboot集成Camunda并完成一条流程实例

Springboot集成Camunda并完成一条流程实例

&#x1f496;专栏简介 ✔️本专栏将从Camunda(卡蒙达) 7中的关键概念到实现中国式工作流相关功能。 ✔️文章中只包含演示核心代码及测试数据&#xff0c;完整代码可查看作者的开源项目snail-camunda ✔️请给snail-camunda 点颗星吧&#x1f618; &#x1f496;设计流程定…
阅读更多...
028 方法的重载

028 方法的重载

方法重载的定义 使用案例 public static void main(String[] args) {// 匹配到max(int a, int b)System.out.println(max(1, 3));// 匹配到max(double a, double b)System.out.println(max(1L, 3L));// 匹配到max(double a, double b, double c, double d)&#xff0c;int自动…
阅读更多...
SQL 函数（十二）

SQL 函数（十二）

SQL 函数&#xff08;十二&#xff09; 一、函数分类 1.1 单行函数 单行函数仅对单个行进行运算&#xff0c;并且每行返回一个结果。 常见的函数类型&#xff1a; 字符、数字、日期、转换 1.2 多行函数 多行函数能够操纵成组的行&#xff0c;每个行组给出一个结果&#x…
阅读更多...
【拜年神器】AI写真保姆级教程

【拜年神器】AI写真保姆级教程

1. 介绍 废话不说&#xff0c;先上图看效果 功能简介 上传几张自己的照片&#xff0c;训练之后&#xff0c;就能生成各种风格的AI写真照&#xff0c;主要有无限风格写真、固定模板写真、AI虚拟试衣、人物说话视频四个类别 无限风格写真 固定模板写真 证件照 工作照 婚纱…
阅读更多...
k8s中cert-manager管理https证书

k8s中cert-manager管理https证书

前言 目前https是刚需，但证书又很贵，虽然阿里云有免费的，但没有泛域名证书，每有一个子域名就要申请一个证书，有效期1年，1年一到全都的更换，太麻烦了。经过搜索，发现了自动更新证书神器cert-manager；当然cert-manager是基于k8s的。 安装采用Helm方式 Chart地址： ht…
阅读更多...
萝卜视频源码前后端带视频演示

萝卜视频源码前后端带视频演示

萝卜影视源码前端是用JAVA开发的全原生APP源码&#xff0c;后端用的是二次开发的苹果CMS&#xff0c;支持局域网投屏&#xff0c;视频软解硬解&#xff0c;播放器自带弹幕功能。支持解析官方视频&#xff0c;支持M3U8&#xff0c;MP4。 开屏广告&#xff0c;全局广告&#xff0…
阅读更多...
lava学习-接口

lava学习-接口

接口-Interface 1.什么是接口&#xff1f; 例&#xff1a;构造器&#xff0c;代码块在接口中统统没有&#xff0c;也不能创建对象 构造器的使用-----实现类 例&#xff1a;下图中的B类就是一个 实现类 2.接口的好处 继承只能单继承&#xff0c;而接口可以弥补类单继承的不足&am…
阅读更多...
iPad“粘贴自”字样不消失解决办法

iPad“粘贴自”字样不消失解决办法

iPad“粘贴自”字样不消失解决办法 好无语&#xff0c;写论文主要就靠iPad看资料&#xff0c;复制粘帖的时候卡死搞得我无敌焦躁&#xff0c;问了&#x1f34e;支持的客服才解决&#xff0c;方法如下&#xff1a;1.音量上键按一下 2.音量下键按一下 3.一直按开关机键直到出现苹…
阅读更多...
备战蓝桥杯---搜索（应用入门）

备战蓝桥杯---搜索（应用入门）

话不多说&#xff0c;直接看题&#xff1a; 显然&#xff0c;我们可以用BFS&#xff0c;其中&#xff0c;对于判重操作&#xff0c;我们可以把这矩阵化成字符串的形式再用map去存&#xff0c;用a数组去重现字符串&#xff08;相当于map映射的反向操作&#xff09;。移动空格先找…
阅读更多...
Nicn的刷题日常之打印水仙花数

Nicn的刷题日常之打印水仙花数

目录 1.题目描述 2.解题思路 3.解题 1.题目描述 求出0&#xff5e;100000之间的所有“水仙花数”并输出。 “水仙花数”是指一个n位数&#xff0c;其各位数字的n次方之和确好等于该数本身&#xff0c;如:153&#xff1d;1^3&#xff0b;5^3&#xff0b;3^3&#xff0c;则1…
阅读更多...
使用C#读取PDF中所有文本内容

使用C#读取PDF中所有文本内容

先安装如下包 using iTextSharp.text.pdf; using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text;namespace ReadPdfText {class Program{static void Main(string[] args){string path "0017_审判流程管理信息表2…
阅读更多...
HDMI2.1之eARC简介-Dolby Atmos和DTS:X

HDMI2.1之eARC简介-Dolby Atmos和DTS:X

文章目录 eARC目的更大的带宽更高质量音频支持对象型音频与CEC&#xff08;Consumer Electronics Control&#xff09;的兼容性&#xff1a; 适应流媒体发展Dolby AtmosDTS:X高分辨率音频更高的音频位深度和采样率低延迟音频 对象型音频格式独立对象三维定位动态音场适应性和灵…
阅读更多...
【大数据技术攻关专题】「Apache-Flink零基础入门」手把手+零基础带你玩转大数据流式处理引擎Flink（基础加强+运行原理）

【大数据技术攻关专题】「Apache-Flink零基础入门」手把手+零基础带你玩转大数据流式处理引擎Flink（基础加强+运行原理）

手把手零基础带你玩转大数据流式处理引擎Flink&#xff08;运行机制原理加深&#xff09; 前提介绍运行Flink应用运行机制Flink的两大核心组件JobManagerTaskManagerTaskSlot Flink分层架构Stateful Stream ProcessingDataStream和DataSetDataStream&#xff08;数据流&#xf…
阅读更多...
顺序表：数据结构的建筑积木

顺序表：数据结构的建筑积木

朋友们大家好啊&#xff0c;本节内容我们进入数据结构的第二节&#xff0c;顺序表有关内容&#xff0c;同步我们会学习计组原理与cpp相关知识&#xff0c;求三连啊&#xff01; 本节我们重点探讨动态顺序表关于插入数据和删除数据的多种情况的分析 顺序表 线性表顺序表静态顺序…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023