【前端数据解析】JSON.stringify()的威力

JSON.stringify()的威力

首先我们在开发的过程当中遇到这样一个处理数据的需求

const todayILearn = {
  _id: 1,
  content: '今天学习 JSON.stringify()，我很开心！',
  created_at: 'Mon Jun 25 2020 14:03:55 GMT+0800 (中国标准时间)',
  updated_at: 'Mon Jun 25 2020 16:03:55 GMT+0800 (中国标准时间)'
}

我们需要将上面这个对象处理成下面这个对象

const todayILearn = {
  id: 1,
  content: '今天学习 JSON.stringify()，我很开心！',
  createdAt: 'Mon Jun 25 2020 14:03:55 GMT+0800 (中国标准时间)',
  updatedAt: 'Mon Jun 25 2020 16:03:55 GMT+0800 (中国标准时间)'
}

也就是在不改变属性的值的前提下，将对象属性修改一下。 把_id改成 id，把 updated_at 改成 updatedAt，把 created_at 改成 createdAt。

方案一：一次遍历+多声明一个变量

// 多一个变量存储
const todayILearnTemp = {};
for (const [key, value] of Object.entries(todayILearn)) {
  if (key === "_id") todayILearnTemp["id"] = value;
  else if (key === "created_at") todayILearnTemp["createdAt"] = value;
  else if (key === "updatedAt") todayILearnTemp["updatedAt"] = value;
  else todayILearnTemp[key] = value;
}
console.log(todayILearnTemp);

// 结果：
 { id: 1,
  content: '今天学习 JSON.stringify()，我很开心！',
  createdAt: 'Mon Jun 25 2020 14:03:55 GMT+0800 (中国标准时间)',
  updated_at: 'Mon Jun 25 2020 16:03:55 GMT+0800 (中国标准时间)' 
 }

方案一完全没有问题可以实现。但是多声明了一个变量又加上一层循环并且还有很多的 if else 语句，怎么都显得不太优雅。

方案二：暴力 delete 属性和增加属性

// 极致的暴力美学
todayILearn.id = todayILearn._id;
todayILearn.createdAt = todayILearn.created_at;
todayILearn.updatedAt = todayILearn.updated_at;
delete todayILearn._id;
delete todayILearn.created_at;
delete todayILearn.updated_at;
console.log(todayILearn);

{ 
  content: '今天学习 JSON.stringify()，我很开心！',
  id: 1,
  createdAt: 'Mon Jun 25 2020 14:03:55 GMT+0800 (中国标准时间)',
  updatedAt: 'Mon Jun 25 2020 16:03:55 GMT+0800 (中国标准时间)' 
}

直接 delete 暴力解决太粗鲁了，而且有一个缺点，属性的顺序可能会发生改变。

方案三：序列化+ replace 美学典范

const mapObj = {
  _id: "id",
  created_at: "createdAt",
  updated_at: "updatedAt"
};
JSON.parse(
  JSON.stringify(todayILearn).replace(
    /_id|created_at|updated_at/gi,
    matched => mapObj[matched])
    )

 { 
  id: 1,
  content: '今天学习 JSON.stringify()，我很开心！',
  createdAt: 'Mon Jun 25 2020 14:03:55 GMT+0800 (中国标准时间)',
  updatedAt: 'Mon Jun 25 2020 16:03:55 GMT+0800 (中国标准时间)' 
 }

瞬间感觉非常优雅和舒服，有木有！

补充：

JSON.parse(JSON.stringify(obj))我们一般用来深拷贝，其过程说白了 就是利用JSON.stringify() 将js对象序列化（JSON字符串），再使用JSON.parse来反序列化(还原)js对象；

序列化的作用是存储(对象本身存储的只是一个地址映射，如果断电，对象将不复存在，因此需将对象的内容转换成字符串的形式再保存在磁盘上来传输。

1、如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式。而不是时间对象；

var test = {
    name: 'a',
    date: [new Date(1536627600000), new Date(1540047600000)],
};

let b;
b = JSON.parse(JSON.stringify(test))

总结几点：

• undefined、任意的函数以及 symbol 作为对象属性值时 JSON.stringify() 对跳过（忽略）它们进行序列化

• undefined、任意的函数以及 symbol 作为数组元素值时，JSON.stringify() 将会将它们序列化为 null

• undefined、任意的函数以及 symbol 被 JSON.stringify() 作为单独的值进行序列化时，都会返回 undefined

• 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。

• const data = {
    a: "aaa",
    b: undefined,
    c: Symbol("dd"),
    fn: function() {
      return true;
    },
    d: "ddd"
  };
  JSON.stringify(data); // 输出：？
  // "{"a":"aaa","d":"ddd"}"
  
  JSON.stringify(["aaa", undefined, function aa() {
      return true
    }, Symbol('dd'),"eee"])  // 输出：？
  
  // "["aaa",null,null,null,"eee"]"
  

  之前已经了解到JSON.stringify() 序列化时会忽略一些特殊的值，所以不能保证序列化后的字符串还是以特定的顺序出现（数组除外）。

• JSON.stringify() 将会正常序列化 Date 的值。

  JSON.stringify({ now: new Date() });
  // "{"now":"2019-12-08T07:42:11.973Z"}"
  

• NaN 和 Infinity 格式的数值及 null 都会被当做 null。

  JSON.stringify(NaN)
  // "null"
  JSON.stringify(null)
  // "null"
  JSON.stringify(Infinity)
  // "null"
  

• 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。

  JSON.stringify([new Boolean(false)，new Number(1), new String("false")]);
  // "[false，1,"false"]"
  

• 其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性。

  // 不可枚举的属性默认会被忽略：
  JSON.stringify( 
      Object.create(
          null, 
          { 
              x: { value: 'json', enumerable: false }, 
              y: { value: 'stringify', enumerable: true } 
          }
      )
  );
  // "{"y","stringify"}"
  

• 之前说的实现深拷贝最简单粗暴的方式就是序列化：JSON.parse(JSON.stringify())，这个方式实现深拷贝会因为序列化的诸多特性导致诸多的坑点：比如现在我们要说的循环引用问题。

  // 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。 
  const obj = {
    name: "loopObj"
  };
  const loopObj = {
    obj
  };
  // 对象之间形成循环引用，形成闭环
  obj.loopObj = loopObj;
  function deepClone(obj) {
    return JSON.parse(JSON.stringify(obj));
  }
  deepClone(obj)
  /**
   VM44:9 Uncaught TypeError: Converting circular structure to JSON
      --> starting at object with constructor 'Object'
      |     property 'loopObj' -> object with constructor 'Object'
      --- property 'obj' closes the circle
      at JSON.stringify (<anonymous>)
      at deepClone (<anonymous>:9:26)
      at <anonymous>:11:13
   */
  

  对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。

  这也就是为什么用序列化去实现深拷贝时，遇到循环引用的对象会抛出错误的原因。