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

更多精彩详见:个人主页

相关推荐
程序员清风8 分钟前
快手二面:乐观锁是怎么用它来处理多线程问题的?
java·后端·面试
訾博ZiBo19 分钟前
【Vibe Coding】001-前端界面常用布局
前端
软件技术NINI19 分钟前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
小烤箱19 分钟前
自动驾驶工程师面试(定位、感知向)
人工智能·面试·自动驾驶
IT_陈寒22 分钟前
《Redis性能翻倍的7个冷门技巧,90%开发者都不知道!》
前端·人工智能·后端
歪歪10031 分钟前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架
知识分享小能手33 分钟前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
ZYMFZ41 分钟前
python面向对象
前端·数据库·python
长空任鸟飞_阿康1 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·vue.js·人工智能