思考
以下代码执行结果是什么？
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}]'
