解锁 JSON.stringify() 5 个鲜为人知的功能

作为一名前端开发者,你可能熟悉JSON.stringify()方法,通常用于调试。但是很多只是简单使用一下接下来,让我们深入了解其实用性。

考虑一个对象如果想把她转成字符串打印出来:

js 复制代码
const obj = {  
    name: 'San Shang You Ya',  
    age: 18  
};  
console.log(obj.toString()); // Result: [object Object]

如果你想这样打印你所看到的只能是 [object Object]

我们可以借助JSON.stringify()方法

js 复制代码
const obj = {  
    name: 'San Shang You Ya',  
    age: 18  
};  
console.log(JSON.stringify(obj)); 
// Result: {"name":"San Shang You Ya","age":18}

大多数开发者直接使用 JSON.stringify(),但我即将揭示一些隐藏的技巧。

1. 第二个参数(Array)

-JSON.stringify() 接受第二个参数,它是一个你想在控制台中显示的对象的键的数组。例如:

js 复制代码
const obj = {  
    name: 'San Shang You Ya',  
    age: 18  
};  
console.log(JSON.stringify(obj, ['name']));  
// Result: {"name": "San Shang You Ya"}

这样而不是将整个 JSON 对象混乱地显示在控制台中,可以通过将所需的键作为数组传递给第二个参数来选择性地打印。

2. 第二个参数(Function)

  • 第二个参数也可以是一个函数,根据函数内的逻辑输出键值对。
  • 如果返回 undefined,则该键值对将不会被打印出来。
js 复制代码
const obj = {  
    name: 'San Shang You Ya',  
    age: 18  
};  
  
console.log(JSON.stringify(obj, (key, value) => (key === "age" ? value : undefined)));
// Result: {"age": 18}

3. 第三个参数作为数字

  • 第三个参数控制最终字符串中的间距。如果是一个数字,字符串化的每个级别将相应缩进。
js 复制代码
const obj = {  
    name: 'San Shang You Ya',  
    age: 18  
};  
console.log(JSON.stringify(obj, null, 2));

4. 第三个参数作为字符串

如果第三个参数是一个字符串,它将替换为空格字符

5. toJSON 方法

对象可以拥有一个 toJSON 方法。 JSON.stringify() 返回该方法的结果,并对其进行字符串化,而不是转换整个对象。

js 复制代码
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"}"

点赞收藏支持、手留余香、与有荣焉,动动你发财的小手哟,感谢各位大佬能留下您的足迹。

往期热门精彩推荐

面试相关热门推荐

前端万字面经------基础篇

前端万字面积------进阶篇

简述 pt、rpx、px、em、rem、%、vh、vw的区别

实战开发相关推荐

前端常用的几种加密方法

探索Web Worker在Web开发中的应用

不懂 seo 优化?一篇文章帮你了解如何去做 seo 优化

【实战篇】微信小程序开发指南和优化实践

前端性能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址实现下载功能

Vue 虚拟 DOM 搞不懂?这篇文章帮你彻底搞定虚拟 DOM

移动端相关推荐

移动端横竖屏适配与刘海适配

移动端常见问题汇总

聊一聊移动端适配

Git 相关推荐

通俗易懂的 Git 入门

git 实现自动推送

更多精彩详见:个人主页

相关推荐
coding随想1 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我29 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子34 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹37 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器44 分钟前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控