JSON.stringify() / JSON.parse() / JSON 真是个好东西
目录
1. JSON 基本概念
1.1 JavaScript 对象表示法
1.2 JSON 文件
1.3 JSON 语法
2. XML VS JSON
2.1 共同点
2.2 不同点
2.3 使用步骤对比
3. JSON.parse()
3.1 使用介绍
3.2 使用 reviver 参数，将 JSON 对象解析出来的 string 转化为 Date
4. JSON.stringify()
4.1 使用介绍
4.2 replacer 参数示例
4.2.1 replacer 是函数 —— 序列化 部分 传入的对象
4.2.2 replacer 是函数 —— 序列化 部分 传入的数组
4.2.3 replacer 是数组 —— 序列化数组中指定的键值
4.3 space 参数示例
4.4 需要注意的点
4.4.1 转换的值如果存在 toJSON()，则仅执行 toJSON()
4.4.2 JSON.stringify() 会把 Date() 序列化为 时间戳 字符串
4.4.3 只能序列化可枚举属性，不可枚举的属性会被忽略
4.4.4 Symbol 无法序列化
5. JSONP
5.1 什么是 JSONP
5.2 JSONP 原理分析及使用
1. JSON 基本概念
1.1 JavaScript 对象表示法
JSON —— JavaScript Object Notation 【JavaScript 对象表示法】
JSON 使用 Javascript 语法来描述数据对象，但 JSON 被多种编程语言支持，它独立于语言
1.2 JSON 文件
JSON 文件的文件类型是 .json
JSON 文本的 MIME 类型是 application/json
1.3 JSON 语法
JSON 的值可以是：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 布尔值（true / false）
- 数组（在中括号中）
- 对象（在大括号中）
- null
举个栗子~
// JSON 数字
{ "age": 30 }// JSON 对象
{ key1 : value1, ... keyN : valueN }// JSON 数组
{"pollutions": [{ "name":"miaomiao" , "url":"www.miaomiao.com" }, { "name":"google" , "url":"www.google.com" },]
}// JSON 布尔值
{ "flag": true }// JSON null
{ "runoob": null }JSON 在线解析 | 菜鸟工具JSON 在线解析是一款 JSON 格式化工具，你可以在线验证、编辑和格式化 JSON 数据，格式化后的 JSON 数据以树形结构展示，更易于阅读，此外还可以将 JSON 转换为 XML、YAML、CSV格式。..
2. XML VS JSON
2.1 共同点
JSON 和 XML 都用于 —— 接收 web 服务端的数据
// JSON
{"pollutions": [{ "name":"miaomiao" , "url":"www.miaomiao.com" }, ]
}// XML
<sites><site><name>miaomiao</name> <url>www.miaomiao.com</url></site>
</sites>- JSON 和 XML 数据都是 "自我描述" ，都易于理解
- JSON 和 XML 数据都是有层次的结构
- JSON 和 XML 数据可以被大多数编程语言使用
2.2 不同点
- JSON 不需要结束标签
- JSON 更加简短
- JSON 读写速度更快
- JSON 可以使用数组
最重要的不同：XML 需要使用 XML 解析器来解析，JSON 可以使用标准的 JavaScript 函数来解析
- JSON.parse(): 将 JSON 字符串 转换为 JavaScript 对象
- JSON.stringify(): 将 JavaScript 值转换为 JSON 字符串
2.3 使用步骤对比
使用 XML 的步骤：
- 读取 XML 文档
- 使用 XML DOM 来循环遍历文档
- 读取值并存储在变量中
使用 JSON 的步骤：
- 读取 JSON 字符串
- 用 eval() 处理 JSON 字符串
所以，使用 JSON 更方便
3. JSON.parse()
3.1 使用介绍
服务器返回的数据，一般是字符串，可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象
JSON.parse(text[, reviver])
text：必需， 一个有效的 JSON 字符串
reviver：可选，一个转换结果的函数， 将为对象的每个成员调用此函数
3.2 使用 reviver 参数，将 JSON 对象解析出来的 string 转化为 Date
JSON 不能存储 Date() 对象，可以利用 JSON.parse() 的第二个参数，对转换的数据进行处理
举个栗子~
var text = '{ "name":"miaomiao", "initDate":"2013-12-14", "site":"www.miaomiao.com"}';var obj = JSON.parse(text, function (key, value) {if (key == "initDate") {return new Date(value);} else {return value;}
});console.log(obj)
4. JSON.stringify()
4.1 使用介绍
向服务器发送的数据，一般是字符串，可以使用 JSON.stringify() 方法将值转换为字符串
JSON.stringify(value[, replacer[, space]])
value：必需。 要转换的 JavaScript 值（通常为对象或数组）
replacer：可选。用于转换结果的函数或数组
- 如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。如果该参数为未提供或者null ，则对象所有的属性都会被序列化
- 如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组
space：可选。文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t
4.2 replacer 参数示例
4.2.1 replacer 是函数 —— 序列化 部分 传入的对象
若 replacer 函数返回 undefined 或者函数，则值会被忽略
/*** 序列化回调方法* @param {*} key 键名* @param {*} value 键值* @returns */
function replacer(key, value) {// 如果键值为字符串格式，则不进行序列化（输出结果不带当前键值对）if (typeof value === "string") {return undefined;}return value;
}
const userInfo = {name: 'miaomiao',age: 23,sex: '女'
}
console.log(JSON.stringify(userInfo, replacer));
4.2.2 replacer 是函数 —— 序列化 部分 传入的数组
若 replacer 函数返回 undefined ，当前值不会被忽略，而将会被 null 取代
/*** 序列化回调方法* @param {*} key 键名* @param {*} value 键值* @returns */
function replacer(key, value) {// 如果值为字符串格式，则序列化返回 nullif (typeof value === "string") {return undefined;}return value;
}const foodList = ['苹果', 666, '香蕉', 888]console.log(JSON.stringify(foodList, replacer));
4.2.3 replacer 是数组 —— 序列化数组中指定的键值
转换数组中 具有键值 的成员
const userInfo = {name: 'miaomiao',age: 23,sex: '女'
}console.log(JSON.stringify(userInfo, ['name', 'age']));
4.3 space 参数示例
为了便于阅读 JSON 数据，将每一级数据赋予不同的缩进
const userInfo = {name: 'miaomiao',age: 23,hobby: [{label: '第五人格',value: 'dwrg',}, {label: '双人成行',value: 'srcx',}]
}
console.log(JSON.stringify(userInfo, null, 6));
4.4 需要注意的点
4.4.1 转换的值如果存在 toJSON()，则仅执行 toJSON()
const userInfo = {name: 'miaomiao',age: 23,toJSON() {console.log('禁止转换我')}
}
console.log(JSON.stringify(userInfo));
4.4.2 JSON.stringify() 会把 Date() 序列化为 时间戳 字符串
console.log(JSON.stringify(new Date()));
4.4.3 只能序列化可枚举属性，不可枚举的属性会被忽略
const userInfo = {}Object.defineProperty(userInfo, "home", {adrress: '北京',enumerable: false
});Object.defineProperty(userInfo, "date", {value: '2022-11-26',enumerable: true
});console.log(JSON.stringify(userInfo));
4.4.4 Symbol 无法序列化
const userInfo = {name: 'miaomiao',[Symbol('testSymbol')]: 'testSymbol'
}
console.log(JSON.stringify(userInfo));
关于JSON.parse,你应该知道的..._哔哩哔哩_bilibili-, 视频播放量 1138、弹幕量 1、点赞数 60、投硬币枚数 23、收藏人数 51、转发人数 2, 视频作者 盆盆儿WEB前端, 作者简介 专注分享前端技术，相关视频：【IT老齐169】超级实用，REST接口多层嵌套动态JSON该如何解析？，【node.js实现微信机器人（一）】可自动回复，自动转账加好友等等功能。，超时效果工具类的一个使用场景，你真的了解JSON.stringify吗？，三分钟了解Electron，不要和程序员吵架，尤其是女程序员！，你不知道的String.prototype.replace，用处多多，前端调试小技巧，大大提升前后端联调效率！，如何利用chrome开发者工具做程序运行时的性能优化？，圆角导致的奇怪的“边框”
https://www.bilibili.com/video/BV1b3411f7R7/?spm_id_from=333.880.my_history.page.click
5. JSONP
5.1 什么是 JSONP
所有支持 JavaScript 的浏览器，都会使用“同源策略”
JSONP（JSON with Padding） 是 JSON 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即 —— 跨域读取数据
实现原理：利用了 script 标签的 src 没有跨域限制
5.2 JSONP 原理分析及使用
JSONP原理及实现_定栓的博客-CSDN博客_jsonp基本原理： 主要就是利用了 script 标签的src没有跨域限制来完成的。https://blog.csdn.net/weixin_44116302/article/details/124440154
JSON.stringify() / JSON.parse() / JSON 真是个好东西相关推荐
- 有了JSON.stringify()，处理json将变得更简单！！
之前处理json 需要拼接json字符串,但是,如果用上JSON.stringify()的话,忘了json语法以没关系了..... 1 @{ 2 ViewBag.Title = "GetSt ...
- json.stringify()与json.parse()的区别，json.stringify()的妙用
一.JSON.stringify()与JSON.parse()的区别 最近做项目,发现JSON.stringify()使用场景真的挺多,我们都知道JSON.stringify()的作用是将 JavaS ...
- JSON.parse和JSON.stringify方法
JSON.parse() JSON.parse()方法将json字符串转化为Javascript值或对象. 语法 JSON.parse(text[,reviver]) 参数 text:要被解析成Jav ...
- php json.parse,JSON.parse()与JSON.stringify()和eval()使用方法详解
这次给大家带来JSON.parse()与JSON.stringify()和eval()使用方法详解,JSON.parse()与JSON.stringify()和eval()使用的注意事项有哪些,下面就 ...
- JSON.parse()、JSON.stringify()和eval()的作用
浅谈JSON.parse().JSON.stringify()和eval()的作用 相信大家对于JSON应该不陌生,度娘对这个名词的解释大致如下: "JSON(JavaScript Obje ...
- javascript_JSON.parse() 与 JSON.stringify()_ZHOU125disorder_
JSON.parse() 与 JSON.stringify() JSON对象和字符串之间的相互转换 – JSON.parse() 和 JSON.stringify() 所有现代浏览器都支持 JSON ...
- JSON.parse和JSON.stringify
前言 JSON(JavaScript Object Notation)是一种语法,可用来序列化对象.数组.数值.字符串.布尔值和 null .它基于 JavaScript 语法,但与之不同:JavaS ...
- JSON.parse() 和 JSON.stringify()
JSON.stringify() 和 JSON.parse() 用于序列化和解析. JSON 的语法是js语法的子集,它并不能表示js里的所有值.支持对象.数组.字符串.数字.布尔值和null.NaN ...
- 关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
JSON.parse(jsonString): 在一个字符串中解析出JSON对象 JSON.stringify(obj) : 将一个JSON对象转换成字符串 jQuery.parseJSON(json ...
- JSON.stringify() 的使用、toJSON 方法 以及 JSON.parse 方法
一. JSON.stringify() 的使用 JSON.stringify() 方法能将一个 JavaScript 对象或值转换成一个 JSON 字符串. //初始化一个 user 对象 const ...
最新文章
- 基础排序算法详解与优化
- 黄文俊：Serverless小程序后端技术分享
- 如何知道linux的ssh秘钥是否匹配,SSH密钥验证
- java java 检查型异常_如何整合Java中的有效性检查和异常抛出？
- js调整数组某些元素到指定位置顺序_如何在JS数组特定索引处指定位置插入元素？...
- AODV路由协议详解
- 测试理论----软件测试四大测试过程
- 实现开启和关闭android移动网络
- 商务统计_4 用图表演示数据 - 频数分布
- 两条纵坐标折线图绘制
- 导数，偏导数，方向导数与梯度的定义与联系
- 袋鼠云 oracle,袋鼠云数据中台专栏2.0 | 数据中台之数据集成
- 安装 EndNote X 9.3.3
- linux raid member,文件挂载时报错“linux_raid_member”
- 【android工具篇】Firefly-RK系列（eg：RK3288 RK3368）一键获取root权限工具RootUtils
- 利用Collections.sort方法重写Comparator接口的compare方法对list集合排序
- 深扒,用 6 部分讲完 Java 性能调优：多线程 + 设计模式 + 数据库
- excel两个表格数据对比_EXCEL表格中1列数据分别另外2列数据对比，在第四列输出第一列数据中不重复的数据？...
- 网络带宽监控,带宽监控工具哪个好
- 五、WIN10模拟DOS环境之8086汇编实战