web前端开发

您现在的位置是:首页>前端开发

JavaScript

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

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

 

 

前言

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

通过需求学习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);// 太暴力

平面设计