JS Set和Map数据结构

news2024/11/28 20:50:40

Set和Map数据结构

  • 1. Set数据结构
    • 1.1 Set 增删改查
      • 1.1.1 add() 方法
      • 1.1.2 delete()
      • 1.1.3 has()
      • 1.1.4 clear()
      • 1.1.5 size
    • 1.2 Set 遍历方法
      • 1.2.1 keys()
      • 1.2.2 values()
      • 1.2.3 entries()
      • 1.2.3 forEach()
  • 2. Map数据类型
    • 2.1 Map 增删改查
      • 2.1.1 set()
      • 2.1.2 get()
      • 2.1.3 has()
      • 2.1.4 delete()
      • 2.1.5 clear()
    • 2.2 遍历
      • 2.2.1 keys()
      • 2.2.2 values()
      • 2.2.3 entries()
      • 2.2.4 forEach()

前言:

如果要用一句来描述,我们可以说
Set是一种叫做集合的数据结构,Map是一种叫做字典的数据结构

什么是集合?什么又是字典?

集合

  • 是由一堆无序的、相关联的,且不重复的内存结构【数学中称为元素】组成的组合

字典:

  • 是一些元素的集合。每个元素有一个称作key 的域,不同元素的key 各不相同

区别?

  • 共同点:集合、字典都可以存储不重复的值
  • 不同点:集合是以[值,值]的形式存储元素,字典是以[键,值]的形式存储

1. Set数据结构

在 JavaScript 中,Set 是一种数据结构,它代表了一组唯一的值,其中每个值都必须是唯一的,不允许重复值。Set 是 ECMAScript 6 (ES6) 引入的一种内置对象,用于存储和管理这些唯一的值。

// Set本身是一个构造函数,用来生成 Set 数据结构
const s = new Set();

1.1 Set 增删改查

1.1.1 add() 方法

添加某个值,返回 Set 结构本身
当添加实例中已经存在的元素,set不会进行处理添加

s.add(1)
s.add(2)
s.add(3)
console.log('set',s);  // [ 1, 2, 3]

1.1.2 delete()

删除某个值,返回一个布尔值,表示删除是否成功

s.delete(1)
console.log('set',s); // [2, 3]

1.1.3 has()

返回一个布尔值,判断该值是否为Set的成员

s.has(3)  // true

1.1.4 clear()

清除所有成员,没有返回值

s.clear()   // []

1.1.5 size

返回长度

console.log(s.size)  // 3

1.2 Set 遍历方法

关于遍历的方法,有如下:

  • keys():返回键名的遍历器
  • values():返回键值的遍历器
  • entries():返回键值对的遍历器
  • forEach():使用回调函数遍历每个成员
let set = new Set(['red', 'green', 'blue']);

1.2.1 keys()

for (let item of set.keys()) {
  console.log(item);
}   
// red green blue

1.2.2 values()

for (let item of set.values()) {
  console.log(item);
}
// red green blue

1.2.3 entries()

for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]

1.2.3 forEach()

forEach()用于对每个成员执行某种操作,没有返回值,键值、键名都相等,同样的forEach方法有第二个参数,用于绑定处理函数的this

let set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value))
// 1 : 1
// 4 : 4
// 9 : 9

扩展运算符和Set 结构相结合实现数组或字符串去重

// 数组
let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)]; // [3, 5, 2]

// 字符串
let str = "352255";
let unique = [...new Set(str)].join(""); // "352"

实现并集、交集、和差集

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}

// (a 相对于 b 的)差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

2. Map数据类型

JavaScript 中的 Map 是一种数据结构,它可以将键-值对存储起来,并且键和值可以是任意类型。

Map 对象提供了更灵活的键的选择,可以使用对象、字符串和其他数据类型作为键,而不仅仅局限于字符串或原始值。

2.1 Map 增删改查

2.1.1 set()

let m = new Map()
m.set('edition', 6)        // 键是字符串
m.set(262, 'standard')     // 键是数值
m.set(undefined, 'nah')    // 键是 undefined
m.set(1, 'a').set(2, 'b').set(3, 'c') // 链式操作

在这里插入图片描述

2.1.2 get()

get方法读取key对应的键值,如果找不到key,返回undefined

const m = new Map();
const hello = function() {console.log('hello');};

m.set(hello, 'Hello ES6!') // 键是函数

console.log(m.get(hello))  // Hello ES6!;

console.log(m.get("world"))  // 未定义的数据打印为 undefind;

2.1.3 has()

has方法返回一个布尔值,表示某个键是否在当前 Map 对象之中

const m = new Map();

m.set('edition', 6);
m.set(262, 'standard');
m.set(undefined, 'nah');

m.has('edition')     // true
m.has('years')       // false
m.has(262)           // true
m.has(undefined)     // true

2.1.4 delete()

delete方法删除某个键,返回true。如果删除失败,返回false

const m = new Map();
m.set(undefined, 'nah');
m.has(undefined)     // true

m.delete(undefined)
m.has(undefined)       // false

2.1.5 clear()

clear方法清除所有成员,没有返回值

let map = new Map();
map.set('foo', true);
map.set('bar', false);

map.size // 2
map.clear()
map.size // 0

2.2 遍历

Map结构原生提供三个遍历器生成函数和一个遍历方法:

  • keys():返回键名的遍历器
  • values():返回键值的遍历器
  • entries():返回所有成员的遍历器
  • forEach():遍历Map 的所有成员

2.2.1 keys()

const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"

2.2.2 values()

for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"

2.2.3 entries()

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

2.2.4 forEach()

map.forEach(function(value, key, map) {
  console.log("Key: %s, Value: %s", key, value);
});
// Key: F, Value: no
// Key: T, Value: yes

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

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

相关文章

【C++从0到王者】第三十一站:map与set

文章目录 一、关联式容器二、pair键值对三、set1. set的介绍2. set的部分接口以及应用3. count4. lower_bound和upper_bound5. equal_range6. multiset容器 四、map1. map的介绍2. map的一些常见接口以及使用3. map的[]运算符重载4. 使用map改进一些题5. multimap容器 五、map和…

Laravel框架 - IOC容器详解

IOC 容器代码 好了,说了这么多,下面要上一段容器的代码了. 下面这段代码不是laravel 的源码, 而是来自一本书《laravel 框架关键技术解析》. 这段代码很好的还原了laravel 的服务容器的核心思想. 代码有点长, 小伙伴们要耐心看. …

分享VR眼镜加密播放器OEM方案

随着科技的发展,电子成品更新换代很快,用户的娱乐工具也更加多样化,从电脑、手机、平板在到现在使用越来越多的VR眼镜,给用户的体验也越来越多样。而对于内容提供商来说,内容是其竞争优势所在。那么如何做好视频在VR眼…

【Unity】【C#】【VS】如何将VS写的通用C#窗体程序修改为Unity程序

【背景】 需要将一个Visual2019写的C#用Unity改写。 Unity写窗体程序的一大优点就是美观了,看看这默认界面。 但是缺点就是启动时有个Unity过场动画。 【问题】 Unity虽然用的也是C#,但是和Visual2019的通用窗体C#采用的界面显示的库,图像处理,组成一个脚本的基本函数等…

Linux 作业

一. 题目 二.作业内容 第一题: 因老师要求上传安装后远程连接XShell截图,如下: 制作yum缓存:[rootRHEL8 ~]# yum makecache 安装gcc:[rootRHEL8 ~]# yum install gcc -y 制作快照:快照,初始 s…

《rust学习一》 fleet 配置rust环境

最近被网上的rust教徒洗脑了,尝试一下学习rust语言,首先搭建开发环境 准备工作: 安装rust,fleet 第一步:在fleet内打开空文件夹 第二步:创建项目文件 cargo new HelloWorld第三步:Rust&#x…

RFID技术在仓储物流供应链管理中的应用

仓储物流供应链管理的透明度和库存周转率成为管控的重点,为了提高仓储物流的效率和减少库存损失,RFID技术被广泛应用于仓储、分发、零售管理等各个环节,为供应链管理带来了巨大的改变和提升。 首先,采用RFID技术进行仓库物流智能化…

基于SpringBoot+Vue实现的党校培训管理系统源代码+数据库

一、简介 项目简介: 基于微服务架构的党校培训管理系统, 完整代码下载地址:党校培训管理系统 大体总结: 前端使用Vue.js框架,UI组件库使用Element UI与Ant Design Vue,后端基于Spring Boot,使…

verilog学习笔记(1)module实例化2

移位寄存器多路选择器 我的代码: module top_module ( input clk, input [7:0] d, input [1:0] sel, output [7:0] q );wire [7:0] w1;wire [7:0] w2;wire [7:0] w3;my_dff8 my_dff8_1(.clk(clk),.d(d),.q(w1));my_dff8 my_dff8_2(.clk(clk),.d(w1),.q(w2));my_d…

Learn Prompt-提供示例

目前我们与 ChatGPT 交流的主要形式是文字。提示除了指令问题的形式外,还可以包含例子。特别是当我们需要具体的输出时,提供例子可以省去我们对具体任务的解释,帮助ChatGPT更好地理解我们的确切需求,从而提供更准确,更…

如何使用高压放大器驱动高容性负载

使用高压放大器驱动高容性负载是一个具有挑战性的任务,需要仔细考虑电路设计和操作技巧。下面西安安泰Aigtek将为您介绍一些关于如何使用高压放大器驱动高容性负载的方法和注意事项。 首先,让我们了解一下高容性负载。高容性负载通常指电容值较大的负载元…

邮件数据安全案例 | 有一种遇见,叫相见恨晚

Mr.赵回忆和联通相遇的时刻,他说,用一句诗来形容恰如其分,“众里寻他千百度,蓦然回首,那人却在,灯火阑珊处” 。 中国联合网络通信集团有限公司在国内31个省(自治区、直辖市)和境外…

前后端分离毕设项目之产业园区智慧公寓管理系统设计与实现(内含源码+文档+教程)

博主介绍:✌全网粉丝10W,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业毕业设计项目实战6年之久,选择我们就是选择放心、选择安心毕业✌ 🍅由于篇幅限制,想要获取完整文章或者源码,或者代做&am…

Codeforces Round 896 (Div. 1) C. Travel Plan(树形dp+组合数学)

题目 有一棵n(1<n<1e18)个点的树&#xff0c; 点i连着2*i和2*i1两个点&#xff0c;构成一棵完全二叉树 对于每个点i&#xff0c;记其值为a[i]&#xff0c;a[i]可以取[1,m](1<m<1e5)的整数 记i到j的简单路径上的最大值为s[i][j]&#xff0c; 则一棵权值确定的树…

mysql中update更新时加条件和不加条件速度对比

测试时有时需要执行更新操作&#xff0c;想知道大量数据update时加where条件和不加where条件速度差异如何&#xff0c;正好有条件测试&#xff0c;记录一下。 数据&#xff1a;9张表&#xff0c;每张表300w条数据 一、对9张表进行单字段更新时不加条件(如&#xff1a;update …

支付功能、支付平台、支持渠道如何测试?

有学员提问&#xff1a;作为一个支付平台&#xff0c;接入了快钱、易宝或直连银行等多家的渠道&#xff0c;内在的产品流程是自己的。业内有什么比较好的测试办法&#xff0c;来测试各渠道及其支持的银行通道呢&#xff1f; 作为产品&#xff0c;我自己办了十几张银行卡方便测…

web大作业 比赛报名页面+ 团队介绍页面 制作

web大作业 比赛报名页面 团队介绍页面 制作【附源代码】 文章目录 web大作业 比赛报名页面 团队介绍页面 制作【附源代码】前言报名界面效果图如下&#xff1a;代码实现计时器效果实现&#xff08;jqueryboostrap&#xff09; 团队介绍页面模拟框代码&#xff1a;CSS代码 前言 …

android studio 找不到设备

问题描述&#xff1a; 当android studio 没有打开&#xff0c; 执行adb devices 可以查看到设备&#xff0c; 当android studio 打开&#xff0c; 执行adb devices 可以查看不到设备&#xff0c; android studio 设备管理器中也没有设备 解决方法&#xff1a; 关闭android s…

uniapp 开发 之 如何给边框添加阴影效果

uniapp 开发 之 如何给边框添加阴影效果 image.png <view style"width: 100px; height: 100px; margin: 50px; -moz-box-shadow:2px 2px 10px #06c; -webkit-box-shadow:2px 2px 10px #06c; box-shadow:2px 2px 10px #06c; ">测试边框阴影</view>css的bo…

【算法与数据结构】450、LeetCode删除二叉搜索树中的节点

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;本题首先要分析删除节点的五种情况&#xff1a; 1、没有找到节点2、找到节点 左右子树为空左子树为空…