JSON.stringify()和JSON.parse()

JSON.stringify()

JSON.stringify() 是 JavaScript 中的一个内置方法,用于将一个 JavaScript 值(对象或值)转换为一个 JSON 字符串。这个方法对于在客户端和服务器之间传输数据特别有用,因为 JSON 是一种轻量级的数据交换格式,它基于文本,并且易于人阅读和编写,同时也易于机器解析和生成。

以下是一些 JSON.stringify() 的基本用法和示例:

基本用法

javascript复制代码const obj = {  name: 'John',  age: 30,  city: 'New York'  
};  const jsonString = JSON.stringify(obj);  
console.log(jsonString); // 输出: '{"name":"John","age":30,"city":"New York"}'

替换函数

你可以提供一个替换函数(replacer),用于在字符串化过程中过滤或转换数据:

javascript复制代码function replacer(key, value) {  if (typeof value === 'string') {  return undefined; // 过滤掉所有字符串  }  return value;  
}  const obj = {  name: 'John',  age: 30,  city: 'New York'  
};  const jsonString = JSON.stringify(obj, replacer);  
console.log(jsonString); // 输出: '{"age":30}'

缩进和空格

你可以使用第三个参数来指定缩进级别(或空格数):

javascript复制代码const obj = {  name: 'John',  age: 30,  city: 'New York'  
};  const prettyJsonString = JSON.stringify(obj, null, 2);  
console.log(prettyJsonString);  
// 输出:  
// {  
//   "name": "John",  
//   "age": 30,  
//   "city": "New York"  
// }

在这个例子中,我们传递了 null 作为第二个参数(因为我们不需要替换函数),并传递了 2 作为第三个参数,表示我们希望每个级别缩进两个空格。

注意事项

  • 循环引用(即对象属性直接或间接地引用自己)会导致 JSON.stringify() 抛出一个错误。
  • 函数和 undefined 会被 JSON.stringify() 忽略(在字符串化过程中不会包含它们)。
  • 对象的 getter 方法在字符串化过程中不会被调用。
  • 日期对象会被转换为一个字符串(按照 ISO 8601 格式)。
  • NaN 和 Infinity 会被替换为 null。
  • 数组和对象会被递归地字符串化。

希望这可以帮助你更好地理解 JSON.stringify() 方法!

JSON.parse()

JSON.parse() 是 JavaScript 中的一个内置方法,用于将一个 JSON 字符串转换回 JavaScript 对象或值。这个方法在处理从服务器接收到的 JSON 数据或在本地解析存储的 JSON 字符串时特别有用。

以下是一些 JSON.parse() 的基本用法和示例:

基本用法

javascript复制代码const jsonString = '{"name":"John","age":30,"city":"New York"}';  const obj = JSON.parse(jsonString);  
console.log(obj.name); // 输出: John  
console.log(obj.age);  // 输出: 30  
console.log(obj.city); // 输出: New York

处理错误

由于 JSON.parse() 在遇到无效的 JSON 字符串时会抛出一个错误,因此通常建议使用 try...catch 语句来捕获和处理这些错误:

javascript复制代码const jsonString = 'Invalid JSON string';  try {  const obj = JSON.parse(jsonString);  console.log(obj);  
} catch (error) {  console.error('An error occurred:', error);  
}

使用 reviver 函数

JSON.parse() 还接受一个可选的第二个参数,这是一个转换函数(通常被称为 reviver 函数),该函数可以在返回之前对解析的对象中的每个键值对进行处理:

javascript复制代码const jsonString = '{"name":"John","age":30,"city":"New York"}';  function reviver(key, value) {  if (key === 'age' && typeof value === 'number') {  return value + 1; // 将年龄增加 1  }  return value;  
}  const obj = JSON.parse(jsonString, reviver);  
console.log(obj.name); // 输出: John  
console.log(obj.age);  // 输出: 31  
console.log(obj.city); // 输出: New York

在这个例子中,reviver 函数在解析过程中检查了每个键值对。如果键是 'age' 并且值是数字类型,那么它返回的值将是原值加 1。

注意事项

  • 字符串必须是一个有效的 JSON 格式,否则 JSON.parse() 将抛出一个错误。
  • JSON 字符串中的属性名称必须用双引号(")括起来。使用单引号(')或没有引号都将导致解析错误。
  • 如果 JSON 字符串包含注释或尾随逗号,那么 JSON.parse() 将无法正确解析它,因为这些特性不是 JSON 标准的一部分。
  • JSON.parse() 只能解析 JSON 字符串,不能解析 JavaScript 对象字面量或表达式。例如,它不能解析 eval() 可以处理的代码字符串。

补充

当您尝试使用 JSON.parse() 解析一个无效的 JSON 字符串时,JavaScript 会抛出一个 SyntaxError。无效的 JSON 字符串可能包含以下常见问题:

  1. 字符串未用双引号括起来:在 JSON 中,所有的字符串必须使用双引号(")括起来,而不是单引号(')或没有引号。
json复制代码// 无效的 JSON  
{ name: 'John' }  // 有效的 JSON  
{ "name": "John" }
  1. 使用了 JavaScript 注释:JSON 不支持注释。
json复制代码// 无效的 JSON  
{  // 这是一个注释  "name": "John"  
}  // 有效的 JSON(没有注释)  
{  "name": "John"  
}
  1. 尾随逗号:JSON 对象或数组的最后一个元素后不应有逗号。
json复制代码// 无效的 JSON  
{  "name": "John",  "age": 30,  
}  // 有效的 JSON  
{  "name": "John",  "age": 30  
}
  1. 使用了 JavaScript 类型的标识符,如 true、false 或 null,但拼写错误或格式错误。
json复制代码// 无效的 JSON  
{  "active": True  
}  // 有效的 JSON  
{  "active": true  
}
  1. 数字格式错误,如使用逗号作为千位分隔符或包含非法字符。
json复制代码// 无效的 JSON  
{  "price": 1,000.50  
}  // 有效的 JSON  
{  "price": 1000.5  
}
  1. 使用了 JavaScript 的特殊值,如 undefined、function 或 NaN,这些都是 JSON 不支持的。
json复制代码// 无效的 JSON(尝试包含 JavaScript 类型的值)  
{  "value": undefined  
}  // 有效的 JSON(使用 null 表示空值)  
{  "value": null  
}
  1. 对象或数组的键名不是有效的字符串。
json复制代码// 无效的 JSON(键名不是字符串)  
{  age: 30  
}  // 有效的 JSON(键名是字符串)  
{  "age": 30  
}

如果您尝试解析一个无效的 JSON 字符串,您应该使用 try...catch 语句来捕获 SyntaxError 并适当地处理它。例如:

javascript复制代码const jsonString = '{ name: "John" }'; // 无效的 JSON  try {  const obj = JSON.parse(jsonString);  console.log(obj);  
} catch (error) {  console.error('JSON 解析错误:', error);  
}

在上面的示例中,因为 jsonString 是一个无效的 JSON 字符串,所以 JSON.parse() 会抛出一个 SyntaxError,该错误会被 catch 语句捕获并打印到控制台。

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

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

相关文章

Scratch编程和Python编程的区别,孩子更适合哪一种

Scratch编程和Python编程有一些显著的不同之处: Scratch是一种基于可视化编程的编程语言,通过拖拽代码块来构建程序,适合初学者和年龄较小的孩子学习。而Python是一种文本编程语言,需要输入代码来编写程序,更适合有一定…

SpringBoot对接口配置跨域设置

目录 1. 使用 @CrossOrigin 注解 2. 全局跨域配置 2.1. 注意事项 在 Spring Boot 应用中,接口配置跨域(Cross-Origin Resource Sharing,CORS)设置是一个常见的需求,特别是当你的前端应用和后端服务部署在不同的域名下时。 以下是几种设置跨域的方法: 1. 使用 @Cross…

基于Springboot的滑雪场管理系统(有报告)。Javaee项目,springboot项目。

演示视频: 基于Springboot的滑雪场管理系统(有报告)。Javaee项目,springboot项目。 项目介绍: 采用M(model)V(view)C(controller)三层体系结构&a…

11、Flink 的 Keyed State 详解

1.Keyed DataStream 使用 keyed state,首先需要为DataStream指定 key(主键);这个 key 用于状态分区(数据流中的 Record 也会被分区)可以使用 DataStream 中 Java/Scala API 的 keyBy(KeySelector) 或者是 …

搜好货API接口:快速获取商品列表的利器

搜好货商品列表API接口允许开发者根据关键字搜索并获取相关的商品列表数据。接口支持多种参数配置,可以根据需求灵活调整搜索条件和结果返回格式。 点击获取key和secret API接口请求说明 请求地址:https://api.souhaohuo.com/goods/search请求方法&…

速卖通关键字搜索API接口:快速获取商品列表的利器

速卖通关键字搜索API接口允许开发者根据用户输入的关键字进行商品搜索,并返回与之相关的商品列表。通过调用该接口,您可以快速获取与关键字匹配的商品信息,包括商品标题、价格、图片等,为您的电商业务提供有力支持。 三、API接口…

以信息挖掘为关键技术的智慧校园建设

随着信息技术的快速发展,数据信息资源以井喷的姿态涌现。数据信息的大量涌现给人们带来丰富的数据信息资源,但面对海量的信息资源时,加大了人们对有效信息资源获取的难度,数据挖掘技术正是这一背景下的产物,基于数据挖…

【Redis】Redis安装、配置、卸载使用可视化工具连接Redis

文章目录 1.前置条件2.安装Redis2.1下载Redis安装包并解压2.2在redis目录下执行make命令2.3修改Redis配置文件2.4启动Redis服务2.5连接redis服务 3.Redis卸载4.使用可视化工具连接Redis 1.前置条件 Linux操作系统需要要是64位.如果不清楚自己Linux上是多少位的,可以使用以下命…

C语言之详细讲解文件操作(抓住文件操作的奥秘)

什么是文件 与普通文件载体不同,文件是以硬盘为载体存储在计算机上的信息集合,文件可以是文本文档、图片、程序等等。文件通常具有点三个字母的文件扩展名,用于指示文件类型(例如,图片文件常常以KPEG格式保存并且文件…

一文了解复杂度

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、算法效率二、时间复杂度1.定义2.大O的渐进表示法3.一般常见复杂度4.实例 三、空间复杂度1.定义2.空间复杂度计算3.实例 总结 前言 计算复杂性理论&#xf…

Redis的持久化方法,各自优缺点,怎么选择?

持久化: redis基于内存是数据库,内容存到内存中,也可以存到硬盘中,这个过程就叫持久化。有两种方案,RDB和AOP两种。 RDB RDB持久化就是把当前进程数据生成快照保存到硬盘的过程RDB文件是⼀个压缩的二进制文件&#…

VisualGLM-6B微调(V100)

Visualglm-6b-CSDN博客文章浏览阅读1.3k次。【官方教程】XrayGLM微调实践,(加强后的GPT-3.5)能力媲美4.0,无次数限制。_visualglm-6bhttps://blog.csdn.net/u012193416/article/details/131074962?ops_request_misc%257B%2522req…

使用Axios从前端上传文件并且下载后端返回的文件

前端代码: function uploadAndDownload(){showLoading();const fileInput document.querySelector(#uploadFile);const file fileInput.files[0];const formData new FormData()formData.append(file, file)return new Promise((resolve, reject) > {axios({…

【经典论文阅读1】FM模型——搜推算法里的瑞士军刀

全文由『说文科技』原创出品,文章同步更新于公众号『说文科技』。版权所有,翻版必究。 FM模型发表于2010年,它灵活好用且易部署。作者行文极其流畅,作者首先对要处理的问题进行介绍,接着作者提出FM模型,这…

Vue单页面应用和多页面应用的区别

概念: SPA单页面应用(SinglePage Web Application),指只有一个主页面的应用,一开始只需要加载一次js、css等相关资源。所有内容都包含在主页面,对每一个功能模块组件化。单页应用跳转,就是切换…

Grad-CAM(梯度加权类激活图)

Grad-CAM(Gradient-weighted Class Activation Mapping)是一种可视化技术,用于解释卷积神经网络(CNN)的决策过程。它通过生成类激活图(Class Activation Map,CAM)来突出显示对网络预…

笔试强训-day17_T2 十字爆破

一、题目链接 十字爆破 二、题目描述 牛牛在玩一个游戏: 一共有n行m列共nm个方格,每个方格中有一个整数。 牛牛选择一个方格,可以得到和这个方格同行、同列的所有数之和的得分。 例如:对于一个22的方格: 1 2 3 4 牛牛…

Python字符串常用方法(全网最细,仅此一份)

🥇作者简介:CSDN内容合伙人、新星计划第三季Python赛道Top1 🔥本文已收录于Python系列专栏: 👉Python从入门到精通 💬订阅专栏后可私信博主进入Python学习交流群,进群可领取Python180G全栈视频教程以及Python相关电子书合集 😊私信未回可以加V:hacker0327 备注P…

Nodejs-异步并发控制

异步并发控制 在 node 中可以利用异步发起并行调用。但是如果并发量过大,就会导致下层服务器吃不消。 bagpipe 解决方案 解决方案 通过一个队列来控制并发量如果当前活跃的异步调用小于限定值,从队列中取出执行如果活跃调用达到限定值,调…

文心一言 VS 讯飞星火 VS chatgpt (251)-- 算法导论18.2 4题

四、假设关键字 {1,2,…,n} 被插入一棵最小度数为 2 的空 B 树中,那么最终的B树有多少个结点?如果要写代码,请用go语言。 文心一言: B树(B-tree)是一种自平衡的树&…