JSON.stringify() / JSON.parse() / JSON 真是个好东西

news2024/10/6 2:21:49

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
<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) {
  // 如果值为字符串格式，则序列化返回 null
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}

const foodList = ['苹果', 666, '香蕉', 888]

console.log(JSON.stringify(foodList, replacer));