JSON.stringify格式化数据美化显示效果(不呆板地一行显示)

news2024/11/24 4:33:52

一.JSON.stringify

  1. 语法: JSON.stringify(value[, replacer[,space]])
  2. 第二个参数replacer: 过滤属性或者处理值
  3. 第三个参数space: 美化输出格式

第一个参数: 对象object等

第二个参数replacer:

  1. 如果该参数是一个函数: 则在序列化的过程中,被序列化的值的每个属性都会经过该函数的转换和处理
  2. 如果该函数是一个数组: 则只有包含在这个数组中的属性名才会被序列化到最终的JSON字符串中
  3. 如果该参数是null或者未提供,则对象所有的属性都会被序列化

第三个参数space:

  1. 如果参数是数字: 它代表有多少的空格; 上限为10. 该值若小于1,则意味着没有空格
  2. 如果该参数为字符串:(当字符串长度超过10个字母,取其前10个字母), 该字符串将被作为空格
  3. 如果该参数没有提供:(或者null), 将没有空格
const jsonObj = {
    "name": "牙膏",
    age: 45,
    "count": 10,
    "orderDetail": 32143214214,
    "orderId": 78909890,
    "more": {
        "desc": "描述"
    }
}
// 筛选数据
console.log(JSON.stringify(jsonObj, ['name', 'age']))//{"name":"牙膏","age":45}
const jsonString = JSON.stringify(jsonObj, function (key, value) {
    if (typeof value === 'string') {
        return undefined
    }
    return value
})
//{"age":45,"count":10,"orderDetail":32143214214,"orderId":78909890,"more":{}}
console.log(jsonString)
/**
 * {
    "name": "牙膏",
    "age": 45,
    "count": 10,
    "orderDetail": 32143214214,
    "orderId": 78909890,
    "more": {
        "desc": "描述"
    }
}
 */
// 格式化数据
console.log(JSON.stringify(jsonObj, null, '\t'))

注意: 如果需求中有要求将json字符串显示为容易阅读的形式时应使用: JSON.stringify(对象变量xxobject, null, '\t')

二.toJSON: 拥有toJSON方法, toJSON会覆盖对象默认的序列化行为

let product = {
    "name": "牙膏",
    age: 45,
    "count": 10,
    "orderDetail": 32143214214,
    "orderId": 78909890,
    "more": {
        "desc": "描述"
    },
    toJSON() {
        return {
            name: '哇哈哈'
        }
    }
}
/** 打印结果:
 * {
	"name": "哇哈哈"
}
 */
console.log(JSON.stringify(product, null, '\t'))

三.JSON.parse也有筛选数据的方法, 它的第二个参数函数reviver(k, v)

let jsonStr = `{
    "name": "牙膏",
    "count": 10,
    "orderDetail": 32143214214,
    "orderId": 78909890,
    "more": {
        "desc": "描述"
    }
}`

const obj = JSON.parse(jsonStr, function (k, value) {
    console.log('key:', k, 'this:', this, 'value:', value)
    if (typeof value === 'string') {
        return undefined
    }
    return value
})
// {"count":10,"orderDetail":32143214214,"orderId":78909890,"more":{}}
console.log(JSON.stringify(obj))

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1043461.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

leetcode算法题-移动零Java

这道题的解法,我们可以新建一个等长的数组,初始化后数组中的元素都为零,我们只需要遍历一遍原来的数组,将不为0的数据转移到新数组即可,下面是代码实现: public static void main(String[] args) {System.out.println("移动零:" Arrays.toString(moveZero(new int[…

SVN_SERVER的搭建

一、目前svnserver仅支持windows下安装,所以前提需要一台windows服务器或者windows主机 1. 下载最新版本的包 当前最新版visualsvn server最新版5.3.0 visualsvn server下载地址Downloads | VisualSVN 当前tortoiseSVn最新版1.14.5 tortoise SVN下载地址 h…

嵌入式Linux应用开发-基础知识-第六章 LED驱动程序框架

嵌入式Linux应用开发-基础知识-第六章 LED驱动程序框架 第六章 LED 驱动程序框架6.1 回顾字符设备驱动程序框架6.2 对于 LED 驱动,我们想要什么样的接口?6.3 LED 驱动要怎么写,才能支持多个板子?分层。6.4 写代码6.4.1 驱动程序6.…

车厂造手机旗舰版售价6899,不只是个“车钥匙”

大伙应该发现了这两年的一个奇怪现象:造手机的跑去造车,而车厂又跑来造手机。 这也好解释,毕竟别人碗里的更香、别人老氵…板先挑衅是吧? 昨日,蔚来在其创新科技日活动中正式发布了传闻已久的手机产品 NIO Phone 。 …

最全百科:什么是精益生产?有哪些难点?怎么解决?

什么是生产管理?什么是精益生产?企业生产管理都有哪些难点?企业生产管理又有哪些解决方案?如何高效的进行生产管理?精益生产有哪些管理工具?本篇,我们将为细细盘点企业生产管理的那些事&#xf…

电脑桌面自动提醒的闹钟软件是哪个?

在繁忙的工作中,我们需要保持高效率和准时完成任务。同时,我们也希望能够在电脑桌面上一直有提醒的闹钟,以确保我们不会错过任何重要的会议、任务和活动。然而,传统的设置电脑桌面闹钟提醒方法却过于复杂,让人烦恼不已…

一文教你学会ArcGIS Pro地图设计与制图系列全流程(1)

ArcGIS Pro做的成果图及系列文章目录: 系列文章全集: 《一文教你学会ArcGIS Pro地图设计与制图系列全流程(1)》《一文教你学会ArcGIS Pro地图设计与制图系列全流程(2)》《一文教你学会ArcGIS Pro地图设计与…

项目进展(二)-配置MCT8316ZR芯片,主要学习如何根据数据手册配置外设等

近几天一直和师兄在配置驱动芯片,目前的进展是可以通过SPI配置、读取寄存器等,但是电机一直未被驱动起来(这个问题困扰了我们一两天了,希望有大佬可以帮忙解决一下)。 配置SPI要先根据数据手册的说明,确认好SPI如何配置&#xff0…

探索轻量级模型性能上限,基于GhostNet模型开发构建多商品细粒度图像识别系统

商品图像数据的细粒度识别有别于传统的图像识别任务,本身细粒度识别对于模型特征提取计算能力要求就比较高,在我们前面的一些项目中,涉及到的细粒度识别大多是同一物种下不同亚种的识别,比如:鸟类细粒度识别、狗类细粒…

面试打底稿② 专业技能的第二部分

简历原文 抽查部分 比较熟悉Nacos、Feign、SpringCloud Gateway等微服务的使用,有实际上手项目使用的经验;基本掌握Linux常用命令,了解Linux系统管理、网络管理、生产环境等必用服务,了解Docker的使用,在博客中多有关…

基于微信小程序的宠物用品商城设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言系统主要功能:具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序(小蔡coding)有保障的售后福利 代码参考源码获取 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计…

echarts 地图 visualMap 图例点击事件监听

一、切换位置 二、切换监听 // 切换事件监听 this.myChart.off(datarangeselected); // 为了不触发两次 this.myChart.on(datarangeselected,(e) > {// visualMap change });// 配置如下 visualMap: {type: piecewise,showLabel: true,inverse: true,pieces: [{value: 1,…

2023测试开发必知必会:Pytest框架实战!

应用场景: pytest 框架可以解决我们多个测试脚本一起执行的问题。 它提供了测试用例的详细失败信息,使得开发者可以快速准确地改正问题。它兼容最新版本的 Python。它还兼容 unittest、doctest 和 nose,开箱即用。接下来我们详细了解下pyte…

数字孪生在智慧城市应用场景中的五大特点

数字孪生城市提出至今,已从概念、框架走向落地深耕,逐渐演变成为城市变革新动力和城市转型新路径,是智慧城市发展演进的重要方向。 数字孪生城市建设现已加速步入“技术多维集成、场景创新重构、市场成效导向”的落地实施时期。这一时期&…

HTML的学习 Day02(列表、表格、表单)

文章目录 一、列表列表主要分为以下三种类型:1. 无序列表(Unordered List):2. 有序列表(Ordered List):将有序列表的数字改为字母或自定义内容li.../li 列表项标签中value属性,制定列…

【RabbitMQ实战】06 3分钟部署一个RabbitMQ集群

一、集群的安装部署 我们还是利用docker来安装RabbitMQ集群。3分钟安装一个集群,开始。 前提条件,docker安装了docker-compose。如果没安装的话,参考这里 docker-compose文件参考bitnami官网:https://github.com/bitnami/contai…

JetBrains 产品安装插件(plugins)的两种方式

安装分为在线、离线两种方式: 在线方式: File > Settings > Plugins 搜索插件 Install 即可 离线方式: 官网:https://plugins.jetbrains.com/ 搜索到插件后,点击 "Get",选择自己安装的…

obsidian加git备份,同时忽略掉自己不想同步的文件夹

最近想用这个语雀进行知识库的分享,但是这个语雀的会员费太贵了,思来想去还是用 git 比较好,因为这个知识库的内容都是自己的笔记,为了能够访问的更加方便我选择了这个 gitte,而不是 github 我的知识库链接 knowledge …

报错 - 找不到模块“@/...“或其相应的类型声明

项目是vue3jsvite,在 vite.config.js 和 jsconfig.json 的配置无误的情况下,报错找不到模块。 解决方法:卸载重新安装 Error Lens 插件 报错没有啦。可能是插件内部错误?

opencv之利用gpu进行编程

很多朋友工作中会遇到需要使用gpu的例子,gpu就是显卡,大部分对gpu有个模糊的概念,即图像渲染会使用到他,但是它是如何生效的,又说不清楚。本篇文章主要介绍opencv下如何使用gpu进行编程。 基本介绍 opencv下存在gpu可…