JavaScript中的JSON方法

一、JSON 方法的基本介绍

JSON.stringify 是日常开发中经常用到的 JSON 对象中的一个方法，JSON 对象包含两个方法：一是用于解析成 JSON 对象的 parse()；二是用于将对象转换成 JSON 字符串方法的 stringify()。

二、JSON.parse

用于解析 JSON 字符串，构造由字符串描述的 JavaScript 值或对象

该方法有两个参数：第一个参数是需要解析处理的 JSON 字符串，第二个参数是可选参数提供可选的 reviver 函数，用在返回之前对所得到的对象执行变换操作

该方法的语法为：JSON.parse(text[,reviver])

const json = '{"result":true,"count":2}'
const obj = JSON.parse(json)
console.log(obj.count) // 2
console.log(obj.result) // true
/* 带第二个参数的情况 */
JSON.parse('{"p":5}', function (k, v) {
  if (k === '') return v // 如果k不是空
  return v * 2 // 就将属性值变为原来的2倍返回
}) // {p:10}
// 我们可以将一个符合 JSON 格式的字符串转换成对象返回；
// 带第二个参数的情况，可以将待处理的字符串进行一定的操作处理

三、JSON.stringify

将一个 JavaScript 对象或值转换为 JSON 字符串。

默认该方法其实有三个参数：第一个参数是必选，后面两个是可选参数非必选。（第一个参数传入的是要转换的对象；第二个是一个replacer函数，比如指定的replacer是数组，则可选择性地仅处理包含数组指定的属性；第三个参数用来控制结果字符串里面的间距，后面两个参数整体用得比较少）

该方法的语法为：JSON.stringify(value[,replacer[,space]])

JSON.stringify({ x: 1, y: 2 })
// "{"x":1,"y":2}"
JSON.stringify({ x: [10, undefined, function () {}, Symbol('')] })
// "{"x":[10,null,null,null]}"
/* 第二个参数的例子 */
function replacer(key, value) {
  if (typeof value === 'string') {
    return undefined
  }
  return value
}
var foo = {
  foundation: 'Mozilla',
  model: 'box',
  week: 4,
  transport: 'car',
  month: 7,
}
var jsonString = JSON.stringify(foo, replacer)
console.log(jsonString)
// "{"week":4,"month":7}"
/* 第三个参数的例子 */
JSON.stringify({ a: 2 }, null, ' ')
/* "{
  "a": 2
}" */
JSON.stringify({ a: 2 }, null, '')
// "{"a":2}"

// 增加第二个参数replacer带来的变化：通过替换方法把对象中的属性为字符串的过滤掉，在stringify之后返回的仅为数字的属性变成字符串之后的结果
// 当第三个参数插入的是多个空格的时候，则会增加结果字符串里面的间距数量

四、如何手动实现？

1.分析各种数据类型及边界情况

对于包含循环引用的对象（深拷贝那讲中也有提到）执行此方法，会抛出错误

2.代码逻辑实现

我们先利用 typeof 把基础数据类型和引用类型分开，分开之后再根据不同情况来分辨处理不同的情况

function jsonStringify(data) { let type = typeof data if (type !== 'object') { let result = data // data 可能是基础数据类型的情况在这里处理 if (Number.isNaN(data) || data === Infinity) { // NaN 和 Infinity 序列化返回 "null" result = 'null' } else if ( type === 'function' || type === 'undefined' || type === 'symbol' ) { // 由于 function 序列化返回 undefined，因此和 undefined、symbol一起处理 return undefined } } }