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格式。..https://c.runoob.com/front-end/53/ 

 

2. XML VS JSON

2.1 共同点

JSON 和 XML 都用于 —— 接收 web 服务端的数据

// JSON
{
    "pollutions": [
        { "name":"miaomiao" , "url":"www.miaomiao.com" }, 
    ]
}
 
// XML
  <site>
    <name>miaomiaoname> <url>www.miaomiao.comurl>
  site>

• 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) {
  // 如果值为字符串格式，则序列化返回 null
  if (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