当前位置: 首页 > news >正文

js基础速成-Set、Map

集合(Set)

集合是元素的集合,只能包含唯一元素

创建一个空集合

const companies = new Set()
console.log(companies)
Set(0) {}

从数组创建集合

const languages = ['英语','芬兰语','英语','法语','西班牙语','英语','法语',
]const setOfLanguages = new Set(languages)
console.log(setOfLanguages)
Set(4) {"英语", "芬兰语", "法语", "西班牙语"}

集合是可迭代对象,我们可以迭代每个元素。

const languages = ['英语','芬兰语','英语','法语','西班牙语','英语','法语',
]const setOfLanguages = new Set(languages)for (const language of setOfLanguages) {console.log(language)
}
  英语芬兰语法语西班牙语

向集合添加元素

const companies = new Set() // 创建一个空集合
console.log(companies.size) // 0companies.add('谷歌') // 向集合添加元素
companies.add('脸书')
companies.add('亚马逊')
companies.add('甲骨文')
companies.add('微软')
console.log(companies.size) // 集合中5个元素
console.log(companies)
Set(5) {"谷歌", "脸书", "亚马逊", "甲骨文", "微软"}

我们也可以使用循环向集合添加元素。

const companies = ['谷歌', '脸书', '亚马逊', '甲骨文', '微软']
setOfCompanies = new Set()
for (const company of companies) {setOfCompanies.add(company)
}
Set(5) {"谷歌", "脸书", "亚马逊", "甲骨文", "微软"}

从集合中删除元素

我们可以使用 delete 方法从集合中删除元素。

console.log(companies.delete('谷歌'))
console.log(companies.size) // 剩下4个元素

检查集合中是否有元素

has 方法可以帮助我们检查某个元素是否存在于集合中。

console.log(companies.has('苹果')) // false
console.log(companies.has('脸书')) // true

清空集合

这将移除集合中的所有元素。

companies.clear()
console.log(companies)
Set(0) {}

下面的例子展示了如何使用集合。

const languages = ['英语','芬兰语','英语','法语','西班牙语','英语','法语',
]
const langSet = new Set(languages)
console.log(langSet) // Set(4) {"英语", "芬兰语", "法语", "西班牙语"}
console.log(langSet.size) // 4const counts = []
const count = {}for (const l of langSet) {const filteredLang = languages.filter((lng) => lng === l)console.log(filteredLang) // ["英语", "英语", "英语"]counts.push({ lang: l, count: filteredLang.length })
}
console.log(counts)
[{ lang: '英语', count: 3 },{ lang: '芬兰语', count: 1 },{ lang: '法语', count: 2 },{ lang: '西班牙语', count: 1 },
]

集合的另一个用法是计算数组中的唯一项。

const numbers = [5, 3, 2, 5, 5, 9, 4, 5]
const setOfNumbers = new Set(numbers)console.log(setOfNumbers)
Set(5) {5, 3, 2, 9, 4}

集合的并集

可以使用扩展运算符来找到两个集合的并集。让我们找出集合 A 和集合 B 的并集(A U B)。

let a = [1, 2, 3, 4, 5]
let b = [3, 4, 5, 6]
let c = [...a, ...b]let A = new Set(a)
let B = new Set(b)
let C = new Set(c)console.log(C)
Set(6) {1, 2, 3, 4, 5, 6}

集合的交集

可以使用 filter 方法找到两个集合的交集。让我们找出集合 A 和集合 B 的交集(A ∩ B)。

let a = [1, 2, 3, 4, 5]
let b = [3, 4, 5, 6]let A = new Set(a)
let B = new Set(b)let c = a.filter((num) => B.has(num))
let C = new Set(c)console.log(C)
Set(3) {3, 4, 5}

集合的差集

可以使用 filter 方法找到两个集合之间的差集。让我们找出集合 A 和集合 B 的差集(A \ B)。

let a = [1, 2, 3, 4, 5]
let b = [3, 4, 5, 6]let A = new Set(a)
let B = new Set(b)let c = a.filter((num) => !B.has(num))
let C = new Set(c)console.log(C)
Set(2) {1, 2}

映射(Map)

创建一个空映射

const map = new Map()
console.log(map)
Map(0) {}

从数组创建映射

countries = [['芬兰', '赫尔辛基'],['瑞典', '斯德哥尔摩'],['挪威', '奥斯陆'],
]
const map = new Map(countries)
console.log(map)
console.log(map.size)
Map(3) {"芬兰" => "赫尔辛基", "瑞典" => "斯德哥尔摩", "挪威" => "奥斯陆"}
3

向映射添加值

const countriesMap = new Map()
console.log(countriesMap.size) // 0
countriesMap.set('芬兰', '赫尔辛基')
countriesMap.set('瑞典', '斯德哥尔摩')
countriesMap.set('挪威', '奥斯陆')
console.log(countriesMap)
console.log(countriesMap.size)
Map(3) {"芬兰" => "赫尔辛基", "瑞典" => "斯德哥尔摩", "挪威" => "奥斯陆"}
3

从映射中获取值

console.log(countriesMap.get('芬兰'))
赫尔辛基

检查映射中的键

使用 has 方法检查映射中是否存在某个键。返回 truefalse

console.log(countriesMap.has('芬兰'))
true

通过循环获取映射中的所有值。

for (const country of countriesMap) {console.log(country)
}
(2) ["芬兰", "赫尔辛基"]
(2) ["瑞典", "斯德哥尔摩"]
(2) ["挪威", "奥斯陆"]
for (const [country, city] of countriesMap) {console.log(country, city)
}
芬兰 赫尔辛基
瑞典 斯德哥尔摩
挪威 奥斯陆

相关文章:

js基础速成-Set、Map

集合(Set) 集合是元素的集合,只能包含唯一元素 创建一个空集合 const companies new Set() console.log(companies)Set(0) {}从数组创建集合 const languages [英语,芬兰语,英语,法语,西班牙语,英语,法语, ]const setOfLanguages new …...

手机软件何时统一——桥接模式

文章目录 手机软件何时统一——桥接模式凭什么你的游戏我不能玩紧耦合的程序演化合成/聚合复用原则松耦合的程序桥接模式桥接模式基本代码 手机软件何时统一——桥接模式 凭什么你的游戏我不能玩 时间:5月31日20点  地点:大鸟房间  人物…...

【Nacos 架构 原理】服务发现模块之Nacos注册中心服务数据模型

文章目录 服务(Service)和服务实例(Instance)定义服务服务元数据定义实例实例元数据持久化属性 集群定义集群 生命周期服务的生命周期实例的生命周期集群的生命周期元数据的生命周期 服务(Service)和服务实…...

基于微信小程序爱心领养小程序设计与实现(源码+参考文档+定制开发)

博主介绍: ✌我是阿龙,一名专注于Java技术领域的程序员,全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师,我在计算机毕业设计开发方面积累了丰富的经验。同时,我也是掘金、华为云、阿里云、InfoQ等平台…...

【数据库】 MongoDB 用户分配新的角色和权限

在 MongoDB 中,可以通过简单的命令为用户分配新的角色和权限。这对于调整用户的访问能力和管理数据库安全至关重要。以下是如何为用户分配新的角色和权限的详细步骤。 1. 使用 MongoDB Shell 分配角色 1.1 修改用户角色 要为现有用户分配新的角色,可以…...

加速 Python for 循环

在 Python 编程中,for 循环是开发者常用的工具之一,但它的执行速度经常让人感到不满。幸运的是,有许多方法可以显著提高 for 循环的效率。 本文将介绍几种简单而高效的优化技巧,帮助你加速Python for 循环,速度提升从…...

计算机毕业设计 基于Python国潮男装微博评论数据分析系统的设计与实现 Django+Vue 前后端分离 附源码 讲解 文档

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点…...

React 表单与事件

React 表单与事件 React 是一个用于构建用户界面的 JavaScript 库,它通过组件化的方式来提高开发效率和代码的可维护性。在 React 应用中,表单和事件处理是核心功能之一,它们允许用户与应用程序进行交互。本文将深入探讨 React 中的表单处理…...

Appium独立测试自动化初始化脚本

1、查看环境初始化参数 确保appium已经开起来了,设置ip ,并点击启动 打开夜神模拟器,点击工具--设置 最下面的版本说明,双击进去 版本号这里再去单击。 直到进入到开发者模式。 可能我们不是开发者模式打开的状态,所以软件访问模…...

Nginx反向代理配置支持websocket

一、官方文档 WebSocket proxying 为了将客户端和服务器之间的连接从HTTP/1.1转换为WebSocket,使用了HTTP/1.1中可用的协议切换机制(RFC 2616: Hypertext Transfer Protocol – HTTP/1.1)。 然而,这里有一个微妙之处:由于“升级”…...

C# 游戏引擎中的协程

前言 书接上回,我谈到了Unity中的协程的重要性,虽然协程不是游戏开发“必要的”,但是它可以在很多地方发挥优势。 为了在Godot找回熟悉的Unity协程开发手感,不得不自己做一个协程系统,幸运的是,有了Unity的…...

如何封装微信小程序中的图片上传功能

文章目录 前言一、需求分析与设计思路二、上传图片功能封装三、页面调用示例四、功能改进与扩展4.1 压缩图片4.2 上传进度4.3 重试机制 五、总结 前言 在微信小程序开发中,图片上传功能是一个十分常见的需求,不管是社交分享、商城中的商品图片上传&…...

被问界/理想赶超!奔驰CEO再度“出马”,寻找中国外援

来自中国车企的全方位、持续施压,让大部分外资车企开始寻求更多的本地化合作来实现技术升级。传统豪华品牌也同样如此。 本周,知情人士透露,梅赛德斯奔驰首席执行官Ola Kllenius计划再次访问中国,目的是进一步寻求和扩大与本地技术…...

魔改xjar支持springboot3,

jar包加密方案xjar, 不支持springboot3。这个发个魔改文章希望大家支持 最近公司需要将项目部署在第三方服务器,于是就有了jar包加密的需求,了解了下目前加密方案现况如下: 混淆方案,就是在代码中添加大量伪代码,以便隐藏业务代…...

python json文件读写

在Python中处理JSON文件是一个常见的任务。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。Python提供了内置的json模块来帮助我们读取和写入JSON格式的数据。 如何读…...

Android常用C++特性之std::find_if

声明:本文内容生成自ChatGPT,目的是为方便大家了解学习作为引用到作者的其他文章中。 std::find_if 是 C 标准库中的一个算法,用于在给定范围内查找第一个满足特定条件的元素。它接受一个范围(由迭代器指定)和一个谓词…...

19 vue3之自定义指令Directive按钮鉴权

directive-自定义指令(属于破坏性更新) Vue中有v-if,v-for,v-bind,v-show,v-model 等等一系列方便快捷的指令 今天一起来了解一下vue里提供的自定义指令 Vue3指令的钩子函数 created 元素初始化的时候beforeMount 指令绑定到元素后调用 只调用一次mounted 元素插入父级dom…...

数据资产新范式,URP城市焕新平台东博会首发!

城市数据资产蕴藏着巨大的宝藏。今年1月,国家数据局印发《“数据要素”三年行动计划(2024—2026年)》,将“数据要素智慧城市”上升为“数据要素”计划的重要部分,加速释放城市数据资产价值。 高质量发展以数据要素驱动…...

儿童乐园软件下载安装 佳易王游乐场会员扣次管理系统操作教程

一、前言 儿童乐园软件下载安装 佳易王游乐场会员扣次管理系统操作教程 软件为绿色免安装版,已经内置数据库,不需再安装数据库文件,软件解压即可。 二、软件程序教程 1、软件可同时管理多个项目,项目设置方法如图,点…...

windows下 Winobj.exe工具使用说明c++

1、winobj.exe工具下载地址 WinObj - Sysinternals | Microsoft Learn 2、接下来用winobj.exe查看全局互斥&#xff0c;先写一个小例子 #include <iostream> #include <stdlib.h> #include <tchar.h> #include <string> #include <windows.h>…...

跨域突围与全栈架构演进:从Vite本地代理到Nginx部署+Next.js BFF层实战

摘要&#xff1a;前面10篇博客&#xff0c;我们从SPA架构、React核心Hook、TS类型系统、组件化封装、性能优化&#xff0c;一步步吃透了中后台系统的前端开发全流程&#xff0c;完成了从前端入门到熟练开发的进阶。但想要从“只会写页面的码农”&#xff0c;升级为“懂架构、懂…...

4步实现Obsidian插件全中文显示:从技术原理到实践指南

4步实现Obsidian插件全中文显示&#xff1a;从技术原理到实践指南 【免费下载链接】obsidian-i18n 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-i18n Obsidian作为一款强大的知识管理工具&#xff0c;其生态系统依赖于丰富的第三方插件扩展功能。然而&#…...

Windows HEIC缩略图终极指南:3分钟让iPhone照片在Windows完美预览

Windows HEIC缩略图终极指南&#xff1a;3分钟让iPhone照片在Windows完美预览 【免费下载链接】windows-heic-thumbnails Enable Windows Explorer to display thumbnails for HEIC files 项目地址: https://gitcode.com/gh_mirrors/wi/windows-heic-thumbnails 你是不是…...

PyTorch 2.8镜像部署教程:从零配置到运行Llama3-70B 4bit量化推理完整指南

PyTorch 2.8镜像部署教程&#xff1a;从零配置到运行Llama3-70B 4bit量化推理完整指南 1. 环境准备与快速部署 在开始之前&#xff0c;请确保您的硬件配置满足以下最低要求&#xff1a; 显卡&#xff1a;NVIDIA RTX 4090D 24GB显存内存&#xff1a;120GB以上存储&#xff1a…...

基于STM32F103与HAL库的总线舵机多模式运动控制实战

1. STM32F103与HAL库开发环境搭建 第一次接触STM32F103和HAL库的朋友可能会觉得有点懵&#xff0c;其实搭建开发环境比你想象中简单多了。我当初用STM32CubeMX配置项目时踩过不少坑&#xff0c;现在把这些经验都分享给你。 首先得准备好硬件&#xff0c;你需要一块STM32F103开发…...

tmux快速上手指南:3个核心命令与1个关键快捷键解析

1. 为什么你需要tmux&#xff1f; 如果你经常在服务器上工作&#xff0c;肯定遇到过这样的场景&#xff1a;正在跑一个耗时很长的任务&#xff0c;突然网络波动导致SSH连接断开&#xff0c;所有进程都被终止&#xff0c;几个小时的成果瞬间消失。这种时候&#xff0c;tmux就是你…...

基于关键链方法的遗传算法求解项目调度问题

一、问题背景与核心思想 项目调度问题&#xff08;Project Scheduling Problem, PSP&#xff09;是在满足活动逻辑关系&#xff08;紧前约束&#xff09;和资源约束&#xff08;如人力、设备&#xff09;的前提下&#xff0c;确定各活动开始/结束时间&#xff0c;以最小化项目工…...

OpenClaw+nanobot技能开发:从零编写自定义文件处理器

OpenClawnanobot技能开发&#xff1a;从零编写自定义文件处理器 1. 为什么需要自定义文件处理技能 上周我整理项目文档时&#xff0c;遇到了一个典型问题&#xff1a;需要将数百个Markdown文件按照"日期-标题"格式批量重命名。手动操作不仅耗时&#xff0c;还容易出…...

系统提示msvcp140.dll丢失vcruntime140.dll丢失msvcr100.dll丢失mfc140u.dll丢失 怎么办?其他DLL错误修复

游戏文件打不开&#xff1f;DLL文件缺失&#xff1f;电脑崩溃&#xff1f;DirectX 轻松修复&#xff01;游戏运行库修复文件缺失软件必备安装工具&#xff0c; 这个DirectX 运行库修复工具&#xff0c;一键完成dll缺失修复、解决99.99%程序故障、闪退、卡顿等常见问题,轻松解决…...

NaViL-9B实战手册:健康检查API与服务异常定位全流程

NaViL-9B实战手册&#xff1a;健康检查API与服务异常定位全流程 1. 平台概览 NaViL-9B是由专业AI研究机构开发的原生多模态大语言模型&#xff0c;能够同时处理纯文本问答和图片理解任务。该模型特别针对中文场景优化&#xff0c;支持中英文混合输入&#xff0c;为开发者提供…...