JSON.stringify的认知历程

最新推荐文章于 2024-08-16 08:56:50 发布

原创最新推荐文章于 2024-08-16 08:56:50 发布 · 216 阅读

CC 4.0 BY-SA版权

文章标签：

43 篇文章

订阅专栏

本文从初识JSON.stringify的基础用法，到掌握其高级特性，如使用缩进美化输出、通过第二个参数处理undefined值及选择性序列化属性，带你全面了解JSON.stringify在前端开发中的应用。

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

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

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

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

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

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

再然后，我遇到了一个问题：

如果对象中属性的值是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()很详细