JSON.stringify的认知历程

409 阅读1分钟

阶段 1

初入前端,认识到JSON.stringify可以序列化对象为一个字符串,在开发中提供了许多便利。

JSON.stringify({ x: 5, y: 6 });
//"{"x":5,"y":6}"

阶段 2

然后遇到一个需求是序列化字符串,且带有缩进格式化的方式显示在编辑器中。

才认识到,原来这个方法还可以传递3个参数。

第3个参数用于指定缩进用的空白字符串,用于美化输出(pretty-print)。

JSON.stringify({ x: 5, y: 6, z: {a: 1} }, null, 2);
/*
"{
  "x": 5,
  "y": 6,
  "z": {
    "a": 1
  }
}"
*/

阶段 3

再然后,我遇到了一个问题:

如果对象中属性的值是undefined,那么序列化之后这个属性会被忽略。

let person = {name: undefined, hobby: null, age: 18 };
JSON.stringify(person)
// "{"hobby":null,"age":18}"

然而在业务上即使该属性的值是undefined,也是有表达特殊含义的,必然需要传递。

原来此函数的第二个参数可以搞事情,如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理;

JSON.stringify(person, (k,v) => v===undefined ? null : v );
// "{"name":null,"hobby":null,"age":18}"

第二个参数还可以是一个数组。表示序列化后保留的属性

let person = {name: undefined, hobby: null, age: 18 };
JSON.stringify(person,["age"])

// "{"age":18}"

更多用法官方文档JSON.stringify()很详细