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

作为一名前端开发者，你可能熟悉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()，但我即将揭示一些隐藏的技巧。

1. 第二个参数(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 对象混乱地显示在控制台中，可以通过将所需的键作为数组传递给第二个参数来选择性地打印。

2. 第二个参数(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}

3. 第三个参数作为数字

• 
  
• 第三个参数控制最终字符串中的间距。如果是一个数字，字符串化的每个级别将相应缩进。
  

const obj = {  
name: 'San Shang You Ya',  
age: 18  
};  
console.log(JSON.stringify(obj, null, 2));

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

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

5. 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"}"