你不知道的冷知识:JSON.stringify 居然还能这样用?
点击蓝字前端真好玩关注,回复“1”加入前端进阶群 与大家一起成长
JSON.stringify()
这个 API 想必大家都用过,可以帮助我们将数据解析成字符串类型,如下是个例子:
const obj = {name: 'foo',level: 'low',age: '100',money: 'empty'
}
JSON.stringify(obj)
// "{"name":"foo","level":"low","age":"100","money":"empty"}"
想必这样的写法大家都知道,但是其实 JSON.stringify
总共接受三个参数。
第二个参数可以传入一个数组或者函数。
我们先来看看传入数组的话结果会是什么?
JSON.stringify(obj, ['name', 'age'])
// "{"name":"foo","age":"100"}"
当我们传入数组时候,只有数组内的属性名才会被正常序列化。
那么当第二个参数传入函数会发生什么呢?
const obj1 = { name: new Set([1]) }
JSON.stringify(obj1, (key, value) => {return value instanceof Set ? [...value] : value
})
// 正常序列化是 "{"name":{}}"
// 例子中的输出为 "{"name":[1]}"
我们都知道 JSON.stringify
是不能处理某些值的,就比如例子中的 Set
类型的值就不能正常序列化。但是其实我们可以通过传入函数的方式帮助我们将 Set
类型的值转换为数组类型,从而使得数据能够被正常序列化。
第三个参数可以传入数字或者字符串类型,该参数用于美化输出。正常来说输出的结果都是一行文本,在数据量小的时候阅读起来没啥压力,但是当数据量庞大的时候就会增加阅读难度。这个参数在这种时候就能帮助到我们。
JSON.stringify(obj, null, 2)
// "{
// "name": "foo",
// "level": "low",
// "age": "100",
// "money": "empty"
// }"
当传入数字时,每个属性都会换行并且带有缩进空格。
JSON.stringify(obj, null, '????')
// "{
// ????"name": "foo",
// ????"level": "low",
// ????"age": "100",
// ????"money": "empty"
//}"
当传入字符串时,每个属性照样都会换行并且在开头加上你传入的字符串。
以上就是本篇文章的内容了,虽然这单纯属于 API 范畴的知识,但是我相信很多人应该并不知道 JSON.stringify
还拥有这样的能力。
- END -
长按二维码关注,漫漫前端路,结伴同行
来自恺哥的推荐阅读
我就知道你在看!
你不知道的冷知识:JSON.stringify 居然还能这样用?相关推荐
- JS 你不知道的冷知识 (身为开发工程师的你 走了多少弯路?)
toLocaleString() toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串,并返回结果. new Date().toLocaleString() 默认显示的格 ...
- C++中一些你不知道的冷知识
1.explicit关键字 explicit用来防止由构造函数定义的隐式转换,比如: class Base base=10; 即Base类只有一个int类型的变量,explicit使用了以后,就不允许 ...
- 微波感应模块电路图_关于人体感应灯,你不知道的“冷”知识
早些年前,人体感应灯大多应用在小区楼道,公共洗手间等场所,"人来灯亮,人走灯灭",使他们在生活中极为常见. 近几年来,智能人体感应灯越来越多的应用到家庭生活中,给我们的生活带来很多 ...
- 怎么利用计算机自带功能删除垃圾,怎么清理系统垃圾-关于电脑垃圾清理你不知道的冷知识,如何用电脑自带的垃圾清理...
对于电脑来说我们一般都是需要定期去清理垃圾,否则的话电脑的运行速度只会越来越慢的,想要将电脑进行文件的清理,那么小伙伴们平时都是怎么处理的呢? 不说也知道,无非就是使用360杀毒软件或者是腾讯电脑管家 ...
- 小米计算机弹歌曲,趣味冷知识!小米的T9拨号键盘可以弹乐曲,没想到吧!快来试试!...
小伙伴们,大家好,小编是[漫画与笑话每一天],今天要为大家介绍的是:冷知识,它可以让人增长见识,开阔视野,还能启迪思维,引发强烈求知欲.和"冷笑话"属于另类幽默一样,冷知识虽冷门但 ...
- [转] 你不知道的 JSON.stringify() 的威力
原文地址: https://github.com/NieZhuZhu/Blog/issues/1 前言 其实有很多有用的东西,当时学习了,也记住了,但是时间久了就是记不住,所以导致在日常开发中总是想不 ...
- JSON.stringify()还可以这么用
最近做项目的时候遇到一个对象深拷贝的问题,网上看了下发现最为简便的方法是JSON.stringify(),比如你要深拷贝一个对象,可以这么做: var test={a:"hello" ...
- 趣味计算机冷知识,那些不为人知的计算机冷知识,还不码起来!
电脑已近称为我们生活密不可分的一部分,其实有很多习以为常的背后有着不一样的小故事,计算机的冷知识也有不少,每天了解一点点,让你离科技更近一步.比如电脑病毒的由来,又或者是键盘为啥不是按ABCDEFG的 ...
- 隐藏实力的 JSON.stringify,原来还可以这么用!
作者简介: 李中凯老师,8年前端开发,前端负责人,擅长JavaScript/Vue. 公众号:1024译站 掘金文章专栏:https://juejin.im/user/57c7cb8a0a2b5800 ...
最新文章
- android studio 2.1正式版,Android Studio 1.2 正式版发布
- 职业生涯中12个愚蠢想法
- 如何让IDEA启动多个SpringBoot实例
- logstash接收多台服务器日志_Logstash实践: 分布式系统的日志监控
- window xp系统安装php环境_Windows Server 2003及XP系统如何安装SQL Server 2000数据库?
- linux操作系统之读写锁
- php 操作 MySQL 中的Blob类型
- STM32 AES 加解密流程梳理
- CodeChef - ELHIDARR Find an element in hidden array(互动题)题解
- SpringMVC返回一个JSON对象到界面
- 网络工程师常见面试题,1分钟就能看完
- 浏览器edge插件的安全与个人隐私
- 女大学生 你的青春值多少钱
- 删除 drop truncate delete
- 什么是C语言,对C语言的基本认识,C语言开始。
- Python3之基础语法
- 进入和使用WinRE恢复环境
- 爬虫学习笔记(十八)—— 点触验证码:超级鹰、12306自动登录
- python以图搜图api_网络图片搜索-以图搜图【最新版】_自动识别接口_图像识别_数据API-云市场-阿里云...
- 如何反编译 cocos creator 生成 的jsc文件/反编译jsc文件(三) , 还原cocos creator 工程