JSON.stringify() 的妙用
描述
JSON.stringify()
的作用就是把 JavaScript 对象或数组或其他简单值转换为字符串。它还可以用于对象的深拷贝;对 JSON 字符串进行格式化(缩进);在转换之前对值进行替换操作。
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比望都网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式望都网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖望都地区。费用合理售后完善,十年实体公司更值得信赖。
特殊类型的处理
JSON.stringify()
遇到函数、日期等类型的值会进行特殊处理。为了让输出结果好看一些,在函数的第三个参数,指明字符串化后的结果缩进 2 个空格:
let jsonStr = JSON.stringify(
{
func: function () {},
date: new Date(),
unde: undefined,
null: null,
nan: NaN,
infi: Infinity,
infi0: -Infinity,
regp: new RegExp(/Android|iPad/)
},
null,
2
);
console.log(jsonStr);
输出结果如下所示:
{
"date": "2022-08-31T13:34:25.223Z",
"null": null,
"nan": null,
"infi": null,
"infi0": null,
"regp": {}
}
JSON.stringify()
对以下类型的值进行特殊处理:
- 函数:函数直接被忽略,不输出到字符串中。
- Date:原本 new 一个日期的结果时 "Wed Aug 31 2022 21:38:37 GMT+0800 (中国标准时间)",在被字符串化之后变成了如上格式。
- undefined:undefined 直接被忽略,不输出。
- null:null 就是 null 本身。
- NaN:Nan 类型被转化成 null。
- Infinity 和 -Infinity:都被转化成 null。
- RegExp:RegExp 直接输出一个空对象 {}。
运用场景
对象深拷贝
通过=
无法真正拷贝一个对象,而是引用对象的内存地址,详细请看JavaScript - 对象引用和复制。
JSON.stringify()
和JSON.parse()
一起搭配使用就可以深拷贝一个对象:
let obj = { age: 10, name: "XiaoMing" };
let copy = JSON.parse(JSON.stringify(obj));
obj.age = 12;
copy.age = 14;
console.log(obj.age, copy.age); // => 12, 14
修改原对象obj
的 age 属性之后不影响深拷贝之后的对象copy
的属性。
存储对象到 LocalStorage
window.localStorage.setItem(key, value)
的两个参数都只接受字符串类型的值,如果强行把对象、数组存储到本地存储里面,最终的结果是:
所以,这时候就不得不把对象、数组进行字符化,也就是用JSON.stringify()
:
let obj = { age: 10, name: "XiaoMing" };
window.localStorage.setItem("obj", JSON.stringify(obj));
然后就能正常显示出对象了:
如果从本地存储中拿这个值,不要忘记用JSON.parse()
解析字符串。
第二个参数
第二个参数可以传递一个函数也可以传递一个数组,每一种类型都有不同的作用。传递函数我们可以对原对象做一个过滤处理或者其他的操作,传递数组就是输出结果只保留数组里面给的那几个 key 以及对应的值。
传递函数
函数接收两个值,key 和 value。key 不可以被改变,value 可以改变,且在改变之后必须要把 value 返回出去,否则无法执行下一步,导致最终只输出一个空。
let obj = { age: 10, name: "XiaoMing" };
let json = JSON.stringify(obj, (key, value) => {
if (key === "age") {
value = 20;
}
return value;
});
console.log(json);
打印结果:
传递数组
对于输出结果,我们要进行一些取舍,就可以传递一个数组,指定只输出哪些 key 和 value:
let obj = { age: 10, name: "XiaoMing" };
let json = JSON.stringify(obj, ["age"]);
console.log(json);
打印结果:
那如果希望字符化后的对象只保留除了一些 key 以外的所有其他 key 和 value 呢?我写了一个exclude
函数,只针对于对象,去除不需要的对象字段,其余都保留输出:
function exclude(obj, exc) {
for (let i in exc) {
delete obj[exc[i]];
}
return Object.keys(obj);
}
let obj = { age: 10, name: "XiaoMing", school: "希望小学", address: "北京市朝阳区xxx号" };
let json = JSON.stringify(obj, exclude(obj, ["age", "address"]));
打印结果:
第三个参数
默认打印输出的 JSON 字符串是一行,没有任何缩进的,第三个参数就是缩进多少个空格。
JSON.stringify(obj, exclude(obj, ["age", "address"]), 2);
缩进 2 个字符的结果:
{
"name": "XiaoMing",
"school": "希望小学"
}
本文题目:JSON.stringify() 的妙用
分享路径:http://scyanting.com/article/dsojgps.html