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

更多精彩详见:个人主页

相关推荐
会豪2 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子2 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶2 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子2 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_2 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23332 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin2 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_3 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit3 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言
龙在天3 小时前
ts中的函数重载
前端