彻底弄懂JSON.stringify()

思考

以下代码执行结果是什么？

let list = [
  {
    name: 'leo',
    age: 18,
    like: undefined
  },
  {
    name: 'lion',
    age: 25,
    like: undefined
  }
]
console.log(JSON.stringify(list),'***JSON.stringify***')

带着疑问，一步步彻底了解 JSON.stringify()。（答案在文章末尾）

JSON.stringify() 的作用

JSON.stringify() 可以将 JavaScript 对象或值转换为 JSON 字符串（也称序列化）。

console.log(typeof {name:'leo',age:18})   // object
console.log(typeof JSON.stringify({name:'leo',age:18}))   // string
 
console.log(JSON.stringify({name:'leo',age:18}))   // '{"name":"leo","age":18}'

JSON.stringify() 有几点需要注意的地方，我们需要了解其使用规则，避免出现bug。

JSON.stringify() 的规则

如果目标对象存在 toJSON()，它负责定义哪些数据将被序列化

let obj = {
  name: 'leo',    
  age: 18,
  toJSON: function(){
    return '我是被序列化的部分'
  }
}
console.log(JSON.stringify(obj))   // '我是被序列化的部分'

Boolean、Number、String 对象在序列化过程中被转换为对应的原始值，符合传统的转换语义

let obj = {
  name: new String('leo'),
  age: new Number(18),
  like: new Boolean(true)
}
console.log(JSON.stringify(obj))   // '{"name":"leo","age":18,"like":true}'

undefined、Function 和 Symbol 不是有效的 JSON 值。

对象 (在对象中会被忽略)

let obj = {
  name: Symbol('leo'),
  age: undefined,
  like: function(){}
}
console.log(JSON.stringify(obj))   // {}
// 对象被序列化，undefined、Symbol、Function 忽略

数组 (在数组中会变为 null)

let arr = [Symbol('leo'), undefined, function(){}, 'lion']
console.log(JSON.stringify(arr))   // '[null,null,null,"lion"]'
// 数组被序列化，undefined、Symbol、Function 更改为 null

所有 Symbol - key 属性将被完全忽略

let obj = {
  [Symbol('name')]: 'leo',
  [Symbol('age')]: 18
}
console.log(obj)   // {Symbol(name): 'leo', Symbol(age): 18}  [[Prototype]]: Object
console.log(JSON.stringify(obj))   // {}

Date 的实例通过返回一个字符串来实现 toJSON()（与 date.toISOString() 相同）。因此，它们被视为字符串

console.log(new Date().toISOString())   // "2022-07-13T12:59:35.074Z"
console.log(JSON.stringify(new Date()))   // "2022-07-13T12:59:35.074Z"

数字 Infinity 和 NaN 以及 null 值都被认为是 null

let obj = {
  num1: Infinity,
  num2: NaN,
  num3: null,
  num4: 18
}
console.log(JSON.stringify(obj))   // '{"num1":null,"num2":null,"num3":null,"num4":18}'

所有其他 Object 实例（包括 Map、Set、WeakMap 和 WeakSet）仅序列化其可枚举的属性

let obj = {}
Object.defineProperties(obj,{
  name: {
    value: 'leo',
    enumerable: true
  },
  age: {
    value: 18,
    enumerable: false   // 不可枚举属性
  }
})
console.log(JSON.stringify(obj))   // '{"name":"leo"}'

找到循环引用时抛出 TypeError（“循环对象值”）异常

let obj = {
  name: 'leo',
  age: 18
}
obj.children = obj
console.log(JSON.stringify(obj))

完整语法

JSON.stringify(value[, replacer [, space]])

value（必选）

将要序列化成一个JSON 字符串的值。

replacer（可选）

可以是数组或函数。如果是数组，则只有包含在这个数组中的属性名才会被序列化。如果是函数，则把序列化后的每一个对象传进函数里进行处理。

• 数组

let students = {
 name: "leo",
 age: 18,
 like: "sing"
}
let arr = ["name","age"]   // 序列化数组存在的属性，不存在的忽略
let obj = JSON.stringify(students, arr)
console.log(obj)
// '{"name":"leo","age":18}'

• 函数

function replacer(key, value) {
  if (typeof value === "string") {   // 如果是字符串，则当成 undefined 序列化，即忽略
    return undefined
  }
  return value
}
 
let foo = {
  name: "leo",
  model: "box",
  age: 18,
  transport: "car",
  month: 7
};
let obj = JSON.stringify(foo, replacer)
console.log(obj)
// '{"age":18,"month":7}'

space（可选）

指定缩进用的空白字符串。如果省略的话，那么显示出来的值就没有分隔符。如果是一个数字，那么它就定义缩进几个字符，范围是 0-10（数字小于1，则默认为0，大于10，则默认为10）。如果是一些转义字符，比如“\t”，表示回车，那么它每行一个回车。如果仅仅是字符串，就在每行输出值的时候把这些字符串附加上去。

console.log(JSON.stringify({ a: 2 }, null, " "))
/* 输出结果：
'{
  "a": 2
}'
*/
 
console.log(JSON.stringify({ name: "leo", age: 18  }, null, '\t'))
/* 输出结果：
'{
    "name": "leo",
    "age": 18
}'
*/
 
let students = {
  name: "leo",
  age: 18,
  like: "run"
}
let arr = ["name","age"]
console.log(JSON.stringify(students, arr, "--"))
/* 输出结果：
'{
--"name": "leo",
--"age": 18
}'
*/

看完之后，上面的思考题，你知道执行结果是什么了吗???

'[{"name":"leo","age":18},{"name":"lion","age":25}]'