转换的艺术:如何在JavaScript中序列化Set为Array、Object及逆向操作
先认识一下Set
概念:存储唯一值的集合,元素只能是值,没有键与之对应。Set中的每个值都是唯一的。
特性:
值的集合,值可以是任何类型。
值的唯一性,每个值只能出现一次。
保持了插入顺序。
不支持通过索引来访问元素。
时间复杂度:
查找、插入、删除操作通常是O(1)。
适用场景:
- 去重
let string = "banana";
let uniqueChars = [...new Set(string)].join('');
console.log(uniqueChars);let arr = [1, 2, 3, 4, 5, 5, 6, 7, 8, 9, 10];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr)// [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
- 存储不可重复的数据,如游戏中的玩家名单
const playerSet = new Set()playerSet.add('player1')
playerSet.add('player2')
playerSet.add('player3')// 尝试添加重复的元素,不会生效
playerSet.add('player1')console.log(playerSet)// Set(3) { 'player1', 'player2', 'player3' }console.log(playerSet.has('player2'))// trueplayerSet.delete('player2')
console.log(playerSet)// Set(2) { 'player1', 'player3' }
Set转换为数组的方法
- 扩展运算符(Spread Operator)
const mySet = new Set([1, 2, 3]);
const myArray = [...mySet];
console.log(myArray);// [ 1, 2, 3 ]
- Array.from()方法
const mySet = new Set([1, 2, 3]);
const myArray = Array.from(mySet);
console.log(myArray);// [ 1, 2, 3 ]
- Array.prototype.forEach()方法
const mySet = new Set([1, 2, 3]);
const myArray= [];
mySet.forEach((value) => myArray.push(value));
console.log(myArray);// [ 1, 2, 3 ]
推荐使用扩展运算符和Array.from()方法,最直观和简洁的选择。
Set转换为Object的方法
- 使用扩展运算符(Spread Operator)和Object.fromEntries()方法
const mySet = new Set([1, 2, 3]);
const myObject = Object.fromEntries([...mySet].map(value => [value, value]));
console.log(myObject);// { '1': 1, '2': 2, '3': 3 }
- reduce() 方法:
const mySet = new Set([1, 2, 3]);
const myObject = [...mySet].reduce((obj, value) => {obj[value] = value;return obj;
}, {});
console.log(myObject);// { '1': 1, '2': 2, '3': 3 }
- forEach() 方法:
const mySet = new Set([1, 2, 3]);
const myObject = {};
mySet.forEach(value => {myObject[value] = value;
});
console.log(myObject);// { '1': 1, '2': 2, '3': 3 }
扩展运算符(Spread Operator)和 Object.fromEntries() 方法简洁、直观,易于理解,是ES6中推荐的做法。
reduce() 方法倾向于函数式编程或者想要在单个步骤中完成转换。
对于简单的情况,forEach() 方法可能更易于理解和实现。
数组转换为Set的方法
Set构造函数
const myArray = [1, 2, 3];
const mySet = new Set(myArray);
console.log(mySet);// Set(3) { 1, 2, 3 }
使用Set构造函数即可。
相关文章:
转换的艺术:如何在JavaScript中序列化Set为Array、Object及逆向操作
先认识一下Set 概念:存储唯一值的集合,元素只能是值,没有键与之对应。Set中的每个值都是唯一的。 特性: 值的集合,值可以是任何类型。 值的唯一性,每个值只能出现一次。 保持了插入顺序。 不支持通过索引来…...
万能门店小程序管理系统存在前台任意文件上传漏洞
免责声明: 本文旨在提供有关特定漏洞的深入信息,帮助用户充分了解潜在的安全风险。发布此信息的目的在于提升网络安全意识和推动技术进步,未经授权访问系统、网络或应用程序,可能会导致法律责任或严重后果。因此,作者不对读者基于本文内容所采取的任何行为承担责任。读者在…...
详解Rust泛型用法
文章目录 基础语法泛型与结构体泛型约束泛型与生命周期泛型与枚举泛型和Vec静态泛型(const 泛型)类型别名默认类型参数Sized Trait与泛型常量函数与泛型泛型的性能 Rust是一种系统编程语言,它拥有强大的泛型支持,泛型是Rust中用于实现代码复用和类型安全…...
移远通信携手紫光展锐,以“5G+算力”共绘万物智联新蓝图
11月26日,2024紫光展锐全球合作伙伴大会在上海举办。作为紫光展锐重要的合作伙伴,移远通信应邀参会。 在下午的物联网生态论坛上,移远通信产品总监胡勇华作题为“5G与算力双擎驱动 引领智联新未来”的演讲,深度剖析了产业发展的趋…...
Mybatis:Mybatis快速入门
Mybatis的官方文档是真的非常好!非常好! 点一下我呗:Mybatis官方文档 MyBatis 是一款优秀的持久层框架,它支持自定义 SQL、存储过程以及高级映射。MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。MyBatis 可…...
微信小程序用户登录页面制作教程
微信小程序用户登录页面制作教程 前言 在微信小程序的开发过程中,用户登录是一个至关重要的功能。通过用户登录,我们可以为用户提供个性化的体验,保护用户数据,并实现更复杂的业务逻辑。本文将为您详细讲解如何制作一个用户登录页面,包括设计思路、代码示例以及实现细节…...
python+django自动化平台(一键执行sql) 前端vue-element展示
一、开发环境搭建和配置 pip install mysql-connector-pythonpip install PyMySQL二、django模块目录 dbOperations ├── __init__.py ├── __pycache__ │ ├── __init__.cpython-313.pyc │ ├── admin.cpython-313.pyc │ ├── apps.cpython-313.pyc │ …...
JavaScript学习总结
前言 JavaScript的学习花的时间比较长,如何进行正确的学习?今天进行总结与整理。 首先,明确JavaScript是什么?它的结构框架是什么,有哪些操作与组成部分。 其次,通过案例实践,清楚达到什么效果…...
Python 3 教程第22篇(数据结构)
Python3 数据结构 本章节我们主要结合前面所学的知识点来介绍Python数据结构。 列表 Python中列表是可变的,这是它区别于字符串和元组的最重要的特点,一句话概括即:列表可以修改,而字符串和元组不能。 以下是 Python 中列表的方…...
AI时代的软件工程:迎接LLM-DevOps的新纪元
在科技日新月异的今天,GPT的问世无疑为各行各业带来了一场深刻的变革,而软件工程领域更是首当其冲,正式迈入了软件工程3.0的新纪元。2024年,作为软件工程3.0的元年,伴随着软件工程3.0宣言的震撼发布,一个全…...
linux安全管理-系统环境安全
1 历史命令设置 1、检查内容 检查操作系统的历史命令设置。 2、配置要求 建议操作系统的历史命令设置。 3、配置方法 编辑/etc/profile 文件,配置保留历史命令的条数 HISTSIZE 和保留历史命令的记录文件大小 HISTFILESIZE,这两个都设置为 5。 配置方法如…...
MindAgent部署(进行中.....)
第一步:pip install -r requirements.txt 问题:如下:就是我的服务器,无法访问github Preparing metadata (setup.py) ... errorerror: subprocess-exited-with-error python setup.py egg_info did not run successfully.│ exi…...
【JavaEE初阶 — 网络编程】TCP流套接字编程
TCP流套接字编程 1. TCP & UDP 的区别 TCP 的核心特点是面向字节流,读写数据的基本单位是字节 byte 2 API介绍 2.1 ServerSocket 定义 ServerSocket 是创建 TCP 服务端 Socket 的API。 构造方法 方法签名 方法说明 ServerS…...
《气候变化研究进展》
《气候变化研究进展》设有气候系统变化、气候变化影响、气候变化适应、温室气体排放、对策论坛、简讯等栏目,其内容包括:国内外气候变化研究的最新成果与进展,以及与气候变化有关的交叉学科,如地球科学、生态与环境科学、人文与社…...
D2545电动工具调速专用控制电路芯片介绍【青牛科技】
概述: D2545 是一块频率、占空比可调的脉冲控制电路。可通过调节外接的电阻和电容大小来控制输出频率和占空比,达到控制电机转速的作用。 主要特点: ● 电源电压范围宽 ● 占空比可调 ● 静态功耗小 ● 抗干扰能力强 应用: ● …...
Unity 2020、2021、2022、2023、6000下载安装
Unity 2020、2021、2022、2023、6000 下载安装 以Unity 6000.0.24fc1下载安装为例: 打开 https://unity.cn/ 优三缔 官方网站; 点击【产品列表】→点击【查看更多】→选择自己需要的版本→点【开始使用】 点击【从Unity Hub下载】 以Windows为例&am…...
33 基于单片机的智能窗帘控制系统
目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于51单片机,采用DHT11温湿度传感器检测温湿度,滑动变阻器连接ADC0832数模转换器转换模拟,光敏传感器,采用GP2D12红外传感器,通过LCD1602显示屏显示…...
【CSS in Depth 2 精译_063】10.2 深入理解 CSS 容器查询中的容器
当前内容所在位置(可进入专栏查看其他译好的章节内容) 【第十章 CSS 容器查询】 ✔️ 10.1 容器查询的一个简单示例 10.1.1 容器尺寸查询的用法 10.2 深入理解容器 ✔️ 10.2.1 容器的类型 ✔️10.2.2 容器的名称 ✔️10.2.3 容器与模块化 CSS ✔️ 10.3…...
记录一次 k8s 节点内存不足的排查过程
背景:前端服务一直报404,查看k8s日志,没发现报错,但是发现pods多次重启。 排查过程: 查看pods日志,发现日志进不去。 kubectrl logs -f -n weave pod-name --tail 100查看pod describe kubectl describ…...
探索天空中的“名字”——用Landsat影像记录你的名字形状!
大家好!今天我发现了一个特别有趣的工具——NASA官网上有一个功能,允许你输入自己的名字,然后它会根据Landsat卫星影像显示出与你名字形状相符的地形图。是不是很酷?🎉 🌍 Landsat影像的神奇之处Landsat是N…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO:支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题:MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者:Yanyuan Chen, Dexuan Xu, Yu Hu…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...
《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)
CSI-2 协议详细解析 (一) 1. CSI-2层定义(CSI-2 Layer Definitions) 分层结构 :CSI-2协议分为6层: 物理层(PHY Layer) : 定义电气特性、时钟机制和传输介质(导线&#…...
测试markdown--肇兴
day1: 1、去程:7:04 --11:32高铁 高铁右转上售票大厅2楼,穿过候车厅下一楼,上大巴车 ¥10/人 **2、到达:**12点多到达寨子,买门票,美团/抖音:¥78人 3、中饭&a…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径:src/utils/timer.ts 完整代码: import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
如何理解 IP 数据报中的 TTL?
目录 前言理解 前言 面试灵魂一问:说说对 IP 数据报中 TTL 的理解?我们都知道,IP 数据报由首部和数据两部分组成,首部又分为两部分:固定部分和可变部分,共占 20 字节,而即将讨论的 TTL 就位于首…...
springboot 日志类切面,接口成功记录日志,失败不记录
springboot 日志类切面,接口成功记录日志,失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...
Linux部署私有文件管理系统MinIO
最近需要用到一个文件管理服务,但是又不想花钱,所以就想着自己搭建一个,刚好我们用的一个开源框架已经集成了MinIO,所以就选了这个 我这边对文件服务性能要求不是太高,单机版就可以 安装非常简单,几个命令就…...
HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散
前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说,在叠衣服的过程中,我会带着团队对比各种模型、方法、策略,毕竟针对各个场景始终寻找更优的解决方案,是我个人和我司「七月在线」的职责之一 且个人认为,…...
