JSON.stringify()的使用 json.stringfly
ztj100 2024-12-24 17:01 13 浏览 0 评论
前言
作为一名前端开发者(本人业余前端[憨笑]，前些年搞过一段时间的全栈)，你可能熟悉JSON.stringify()方法，通常用于调试。但是很多只是简单使用一下接下来，让我们深入了解其实用性。
考虑一个对象如果想把她转成字符串打印出来：
const obj = { name: 'San Shang You Ya', age: 18 }; console.log(obj.toString()); // Result: [object Object] |
如果你想这样打印你所看到的只能是 [object Object]
我们可以借助JSON.stringify()方法
const obj = { name: 'San Shang You Ya', age: 18 }; console.log(JSON.stringify(obj)); // Result: {"name":"San Shang You Ya","age":18} |
大多数开发者直接使用 JSON.stringify()，但我即将揭示一些隐藏的技巧。
第二个参数(Array)
JSON.stringify() 接受第二个参数，它是一个你想在控制台中显示的对象的键的数组。例如：
const obj = { name: 'San Shang You Ya', age: 18 }; console.log(JSON.stringify(obj, ['name'])); // Result: {"name": "San Shang You Ya"} |
这样而不是将整个 JSON 对象混乱地显示在控制台中，可以通过将所需的键作为数组传递给第二个参数来选择性地打印。
第二个参数(Function)
- 第二个参数也可以是一个函数，根据函数内的逻辑输出键值对。
- 如果返回 undefined，则该键值对将不会被打印出来。
const obj = { name: 'San Shang You Ya', age: 18 }; console.log(JSON.stringify(obj, (key, value) => (key === "age" ? value : undefined))); // Result: {"age": 18} |
第三个参数作为数字
- 第三个参数控制最终字符串中的间距。如果是一个数字，字符串化的每个级别将相应缩进。
const obj = { name: 'San Shang You Ya', age: 18 }; console.log(JSON.stringify(obj, null, 2)); |
第三个参数作为字符串
如果第三个参数是一个字符串，它将替换为空格字符
toJSON 方法
对象可以拥有一个 toJSON 方法。 JSON.stringify() 返回该方法的结果，并对其进行字符串化，而不是转换整个对象。
const superhero= { firstName: "San Shang", lastName: "You Ya", age: 21, toJSON() { return { fullName: `${this.firstName} + ${this.lastName}` }; } }; console.log(JSON.stringify(superhero)); // Result: "{ "fullName" : "San Shang You Ya"}" |
相关推荐
- Docker安全开放远程访问连接权限（docker 远程授权访问）
-
1、Docker完全开放远程访问Docker服务完全开放对外访问权限操作如下：#开启端口命令（--permanent永久生效，没有此参数重启后失效）firewall-cmd--zone=pu...
- SpringCloud系列——4OpenFeign简介及应用
-
学习目标什么是OpenFeign以及它的作用RPC到底怎么理解OpenFeign的应用第1章OpenFeign简介在前面的内容中，我们分析了基于RestTemplate实现http远程通信的方法。并...
- Spring Boot集成qwen:0.5b实现对话功能
-
1.什么是qwen:0.5b？模型介绍：Qwen1.5是阿里云推出的一系列大型语言模型。Qwen是阿里云推出的一系列基于Transformer的大型语言模型，在大量数据（包括网页文本、书籍、代码等）...
- JDK从8升级到21的问题集（jdk8升级到11）
-
一、背景与挑战1.升级动因oOracle长期支持策略o现代特性需求：协程、模式匹配、ZGC等o安全性与性能的需求oAI新技术引入的版本要求...
- 大白话详解Spring Cloud服务降级与熔断
-
1.Hystrix断路器概述1.1分布式系统面临的问题复杂分布式体系结构中的应用程序有数十个依赖关系，每个依赖关系在某些时候将不可避免地失败。这就造成有可能会发生...
- 面试突击43:lock、tryLock、lockInterruptibly有什么区别?
-
在Lock接口中，获取锁的方法有4个：lock()、tryLock()、tryLock(long,TimeUnit)、lockInterruptibly()，为什么需要这么多方法？这些方法都有...
- 了解网络编程 TCP/IP 协议与UDP 协议
-
因为iP地址比较难记忆，很多情况下可以使用域名代替iP地址。1.TCP/IP协议与UDP协议通过IP地址与端口号确定计算机在网络中的位置后，接下来考虑通讯的问题：因为不同计算机的软硬件平台...
- Semaphore与Exchanger的区别（semaphore和signal）
-
Semaphore和Exchanger是Java并发编程中两个常用的同步工具类，它们都可以用于协调多个线程之间的执行顺序和状态，但它们的作用和使用方式有所不同：Semaphore类表示一个...
- Java教程:什么是分布式任务调度?怎样实现任务调度?
-
通常任务调度的程序是集成在应用中的，比如：优惠卷服务中包括了定时发放优惠卷的的调度程序，结算服务中包括了定期生成报表的任务调度程序...
- java多线程—Runnable、Thread、Callable区别
-
多线程编程优点：进程之间不能共享内存，但线程之间共享内存非常容易。系统创建线程所分配的资源相对创建进程而言，代价非常小。Java中实现多线程有3种方法：继承Thread类实现Runnable...
- 工厂模式详解（工厂模式是啥意思）
-
工厂模式详解简单工厂简单工厂模式（SimpleFactoryPattern）是指由一个工厂对象决定创建出哪一种产品类的实例。简单工厂适用于工厂类负责创建的对象较少的场景，且客户端只需要传入工厂类的...
- 我们程序员眼中的母亲节（你眼中的程序员是什么样子的?程序员的薪酬如何?）
-
导语：对于我们成人来说，尤其是漂泊在外的程序员，陪伴父母的时间太少了。每逢佳节倍思亲，我们流浪外在的游子应该深有感触。母亲，是世界上最伟大的人，她承载着对我们的爱，更是负担和压力。我们作为子女，只会嫌...
- 死锁的 4 种排查工具（死锁检测方法要解决两个问题）
-
死锁（DeadLock）指的是两个或两个以上的运算单元（进程、线程或协程），都在等待对方停止执行，以取得系统资源，但是没有一方提前退出，就称为死锁。死锁示例接下来，我们先来演示一下Java中最简...
- 1. 工厂模式详解（工厂模式示例）
-
我们的项目代码也是由简而繁一步一步迭代而来的，但对于调用者来说却是越来越简单化。简单工厂模式简单工厂模式(SimpleFactoryPattern)是指由一个工厂对象决定创建出哪一种产品类的实例。...
- Jmeter(二十):jmeter对图片验证码的处理
-
jmeter对图片验证码的处理在web端的登录接口经常会有图片验证码的输入，而且每次登录时图片验证码都是随机的；当通过jmeter做接口登录的时候要对图片验证码进行识别出图片中的字段，然后再登录接口中...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- Docker安全开放远程访问连接权限（docker 远程授权访问）
- SpringCloud系列——4OpenFeign简介及应用
- Spring Boot集成qwen:0.5b实现对话功能
- JDK从8升级到21的问题集（jdk8升级到11）
- 大白话详解Spring Cloud服务降级与熔断
- 面试突击43:lock、tryLock、lockInterruptibly有什么区别?
- 了解网络编程 TCP/IP 协议与UDP 协议
- Semaphore与Exchanger的区别（semaphore和signal）
- Java教程:什么是分布式任务调度?怎样实现任务调度?
- java多线程—Runnable、Thread、Callable区别
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)