原文地址: https://github.com/NieZhuZhu/Blog/issues/1

前言

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

[转] 你不知道的 JSON.stringify() 的威力相关推荐

  1. 你不知道的冷知识:JSON.stringify 居然还能这样用?

    点击蓝字前端真好玩关注,回复"1"加入前端进阶群 与大家一起成长 JSON.stringify() 这个 API 想必大家都用过,可以帮助我们将数据解析成字符串类型,如下是个例子: ...

  2. JSON.stringify()

    写在前边 不言而喻,JSON.stringify() 是用来将合法的JSON数据字符串化的!然而在正常的工作中我们用到的只是最基础的功能:今天我们就探索不一样的JSON.stringify(). 基础 ...

  3. 9 个JSON.stringify 的秘密大多数开发人员却不知道

    前端Q 我是winty,专注分享前端知识和各类前端资源,乐于分享各种有趣的事,关注我,一起做个有趣的人- 公众号 点击上方 前端Q,关注公众号 回复加群,加入前端Q技术交流群 英文 | https:/ ...

  4. JSON.stringify() / JSON.parse() / JSON 真是个好东西

    目录 1. JSON 基本概念 1.1 JavaScript 对象表示法 1.2 JSON 文件 1.3 JSON 语法 2. XML VS JSON 2.1 共同点 2.2 不同点 2.3 使用步骤 ...

  5. json.parse()和json.stringify()

    json.parse() 用于从一个字符串解析出json对象 var str = '{"name":"huangzhong","age":& ...

  6. JSON.stringify报cyclic object value错误

    这是一个典型的循环引用的错误,一个对象里引用自己就会立刻得到这个错误: obj = { x:555, y: "hi" }; obj.myself = obj;try{json = ...

  7. (转)JS之——解决IE6、7、8使用JSON.stringify报JSON未定义错误的问题

    https://blog.csdn.net/l1028386804/article/details/53439755 在通过JavaScript将对象类型的参数通过JSON.stringify转换成字 ...

  8. ajax 时间格式string,ajax 数据请求:json格式在浏览器变成了string ,使用JSON.stringify(params)方法...

    var params = { md5str: "sf", datastr: "sf", } var ajaxRequest = $.ajax({ url: ur ...

  9. 理解JSON对象:JSON.parse、 JSON.stringify

    何时是JSON,何时不是JSON? JSON就是一个有特殊规则的字符串,按照这个规则我们就可以把这个字符串解析成JS对象. JSON是设计成描述数据交换格式的,他也有自己的语法,这个语法是JavaSc ...

最新文章

  1. 全球AI人才数量“热图”分析:中国全球第7 欧洲是人才聚集地
  2. GitHub 发布中文版帮助文档,这翻译也是醉了~
  3. php负载均衡慕课网,Nginx实现负载均衡
  4. Tensorflow2.x代码实现计算Top-k Accuracy
  5. 物联网-移远M26模块MQTT开发(AT命令)
  6. ios 自定义拍照页面_30分钟搞定iOS自定义相机
  7. 为什么所有浏览器的userAgent都带Mozilla
  8. PyTorch入门(一)数据集的一些基础操作
  9. 嵌入式Linux开发|点亮那颗LED灯
  10. Linux指令篇:文件系统--fdisk(转)
  11. HTTP 多处理模块(MPM)
  12. UDP通讯获取的IP前有ffff的标记,去掉的方法
  13. 【技术贴】图文教程 最新QQ空间免费背景音乐添加方法||QQ空间免费添加背景音乐。...
  14. ubuntu无法清空回收站解决办法
  15. 阿里云视频服务之点播服务
  16. linux下开启、关闭、重启mysql服务命令
  17. 【日常问题】chrome开启无痕模式,屏蔽第三方cookie
  18. linux mtr 安装,遇到网络问题?别慌!MTR来帮您
  19. windows下虚拟机ping不通主机的原因+我的解决办法
  20. 高频变压器的设计与制作

热门文章

  1. springboot 集成百度编辑器ueditor
  2. 全双工串口、半双工串口总线及其转换
  3. Hifiasm-meta | 你没看错!基于宏基因组的完成图!!
  4. (Oracle入门篇1)Oracle增删改查语句
  5. (收藏)个人隐私设计保护原则
  6. (数据结构)1.实现顺序表的各种基本运算的算法 2.实现单链表的各种基本运算的算法
  7. 带大家写一波微信公众号的爬取!谁说微信爬不了的!
  8. Java 生成二维码 Qrcode
  9. windows访问uvc摄像头扩展单元api库分享
  10. Android 点击图标使APP由后台切换至前台重新启动欢迎页的问题