JSON-stringify和parse

目录

JSON序列化

 JSON反序列化

序列化和反序列化转换 

深拷贝 

JSON.parse接受参数类型错误导致抛出异常 

 当有子元素的时候,设置父元素样式的方式

 防抖问题


JSON序列化

    const obj = {name: "John",age: 30,city: "New York",};// 基本用法,将对象转换为 JSON 字符串const jsonString = JSON.stringify(obj);console.log(jsonString);// 使用 replacer 函数进行自定义转换const replacer = (key, value) => {if (typeof value === "number" && value > 25) {return value + 1;}return value;};const jsonStringWithReplacer = JSON.stringify(obj, replacer);console.log(jsonStringWithReplacer);// 使用 space 参数来控制缩进const jsonStringWithIndentation = JSON.stringify(obj, null, 4);console.log(jsonStringWithIndentation);obj.toJSON=function(){return {fullName:this.name,yearsOld:this.age,location:this.city}}const jsonString1= JSON.stringify(obj);console.log(jsonString1);

 JSON反序列化

    // 假设我们有一个JSON格式的字符串const jsonString ='{"name": "Alice", "age": 25, "isStudent": true, "courses": ["Math", "Science"], "address": {"city": "New York", "zip": "10001"}}';// 使用JSON.parse将JSON字符串反序列化为JavaScript对象const parsedObject = JSON.parse(jsonString, (key, value) => {console.log(`Key: ${key}, Value: ${value}`);// 如果值是字符串类型,并且可以转换为数字,则将其转换为数字if (typeof value === "string" && !isNaN(value)) {return Number(value);}// 返回原始值return value;});// 输出反序列化后的对象console.log(parsedObject);

序列化和反序列化转换 

    // 定义一个对象const person = {name: "Alice",age: 25,hobbies: ["reading", "swimming"],};// 将对象序列化为 JSON 字符串const jsonString = JSON.stringify(person);// 使用 JSON.parse() 进行反序列化const deserializedPerson = JSON.parse(jsonString);// 打印原始对象、JSON 字符串和反序列化后的对象console.log("原始对象:", person);console.log("JSON 字符串:", jsonString);console.log("反序列化后的对象:", deserializedPerson);

深拷贝 

    const obj = {name: "John",age: 30,address: {street: "123 Main St",city: "New York",state: "NY",},};const deepCopy = JSON.parse(JSON.stringify(obj));// 修改原始对象obj.name = "Jane";obj.address.city = "Los Angeles";// 打印原始对象和深拷贝对象console.log("原始对象:", obj);console.log("深拷贝对象:", deepCopy);

JSON.parse接受参数类型错误导致抛出异常 

export const filterLockAndNoExistList = (oldParam: string, authInfo: AuthInfo): string => {if (isNil(oldParam) || isNil(authInfo)) return '';const oldParamArray = oldParam?.split(',') || [];// lockList为大整型的数组,用BigInt解决精度损失问题const lockList = JSON.parse(authInfo?.lockList || '[]').map((i: number) => BigInt(i)+'');const noExistList = JSON.parse(authInfo?.noExistList || '[]').map((i: number) => BigInt(i)+'');// 过滤掉存在于 lockList 或 noExistList 中的元素const filteredArray = oldParamArray.filter(id =>!lockList.includes(id) && !noExistList.includes(id));return filteredArray.join(',');
};
    const lockList = (Array.isArray(authInfo?.lockList) ? authInfo.lockList : JSON.parse(authInfo?.lockList || '[]')).map((i: number) => BigInt(i) + '');

 当有子元素的时候,设置父元素样式的方式

.poppy-spin-container {// 默认样式min-width: 200px;// 当子元素中存在 .bill-data-empty 时&:has(.bill-data-empty) {min-width: 300px;}
}

 防抖问题

 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3 前端(中):JavaScript

文章目录 前言:JavaScript简介一、ECMAscript(JavaScript基本语法)1 JavaScript与html结合方式(快速入门)2 基本知识(1)JavaScript注释(和Java注释一样)(2&am…

服务器一次性部署One API + ChatGPT-Next-Web

服务器一次性部署One API ChatGPT-Next-Web One API ChatGPT-Next-Web 介绍One APIChatGPT-Next-Web docker-compose 部署One API ChatGPT-Next-WebOpen API docker-compose 配置ChatGPT-Next-Web docker-compose 配置docker-compose 启动容器 后续配置 同步发布在个人笔记服…

OSI七层协议——分层网络协议

OSI七层协议,顾名思义,分为七层,实际上七层是不存在的,是人为的进行划分,让人更好的理解 七层协议包括,物理层(我),数据链路层(据),网络层(网),传输层(传输),会话层(会),表示层(表),应用层(用)(记忆口诀->我会用表…

【AI论文】生成式视频模型是否通过观看视频学习物理原理?

摘要:AI视频生成领域正经历一场革命,其质量和真实感在迅速提升。这些进步引发了一场激烈的科学辩论:视频模型是否学习了能够发现物理定律的“世界模型”,或者,它们仅仅是复杂的像素预测器,能够在不理解现实…

【TCP】rfc文档

tcp协议相关rfc有哪些 TCP(传输控制协议)是一个复杂的协议,其设计和实现涉及多个RFC文档。以下是一些与TCP协议密切相关的RFC文档列表,按照时间顺序排列,涵盖了从基础定义到高级特性和优化的各个方面: 基…

VLAN基础理论

VLAN V:Virtual(虚拟) LAN ——局域网 VLAN ——虚拟局域网(虚拟广播域:交换机和路由器协同工作后,将原来的一个广播域,逻辑上切分为多个。) VLAN的配置我们基于以下拓扑进行: PC1-4的IP地址依次为192.168.1.1-192.168…

RabbitMQ实现延迟消息发送——实战篇

在项目中,我们经常需要使用消息队列来实现延迟任务,本篇文章就向各位介绍使用RabbitMQ如何实现延迟消息发送,由于是实战篇,所以不会讲太多理论的知识,还不太理解的可以先看看MQ的延迟消息的一个实现原理再来看这篇文章…

IoTDB 常见问题 QA 第四期

关于 IoTDB 的 Q & A IoTDB Q&A 第四期来啦!我们将定期汇总我们将定期汇总社区讨论频繁的问题,并展开进行详细回答,通过积累常见问题“小百科”,方便大家使用 IoTDB。 Q1:Java 中如何使用 SSL 连接 IoTDB 问题…

【STM32-学习笔记-14-】FLASH闪存

文章目录 FALSH闪存一、FLASH简介二、FLASH基本结构三、FLASH解锁四、使用指针访问存储器五、FLASH擦除以及编程流程Ⅰ、程序存储器全擦除1. 读取FLASH_CR的LOCK位2. 检查LOCK位是否为13. 设置FLASH_CR的MER 1和STRT 1(如果LOCK位0)4. 检查FLASH_SR的B…

CamemBERT:一款出色的法语语言模型

摘要 预训练语言模型在自然语言处理中已无处不在。尽管这些模型取得了成功,但大多数可用模型要么是在英语数据上训练的,要么是在多种语言数据拼接的基础上训练的。这使得这些模型在除英语以外的所有语言中的实际应用非常有限。本文探讨了为其他语言训练…

线性代数概述

矩阵与线性代数的关系 矩阵是线性代数的研究对象之一: 矩阵(Matrix)是一个按照长方阵列排列的复数或实数集合,是线性代数中的核心概念之一。矩阵的定义和性质构成了线性代数中矩阵理论的基础,而矩阵运算则简洁地表示和…

金仓Kingbase客户端KStudio报OOM:Java heap space socketTimeout

找到Kingbase\ES\V8\KESRealPro\V008R006C006B0021\ClientTools\guitools\KStudio\KStudio.ini 修改JVM参数: 默认值: -Xms512m -Xmx1024m 改为: -Xms1024m -Xmx2048m -XX:MaxPermSize512m SQL查询报错:An I/O error occurred …

Spring6.0新特性-HTTP接口:使用@HttpExchange实现更优雅的Http客户端

文章目录 一、概述二、使用1、创建接口HttpExchange方法2、创建一个在调用方法时执行请求的代理3、方法参数4、返回值5、错误处理(1)为RestClient(2)为WebClient(3)为RestTemplate 注意 一、概述 官方文档…

kubernetes学习-Service(七)

一、Service-pod-endpoint关系 # 查看endpoints [rootk8s-master deployments]# kubectl get endpoints NAME ENDPOINTS AGE kubernetes 192.168.129.136:6443 90m nginx-svc 10.109.131.1:80,10.111.156.65:80 22m # …

Python数据分析案例70——基于神经网络的时间序列预测(滞后性的效果,预测中存在的问题)

背景 这篇文章可以说是基于 现代的一些神经网络的方法去做时间序列预测的一个介绍科普,也可以说是一个各种模型对比的案例,但也会谈一谈自己做了这么久关于神经网络的时间序列预测的论文,其中一些常见的模式及它们存在的问题以及效果&#x…

opencv笔记2

图像灰度 彩色图像转化为灰度图像的过程是图像的灰度化处理。彩色图像中的每个像素的颜色由R,G,B三个分量决定,而每个分量中可取值0-255,这样一个像素点可以有256*256*256变化。而灰度图像是R,G,B三个分量…

LeetCode:2266. 统计打字方案数(DP Java)

目录 2266. 统计打字方案数 题目描述: 实现代码与解析: 动态规划 原理思路: 2266. 统计打字方案数 题目描述: Alice 在给 Bob 用手机打字。数字到字母的 对应 如下图所示。 为了 打出 一个字母,Alice 需要 按 对…

http://noi.openjudge.cn/——4.7算法之搜索——【169:The Buses】

题目 169:The Buses 总时间限制: 5000ms 内存限制: 65536kB 描述 A man arrives at a bus stop at 12:00. He remains there during 12:00-12:59. The bus stop is used by a number of bus routes. The man notes the times of arriving buses. The times when buses arrive …

java基础概念59-File

一、路径 二、File类 2-1、常见的构造方法 示例: 【注意】: 一般不自己用分割符把父路径和子路径拼接起来,因为,不用的操作系统,分隔符不同。 2-2、小结 2-3、File中常见的成员方法 示例: 【注意】&#…

PortSwigger靶场练习---第二关-查找和利用未使用的 API 端点

第二关:Finding and exploiting an unused API endpoint 实验:查找和利用未使用的 API 端点 PortSwigger靶场地址: Dashboard | Web Security Academy - PortSwigger 题目: 官方提示: 在 Burp 的浏览器中&#xff0c…