前端需要知道的JSON.stringify的正确用法
1、API介绍
MDN官网简介：JSON.stringify(value， replacer, space) 方法将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。
2、常见场景
2.1 存入缓存
在一些存储缓存的场景（如：localStorage、sessionStorage、IndexedDB），不能直接存储对象，此时就需要对该对象进行序列化转化为字符串再进行存储：
let obj = {name: "sishen",age: 18
}
localStorage.setItem("obj", JSON.stringify(obj))
2.2 深拷贝
对对象进行深拷贝，但其中会存在一些陷阱，需要谨慎使用，详情往下看
let obj = {name: "sishen",age: 18,course: {chinese: 98,math: 80}
}
let obj2 = JSON.parse(JSON.stringify(obj))
obj === obj2 // false
obj.course === obj2.course // false
2.3 对写入文件进行格式化
当我们在使用 nodejs 提供的 fs模块 读取一些 json 文件时，在写入 json文件时 可以防止文件的格式很乱，可以使用 stringify 的第三个参数传入一个数字，对输出值做一个格式化处理：
JSON.stringify(obj, null, 4) //使用四个空格缩进
3、不能被序列化的属性
在序列化一个对象时，如果该对象包括以下这些值，会导致返回的对象存在异常：
-
undefined、函数：当遇到属性值类型为 undefined 或者 函数，无法进行转化，该属性会被移除
JSON.stringify({a:undefined， b:()=>{}}) // '{}' -
NaN、Infinity、-Infinity：当遇到三个类型任何一个，都会被转化为 null
JSON.stringify({a:NaN,b:Infinity, c:-Infinity}) // '{"a":null,"b":null,"c":null}'
4、当对象循环引用自身解决方案
当一个对象内部的属性指向自身时，会导致序列化的函数执行报错，此时需要使用第二个参数传入一个函数解决：
let obj = {name: "sishen",age: 18
}
obj.obj = obj
// 直接序列化会报错
JSON.stringify(obj) // Uncaught TypeError: Converting circular structure to JSON
// 需要传入函数
let cache = []
JSON.stringify(obj, function(key, value) {// 返回值如果是对象，则将循环对象执行该函数，并且首次传入对象if (typeof value === 'object' && value != null) {if(cache.includes(value)) return;cache.push(value) }return value;
});
5、JSON.parse 问题
在解析字符串时，如果传入一个 undefined 或者 函数 会导致报错，因此如果需要做封装需要注意：
// 以下两种调用方式都会导致报错
JSON.parse(undefined)
JSON.parse(()=>{})
编辑 | sishen
来源 | 前端兔
公众号 | 前端兔
关注公众号查看更多前端知识分享~~