JSON.stringify中undefined问题

5大大大大雄

2022-10-23 455 阅读1分钟

在项目中，通过JSON.stringify和JSON.parse两个组合，快速深度复制对象。但是其中会存在一些比较特殊的坑，需要特别注意。比如对象中某些属性是存在的，但是值未赋值，导致值为undefined,使用JSON.stringify，会默认这个属性过滤掉，从而引起表单缺少字段的bug产生

1、方法定义

JSON.stringify(value, replacer, space)
/* 其中后面两个参数是可选
replacer：一个改变字符串化过程行为的函数
space：用于在输出 JSON 字符串中插入空格（包括缩进、换行符等）以提高可读性的字符串或数字
*/

2、bug原因

undefined、Function和Symbol值不是有效的 JSON 值。如果在转换过程中遇到任何此类值，则它们要么被省略（在对象中找到），要么被更改为null（在数组中找到）

3、处理

可以通过replacer，给指定这个属性设置初始值

function replacer(key, value) {
  // Filtering out properties
  if (key==='transport'&&typeof value === 'undefined') {
    return false;
  }
  return value;
}

const foo = {
  foundation: "Mozilla",
  model: "box",
  week: 45,
  transport: undefined,
};
JSON.stringify(foo, replacer);

也可以一开始直接设置对应的值，或者不使用JSON.stringify和JSON.parse深度复制对象

4、参考

JSON.stringify其他注意点