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

JSON.stringify与JSON.parse详解与实践

目录

JSON.stringify

简介

主要用途:

API

实践1:

实践2:

JSON.parse

简介

API

实践1

实践2


JSON.stringify

简介

用于把JavaScript对象、数组、值、布尔值等序列化成字符串形式。

主要用途:

得到的数据通常有以下主要用途:

数据传输:在客户端和服务器之间传递数据时,通常需要把数据序列化为字符串进行传输。JSON是一种常见的数据交换格式,而JSON.stringify 可以很方便的将javascript 的对象等数据转换成JSON字符串,以便在网络上传输。

本地存储: 在浏览器端,localStoragesessionStorage 存储的数据必须是字符串形式。JSON.stringify 可以用来将 JavaScript 对象转为字符串,以便在本地存储中使用。

保存数据: 将数据存储到本地文件或数据库时,经常需要将数据转为字符串形式。JSON 格式的字符串是一个通用的选择,而 JSON.stringify 可以用来生成符合标准的 JSON 字符串。

JSON.stringify() - JavaScript | MDN

API

JSON.stringify(value: any, replacer?: (string | number)[] | null | undefined, space?: string | number | undefined): string

实践1:

const data = {key1: 'value1',key2: 'value2',key3: {subKey1: 'subValue1',subKey2: 'subValue2'}
};
//改变内容,把所有的value值变为大写
const jsonString = JSON.stringify(data, (key, value) => {// 使用 replacer 函数,将所有字符串值转为大写if (typeof value === 'string') {return value.toUpperCase();}return value;
}, 2);  // 使用缩进为2的空格console.log(jsonString);

实践2:

const data = {key1: 'value1',key2: 'value2',key3: {subKey1: 'subValue1',subKey2: 'subValue2'}
};//不改变内容,缩进4空格,便于阅读
const jsonString = JSON.stringify(data, null, 4);  // 使用缩进为4的空格console.log(jsonString);

JSON.parse

简介

将JSON的字符串转换为 JavaScript的 对象。需要注意 必现符合JSON字符串格式的数据才行。

JSON.parse() - JavaScript | MDN

API

JSON.parse(text: string, reviver?: ((this: any, key: string, value: any) => any) | undefined): any

实践1

const jsonString = '{"name": "John", "age": 30, "city": "New York"}';const reviver = (key, value) => {// 将 age 属性的值加倍if (key === 'age') {return value * 2;}return value;
};const parsedObject = JSON.parse(jsonString, reviver);console.log(parsedObject);
// 输出: { name: 'John', age: 60, city: 'New York' }

实践2

const jsonString = '{"name": "John", "age": 30, "city": "New York"}';const parsedObject = JSON.parse(jsonString);console.log(parsedObject);
// 输出: { name: 'John', age: 30, city: 'New York' }

相关文章:

JSON.stringify与JSON.parse详解与实践

目录 JSON.stringify 简介 主要用途: API 实践1: 实践2: JSON.parse 简介 API 实践1 实践2 JSON.stringify 简介 用于把JavaScript对象、数组、值、布尔值等序列化成字符串形式。 主要用途: 得到的数据通常有以下主…...

vue 基础

双向绑定的原理 双向绑定是一种数据绑定技术,它能够实现数据的自动同步更新,即当用户修改了数据时,界面也会随之自动更新,反之亦然。其原理如下: 数据模型:双向绑定的第一步是建立一个数据模型&#xff0c…...

使用axios下载后端接口返回的文件流格式文件

在实际开发中,我们经常会遇到下载文件的需求,一般情况下接口最好的处理方式为上传到文件对象存储服务器,然后给前端返回一个下载文件的URL,前端直接打开链接下载就可以了,但…在下载数据量大且参数复杂的情况下&#x…...

在macOS上使用Homebrew安装PHP的完整指南

安装最新版本的PHP 步骤1: 安装Homebrew 在安装最新版本的PHP之前,确保你的macOS系统上已经安装了Homebrew。如果尚未安装,打开终端并运行以下命令: /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install…...

图片处理OpenCV IMDecode模式说明【生产问题处理】

OpenCV IMDecode模式说明【生产问题处理】 1 前言 今天售后同事反馈说客户使用我们的图片处理,将PNG图片处理为JPG图片之后,变为了白板。 我们图片处理使用的是openCV来进行处理 2 分析 2.1 图片是否损坏:非标准PNG头部 于是,马…...

吹响AI技术应用的号角

毫无疑问,各企业正围绕各种技术展开一场持续不断的角逐,力争率先取得领先且具创新性的技术进步,AI技术也不例外。疫情期间,全球各地企业的员工纷纷转向居家办公。因此,为轻松实现这一转型并建立起远程办公的新常态&…...

C //例10.1 从键盘输入一些字符,逐个把它们送到磁盘上去,直到用户输入一个“#”为止。

C程序设计 (第四版) 谭浩强 例10.1 例10.1 从键盘输入一些字符,逐个把它们送到磁盘上去,直到用户输入一个“#”为止。 IDE工具:VS2010 Note: 使用不同的IDE工具可能有部分差异。 代码块 方法:使用指针&…...

ARM预取侧信道(Prefetcher Side Channels)攻击与防御

目录 一、预取侧信道简介 1.1 背景:预取分类 二、Arm核会受到影响吗? 2.1 先进的预取器...

数据结构 | 二叉树的各种遍历

数据结构 | 二叉树的各种遍历 文章目录 数据结构 | 二叉树的各种遍历创建节点 && 创建树二叉树的前中后序遍历二叉树节点个数二叉树叶子节点个数二叉树第k层节点个数二叉树查找值为x的节点二叉树求树的高度二叉树的层序遍历判断二叉树是否是完全二叉树 我们本章来实现二…...

Python-赋值运算符(详解)

表示赋值 左侧为变量,右边为值 a b 10#先把10赋值给b,再把b赋值给a 相当于a 10 b 10 链式赋值,但是不推荐,一般一行一个语句,提高可读性,良好的代码风格 多元赋值: a , b 10,20 #python语…...

算法工程师面试八股(搜广推方向)

文章目录 机器学习线性和逻辑回归模型逻辑回归二分类和多分类的损失函数二分类为什么用交叉熵损失而不用MSE损失?偏差与方差Layer Normalization 和 Batch NormalizationSVM数据不均衡特征选择排序模型树模型进行特征工程的原因GBDTLR和GBDTRF和GBDTXGBoost二阶泰勒…...

学习TypeScrip4(数组类型)

数组的类型 1.定义方法:类型[ ] //类型加中括号 let arr:number[] [123] //这样会报错定义了数字类型出现字符串是不允许的 let arr:number[] [1,2,3,1] //操作方法添加也是不允许的 let arr:number[] [1,2,3,] arr.unshift(1)var arr: number[] [1, 2, 3]; /…...

Python文件打包成exe可执行文件

我们平常用python写些脚本可以方便我们的学习办公,但限制就是需要有python环境才能运行。 那能不能直接在没有python环境的电脑上运行我们的脚本呢? 当然可以,那就是直接把python脚本打包成exe可执行程序(注针对win系统&#xf…...

Android : SQLite 增删改查—简单应用

示例图: 学生实体类 Student.java package com.example.mysqlite.dto;public class Student {public Long id;public String name;public String sex;public int age;public String clazz;public String creatDate;//头像public byte[] logoHead;Overridepublic St…...

【蓝桥杯】马的遍历

马的遍历 题目描述 有一个 n m n \times m nm 的棋盘,在某个点 ( x , y ) (x, y) (x,y) 上有一个马,要求你计算出马到达棋盘上任意一个点最少要走几步。 输入格式 输入只有一行四个整数,分别为 n , m , x , y n, m, x, y n,m,x,y。 …...

导入JSON到xmind

写在前面 这只是一个思路&#xff0c;解决大量树状数据&#xff0c;创建xmind低效问题。 函数可以根据你的实际情况优化 1. 转换json格式 function formatToXimd(atd, str) {if (atd) {for (let index 0; index < atd.length; index) {console.log(str - atd[index].…...

DataGrip 2023.2.3(IDE数据库开发)

DataGrip是一款数据库集成开发环境&#xff08;IDE&#xff09;&#xff0c;用于数据库管理和开发。 DataGrip提供了许多强大的功能&#xff0c;如SQL语句编辑、数据库连接管理、数据导入和导出、数据库比较和同步等等。它支持多种数据库&#xff0c;如MySQL、PostgreSQL、Ora…...

身为 Go 程序员,我为啥更喜欢用 Zig?

Zig 是一种比较新的编程语言&#xff0c;于 2016 年首次推出。Zig 社区将其描述为“一种用于维护稳固的、可优化和可重用软件的通用编程语言”。 看似一句简单的描述&#xff0c;却隐藏着远大的抱负。Zig被看作是可与C语言一较高下的编程语言。此外&#xff0c;Zig 也是一个编…...

Amazon CodeWhisperer 使用体验

文章作者&#xff1a;STRIVE Amazon CodeWhisperer 是最新的代码生成工具&#xff0c;支持多种编程语言&#xff0c;如 java,js,Python 等&#xff0c;能减少开发人员手敲代码时间&#xff0c;提升工作效率。PS:本人是一名 CodeWhisperer 业余爱好者 亚马逊云科技开发者社区为开…...

公众号留言功能怎么申请?

为什么公众号没有留言功能&#xff1f;2018年2月12日&#xff0c;TX新规出台&#xff1a;根据相关规定和平台规则要求&#xff0c;我们暂时调整留言功能开放规则&#xff0c;后续新注册帐号无留言功能。这就意味着2018年2月12日号之后注册的公众号不论个人主体还是组织主体&…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

goreplay

1.github地址 https://github.com/buger/goreplay 2.简单介绍 GoReplay 是一个开源的网络监控工具&#xff0c;可以记录用户的实时流量并将其用于镜像、负载测试、监控和详细分析。 3.出现背景 随着应用程序的增长&#xff0c;测试它所需的工作量也会呈指数级增长。GoRepl…...

【Java多线程从青铜到王者】单例设计模式(八)

wait和sleep的区别 我们的wait也是提供了一个还有超时时间的版本&#xff0c;sleep也是可以指定时间的&#xff0c;也就是说时间一到就会解除阻塞&#xff0c;继续执行 wait和sleep都能被提前唤醒(虽然时间还没有到也可以提前唤醒)&#xff0c;wait能被notify提前唤醒&#xf…...

RabbitMQ 各类交换机

为什么要用交换机&#xff1f; 交换机用来路由消息。如果直发队列&#xff0c;这个消息就被处理消失了&#xff0c;那别的队列也需要这个消息怎么办&#xff1f;那就要用到交换机 交换机类型 1&#xff0c;fanout&#xff1a;广播 特点 广播所有消息​​&#xff1a;将消息…...