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
来源 | 前端兔
公众号 | 前端兔
关注公众号查看更多前端知识分享~~