解锁 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"}"

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

往期热门精彩推荐

面试相关热门推荐

实战开发相关推荐

移动端相关推荐

Git 相关推荐