解锁 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 实现自动推送

更多精彩详见:个人主页

相关推荐
像风一样自由20201 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem2 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊2 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术2 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing2 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止3 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall3 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴3 小时前
简单入门Python装饰器
前端·python
袁煦丞4 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码4 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github