ES6之Map和Set有什么不同?

news2025/2/28 17:22:42

一、Map

1.定义

Map是ES6提供的一种新的数据结构,它是键值对的集合,类似于对象,但是键的范围不限于字符串,各种类型的值都可以当做键。

Object结构是“字符串-值”的对应,Map结构则是“值-值”的对应 

 2.代码示例

Map本身是一个构造函数,先来生成一个Map数据结构,从打印的结果就可以看出,Map实例有以下属性和方法:

size、set()、get()、has()、delete()、clear()、keys()、values()、entries()、forEach()

const map = new Map()
console.log(map, 'newMap');

2.1存储数据 set()

格式为set(key,value),如果key对应的value已经有值,就会被更新;没有值就存储新的“键-值”对,并且key可以是任何数据类型。

	// 1.1 key为string
    map.set('test', 1)
    // 1.2 key 为number
	map.set(999, '数字')
	// 1.3 key 为function
    const temp = function() {}
	map.set(temp, '这是函数')
	// 1.4 key 为undefined
	map.set(undefined, '这是undefined')
    // 1.5 key 为null
	map.set(null, '这是null')
	// 1.6 key 为boolean
	map.set(false, '假')
	// 1.7 链式写法
	map.set('测试', '测试value').set(2, 22222222).set(true, '真')

2.2获取数据 get()

格式为get(key),但不能使用链式写法,会报错

  // 打印出来看结果--->与上面存储的数据一一对应
  console.log(map.get('test'));
  console.log(map.get(999));
  console.log(map.get(temp));
  console.log(map.get(undefined));
  console.log(map.get(null));
  console.log(map.get(false));
  console.log(map.get('测试'));
  console.log(map.get(2));
  console.log(map.get(true));

2.3 查看map中的成员总数 size属性

返回值为number

	console.log(map.size); // 9

2.4判断某个key(键)是否在Map中 has()

返回值为number

	console.log(map.has('test'), '是否存在test');
	console.log(map.has('test1'), '是否存在test1');

2.5删除某个key(键) delete()

返回值为bollean 删除成功true,删除失败false

	console.log(map.delete('test'), '是否删除成功'); // true

2.6清除所有成员 clear()

没有返回值

	map.clear()
	console.log(map, '所有map');

2.7遍历方法:keys()、values()、entries()、forEach()

	// 7.1 返回键名的遍历器->keys()
	for (let key of map.keys()) {
		console.log(key, 'key');
	}

	// 7.2 返回键值的遍历器->values()
	for (let value of map.values()) {
		console.log(value, 'value');
	}

	// 7.3 返回所有成员的遍历器->entries()
	for (let item of map.entries()) {
		console.log(item, 'item为数组');
	}

	// 7.4 遍历Map的所有成员->forEach()
	map.forEach(function(value, key, map) {
		console.log(value, key, 'value + key');
		console.log(map, 'map中的所有成员');
	})

二、Set

1.定义

Set是Es6提供的一种新的数据结构,它类似于数组,又不同数组,因为它成员的值都是唯一的。

利用Set值唯一的特性,Set可以用来做数组去重,并且Set中的值会自动排序

2.代码示例

Set本身也是一个构造函数,先来生成一个Set数据结构,从打印的结果就可以看出,Set实例有以下属性和方法:

size、add()、has()、delete()、clear()、keys()、values()、entries()、forEach()

	const set = new Set()

2.1存储数据 add()

格式为add(value) ;返回值为Set本身,可以使用链式写法;但由于set中的值唯一,重复添加会被直接过滤

	set.add(0).add(1).add(1).add(2).add(2)
	console.log(set.add(0).add(1).add(1).add(2).add(2).add(3));

2.2判断某个值是否在Set中has()

返回值为bollean

	console.log(set.has(0)); // true
	console.log(set.has(99)); // false

2.3删除数据 delete()

返回值为bollean 删除成功true,删除失败false

	console.log(set.delete(0), '是否删除成功');
	console.log(set, '删除后数据');

2.4清除所有成员 clear()

没有返回值

	set.clear()
	console.log(set, '清除后的set');

2.5遍历方法:keys()、values()、entries()、forEach()

	// 5.1 返回键名的遍历器->keys()
	for (let key of set.keys()) {
		console.log(key, 'key');
	}

	// 5.2 返回值的遍历器->values()
	for (let value of set.values()) {
		console.log(value, 'value');
	}

	// 5.3 返回遍历器->entries()
	for (let item of set.entries()) {
		console.log(item, 'item为数组');
	}

	// 5.4 遍历Map的所有成员->forEach()
	set.forEach(function(value, key, set) {
		console.log(value, key, 'forEach');
		console.log(set, 'set中的所有成员');
	})

三、Set和Map的对比

1.相同点:

都可以通过for... of进行遍历

2.不同点:

1.定义:

Set是Es6提供的一种新的数据结构,它类似于数组,又不同数组,因为它成员的值都是唯一的。
Map也是Es6提供的一种新的数据结构,它是键值对的集合,类似于对象,但是键的范围不限于字符串,各种类型的值都可以当做键。也就是说,Object结构是“字符串—值”的对应,Map结构则是“值—值”的对应。

2.Map可以通过get方法获取值,但Set不可以,因为Set只有值

3.利用Set值唯一的特性,Set可以用来做数组去重,并且Set中的值会自动排序;Map没有格式限制,可以用来做数据存储

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

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

相关文章

【Linux】Linux环境配置安装

目录 一、双系统(特别不推荐) 安装双系统的缺点: 安装双系统优点(仅限老手): 二、虚拟机centos7镜像(较为推荐推荐) 虚拟机的优点: 虚拟机的缺点: ​ …

3dsmax模型烘焙光照贴图并导入unity流程详解

目录 前言 软件环境 前置知识储备 一、模型场景搭建 二、模型材质处理 三、vray渲染准备 四、烘焙至贴图 五、unity场景准备 六、贴图与材质 前言 该流程针对某些固定场景(模型发布、无法使用实时渲染引擎等)情况下的展示,本文记录烘…

高云FPGA系列教程(9):cmd-parser串口命令解析器移植

文章目录 [toc]cmd-parser库简介cmd-parser库源码获取GW1NSR-4C移植cmd-parser实际测试cmd-parse命令解析器优化 本文是高云FPGA系列教程的第9篇文章。 上一篇文章介绍片上ARM Cortex-M3硬核处理器串口外设的使用,演示轮询方式和中断方式接收串口数据,并…

数据导入hudi报错,错将字段写到hdfs路径上

报错信息 Error trying to save partition metadata (this is okay, as long as atleast 1 of these succced), file:/qiche/hudi_table/冬天续航要打个八折的样子,能接受。高速相对市区还要耗电一些。不过这个车最主要是也就是在市区里面跑,而且最多会…

Unity-Input System新输入系统插件学习

1.键盘、鼠标操作 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.InputSystem; using UnityEngine.UI;public class NewInputSystem : MonoBehaviour {public float SpaceKeyValue;public float RightMouseValue;public…

NExT-GPT: Any-to-Any Multimodal LLM论文笔记

论文https://arxiv.org/pdf/2309.05519.pdf代码https://github.com/NExT-GPT/NExT-GPT/tree/main 1. Motivation 现有的多模态大模型大都只是支持输入端的多模态(Text、Image、Video、Audio等),但是输出端都是Text。也有一些现有的输入输出都…

Linux服务器自定义登陆提示信息

背景 最近在搭建zookeeper和应用服务环境,需要配置很多东西,然后不同服务器的文件路径之类的东西可能会有一些不同,比较麻烦,就准备给每个服务器配置一个登陆提示,让每一个登陆的用户能很快了解配置信息和文件路径。 …

Java 调用 GitLabAPI 获取仓库里的文件件 提交记录

1. 需求 项目组 需要做统计,获取每个开发人员的代码提交次数,提交时间,提交人等等,因代码在GitLab上管理,所以需要调用GitLabAPI来获取。 2. 开发 API官网:https://docs.gitlab.com/ee/api/ 2.1 创建自…

centos设置固定ip

ip addr查看是哪张网卡我这里是 编辑 设置

QT 绘画功能的时钟

.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPaintEvent> #include <QDebug> //信息调试类 #include <QPainter> #include <QPixmap> //图像引擎类 #include <QTime> #include <QTimer> …

FPGA设计时序约束一、主时钟与生成时钟

​目录 一、主时钟create_clock 1.1 定义 1.2 约束设置格式 1.3 Add this clock to the existing clock 1.4 示例 1.5 差分信号 二、生成时钟generate_clock 2.1 定义 2.2 格式 2.2.1 by clock frequency 2.2.2 by clock edges 2.2.3 示例 2.2.4 自动生成时钟 2.…

看完这篇 教你玩转渗透测试靶机Vulnhub——Grotesque:3.0.1

Vulnhub靶机Grotesque:3.0.1渗透测试详解 Vulnhub靶机介绍&#xff1a;Vulnhub靶机下载&#xff1a;Vulnhub靶机安装&#xff1a;①&#xff1a;信息收集&#xff1a;②&#xff1a;漏洞发现&#xff1a;③&#xff1a;LFI漏洞利用(本地文件包含漏洞)&#xff1a;④&#xff1a…

go语言初学(备忘)

1、安装 2 路径配置 C:\Program Files\Go\bin 3新建一个工程 4、下载VSCode 并安装插件 创建一个调试文件 在main目录下新建一个test.go脚本 package main import "fmt" func main() { fmt.Println("Hi 1111") fmt.Println("testasdf") } 断点…

【递归方式,流程回路检测】

背景&#xff1a;后置流程。例如&#xff1a;task1配置后置流程task2&#xff0c;task3。task3配置后置流程task4 问题&#xff1a;需要解决的问题配置时候防止回路&#xff0c;造成死循环&#xff1a;task1配置后置流程task2&#xff0c;task2配置后置流程task1 import jav…

Spring Cloud Gateway快速入门(二)——断言工厂

文章目录 前言1. 什么是Gateway断言工厂2. 为什么要使用断言2.1. 调试和开发&#xff1a;2.2. 防御性编程&#xff1a;2.3. 文档和可读性&#xff1a;2.4. 测试&#xff1a; 3. 常用的Gateway断言工厂3.1 Path断言工厂3.2 Method断言工厂3.3 Header断言工厂3.4 时间断言工厂 4.…

OpenHarmony应用程序包整体说明

用户应用程序泛指运行在设备的操作系统之上&#xff0c;为用户提供特定服务的程序&#xff0c;简称“应用”。一个应用所对应的软件包文件&#xff0c;称为“应用程序包”。 OpenHarmony提供了应用程序包开发、安装、查询、更新、卸载的管理机制&#xff0c;方便开发者开发和管…

C# PaddleDetection 安全帽检测

效果 项目 代码 using OpenCvSharp; using OpenCvSharp.Extensions; using Sdcb.PaddleDetection; using Sdcb.PaddleInference; using System; using System.Drawing; using System.Text; using System.Windows.Forms; using YamlDotNet; using static System.Windows.Forms…

jvm-sandbox-repeater源码解析-配置管理

一、配置初见 源码里提供的控制台截图如下&#xff1a;&#xff08;怎么搭建自己去百度&#xff09; 从中取出对应的配置如下&#xff1a; { "degrade": false, //阻断能力 "exceptionThreshold": 1000, //异常采样率 "httpEntrancePatterns&qu…

RuoYi-Vue 新增子module模块,接口报404

新建maven子模块 参考若依添加子模块 解决接口报404 官方用例没有父版本号 需要在ruoyi-admin加上父版本号

淘宝分布式文件存储系统( 三 ) -TFS

淘宝分布式文件存储系统( 三 ) ->>TFS 目录 : 文件重新映射的接口介绍文件映射 mmap_file.cpp的实现进行测试 文件重新映射 (增加 或者 减少 文件映射区域的大小) mremap() 函数的原型如下 #include <sys/mman.h> void *mremap( void * old_address , size_…