你不知道的 JSON.stringify() 的威力

最新推荐文章于 2023-07-09 11:26:19 发布

弹铁蛋同学

最新推荐文章于 2023-07-09 11:26:19 发布

阅读量1.4k

点赞数 2

分类专栏：公众号：前端铁蛋文章标签：前端 JavaScript Vue React 程序员

本文链接：https://blog.csdn.net/qq_38807395/article/details/103494078

版权

本文详细探讨了JSON.stringify()的九大特性，包括其在处理特殊值时的行为、属性顺序的不确定性、toJSON()方法的影响等。同时，文章介绍了第二个参数的两种形式，作为函数时能打破常规特性的限制，作为数组时指定要序列化的属性。第三个参数用于控制输出的缩进。通过实例，作者揭示了如何利用这些特性进行数据处理。

摘要由CSDN通过智能技术生成

前言

其实有很多有用的东西，当时学习了，也记住了，但是时间久了就是记不住，所以导致在日常开发中总是想不起来原来这个东西可以这么用，而去选择了更加复杂和麻烦的方式。其实我们日常学习的知识就是拿来用的，即使你今天把知识点背下来了，没有去思考这个知识点我们可以用来干嘛，不需要几天就会慢慢地忘掉。所以今天我们来了解一下在日常学习时你遗漏掉或者忘掉或者没有思考过的你不知道的 JSON.stringify() 的威力。

原文戳我、 Github 戳我

通过需求学习`JSON.stringify()`

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

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

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

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

也就是在不改变属性的值的前提下，将对象属性修改一下。把_id 改成 id，把 updated_at 改成 updatedAt，把 created_at 改成 createdAt。我们现在通过这个小小的需求来见识一下 JSON.stringify() 的强大吧。

首先要解决这个问题我们有很多种解决方式，我们先提供两种不优雅的解决方案：

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

// 多一个变量存储
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 Nov 25 2019 14:03:55 GMT+0800 (中国标准时间)',
//  updated_at: 'Mon Nov 25 2019 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 Nov 25 2019 14:03:55 GMT+0800 (中国标准时间)',
//  updatedAt: 'Mon Nov 25 2019 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_