JSON.stringify() 语法
JSON.stringify(value[, replacer[, space]])


value 被序列化为字符串的对象

replacer 根据类型不同,其行为也不一样。如果是一个函数类型,则相当于是一个filter,可以对序列化的键值对进行加工处理;如果是一个数组,则只有符合数组中名称的key才会被输出

space 如果为0或不填,则不进行格式化处理;如果为大于0的数值,则表示每级缩进空格数;如果是一个字符串,则表示每级缩进时替代空格进行填充的字符串内容。


通过以下的data作为示例:

let data = {
name: 'wang',
age: 28,
address: null,
favorites: undefined,
company: {
name: 'world village',
address: 'Beijing city'
}
}

不加任何参数,直接输出:

console.log(JSON.stringify(data))

结果为:

{"name":"wang","age":28,"address":null,"company":{"name":"world village","address":"Beijing city"}}

第二个参数为数组:

console.log(JSON.stringify(data, ['name', 'age']))

结果为:

{"name":"wang","age":28}

第二个参数是一个函数:

console.log(
JSON.stringify(data, (k, v) => {
if ('age' == k) {
return undefined
}
return v
})
)

结果为:

{"name":"wang","address":null,"company":{"name":"world village","address":"Beijing city"}}

如果第三个参数为0或者null:

console.log(JSON.stringify(data, null, 0))

则结果为:

{"name":"wang","age":28,"address":null,"company":{"name":"world village","address":"Beijing city"}}

如果第三个参数为大于0的数值:

console.log(JSON.stringify(data, null, 2))

则结果为:

{
"name": "wang",
"age": 28,
"address": null,
"company": {
"name": "world village",
"address": "Beijing city"
}
}

如果第三个参数为字符串:

console.log(JSON.stringify(data, null, '**'))

则结果为:

{
**"name": "wang",
**"age": 28,
**"address": null,
**"company": {
****"name": "world village",
****"address": "Beijing city"
**}
}

如果过滤值为null或者undefined的键值对?

let data = {
name: 'wang',
age: 28,
address: null,
favorites: undefined,
men: true,
women: false,
company: {
name: 'world village',
address: 'Beijing city'
}
}
console.log(
JSON.stringify(data, (k, v) => {
if (null != v && undefined != v) return v
})
)

前端技术之:JSON.stringfy详细说明的更多相关文章

  1. 【前端】JSON.stringfy 和 JSON.parse(待续)

    JSON.stringfy 和 JSON.parse(待续) 支持全局对象JSON的浏览器有:IE8+, FireFox3.5+, Safari4+, Chrome, Opera10.5+ JSON. ...

  2. 让老板虎躯一震的前端技术,KPI杀手

    本文由云+社区发表 作者:思衍Jax 天下武功,唯 (wei) 快(fu) 不(bu) 破(po). 随着近几年的前端技术的高速发展,越来越多的团队使用 React.Vue 等 SPA 框架作为其主要 ...

  3. 绝版珍珍藏:web前端技术学习指南

    绝版珍珍藏:web前端技术学习指南 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的 ...

  4. 当下较热web前端技术汇总

    Web前段技术发展很快,主流技术日新月异,想想自己刚毕业那会用的asp技术,现在已经很少有主流网站在使用了.再到后来的J2EE框架,然后SpringMVC大行其道,但是最近各种js框架被广为传播,Ht ...

  5. 大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app

    大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...

  6. 解密国内BAT等大厂前端技术体系-美团点评之下篇(长文建议收藏)

    引言 在上篇中,我已经介绍了美团点评的业务情况.大前端的技术体系,其中大前端的技术全景图如下: 上篇重点介绍了工程化和代码质量的部分,工程化涵盖了客户端持续集成平台-MCI.全端监控平台-CAT.移动 ...

  7. 解密国内BAT等大厂前端技术体系-美团点评之上篇(长文建议收藏)

    引言 进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也 ...

  8. SLAM前端技术选择思考

    以前是专门做室内定位技术研究的,先后学习和分析了多种基于电磁的室内定位技术,如WiFi指纹定位(先后出现过RSSI.CTF.CIR多种指纹特征).WiFi ToF定位.低功耗蓝牙BLE以及iBeaco ...

  9. 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)

    用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...

随机推荐

  1. .Net Core 商城微服务项目系列(七):使用消息队列(RabbitMQ)实现服务异步通信

    RabbitMQ是什么,怎么使用我就不介绍了,大家可以到园子里搜一下教程.本篇的重点在于实现服务与服务之间的异步通信. 首先说一下为什么要使用消息队列来实现服务通信:1.提高接口并发能力.  2.保证 ...

  2. 基 B/S 平台的机房监控云平台-U位篇

    前言 机柜 U 位管理是一项突破性创新技术--继承了 RFID 标签(电子标签)的优点的同时,完全解决了 RFID 技术(非接触式的自动识别技术)在机房 U 位资产监控场应用景中的四大缺陷,采用工业互 ...

  3. CentOS7下mongodb忘记密码后重置密码

    新装mongodb后,结果一段时间没有用,密码给忘记了,只能重置密码了. 步骤如下: 1.找到mongodb的配置文件 通过ps -ef|grep mongod找到mongodb的配置文件mongod ...

  4. pywintypes.com_error: (-2147352567, '发生意外 解决方案

    在使用win32com处理Excel的时候,遇到pywintypes.com_error: (-2147352567 错误. 百度.Google各种方法不得其解,和以下网页类似——http://blo ...

  5. Angular2+之使用FormGroup、FormBuilder和Validators对象控制表单(取值、赋值、校验和是否可编辑等)

    1.要使用Angular自带的表单控制需要先引入相关模块(.ts文件): import { FormGroup, //表单对象类 FormBuilder, //表单生成工具类 Validators} ...

  6. IDEA 学习笔记之 Spark/SBT项目开发

    Spark/SBT项目开发: 下载Scala SDK 下载SBT 配置IDEA SBT:(如果不配置,就会重新下载SBT, 非常慢,因为以前我已经下过了,所以要配置为过去使用的SBT) 新建立SBT项 ...

  7. 色即是空,空即是色---java有关null的几件小事

    故事背景 ---摩诃般若波罗蜜多心经: 观自在菩萨,行深般若波罗蜜多时,照见五蕴皆空,度一切苦厄.舍利子,色不异空,空不异色:色即是空,空即是色.受想行识,亦复如是.舍利子,是诸法空相,不生不灭,不垢 ...

  8. 最近学到的Git知识,大厂的Git机制还是很方便的

    本文首发于微信公众号:程序员乔戈里 转载请注明:https://blog.csdn.net/WantFlyDaCheng/article/details/102538508 一.两次的 git com ...

  9. 使用 Sealos 在 3 分钟内快速部署一个生产级别的 Kubernetes 高可用集群

    本文首发于:微信公众号「运维之美」,公众号 ID:Hi-Linux. 「运维之美」是一个有情怀.有态度,专注于 Linux 运维相关技术文章分享的公众号.公众号致力于为广大运维工作者分享各类技术文章和 ...

  10. 编程杂谈——使用emplace_back取代push_back

    近日在YouTube视频上看到关于vector中emplace_back与push_back区别的介绍,深感自己在现代C++中还是有不少遗漏的知识点,遂写了段代码,尝试比较两者的差别. 示例代码 #i ...