5 个不为人知的 JSON.stringify() 技巧

作为一名 JavaScript 开发人员，JSON.stringify() 是用于调试的最常见函数。但是它的作用是什么呢，难道我们不能使用 console.log() 来做同样的事情吗？让我们试一试。 哦！console.log() 没有帮助我们打印出期望的结果。它输出 **[…** 。

如果我们使用 JSON.stringify()，它会返回一个字符串，其中包含对象的键值对，就像这样：

{
"name": "John Doe",
"age": 30,
"city": "New York"
}

JSON.stringify() 函数不仅可以用于调试，还可以用于在应用程序之间传输数据。例如，您可以使用 JSON.stringify() 将对象转换为字符串，然后将其发送到服务器。服务器可以接收字符串并使用 JSON.parse() 函数将其转换为对象。

以下是 JSON.stringify() 的 5 个鲜为人知的技巧：

1. **使用替换函数来控制输出结果** 

您可以使用替换函数来控制 JSON.stringify() 的输出结果。替换函数接受两个参数：键和值。您可以使用替换函数来过滤掉不希望包含在输出结果中的键值对，或者您可以使用替换函数来修改键值对的值。

例如，以下代码使用替换函数来过滤掉对象的 age 键值对：

JSON.stringify(object, (key, value) => {
if (key === 'age') {
return undefined;
}
return value;
});

输出结果将是：

{
"name": "John Doe",
"city": "New York"
}

2. **使用空间参数来格式化输出结果** 

您可以使用空间参数来格式化 JSON.stringify() 的输出结果。空间参数是一个数字，它指定要在输出结果中插入的空格数。

例如，以下代码使用空间参数来格式化输出结果：

JSON.stringify(object, null, 2);

输出结果将是：

{
"name": "John Doe",
"age": 30,
"city": "New York"
}

3. **使用 reviver 函数来处理输出结果** 

您可以使用 reviver 函数来处理 JSON.stringify() 的输出结果。reviver 函数接受两个参数：键和值。您可以使用 reviver 函数来修改键值对的值，或者您可以使用 reviver 函数来从输出结果中删除键值对。

例如，以下代码使用 reviver 函数来修改输出结果中的 age 键值对的值：

JSON.stringify(object, null, (key, value) => {
if (key === 'age') {
return value + 1;
}
return value;
});

输出结果将是：

{
"name": "John Doe",
"age": 31,
"city": "New York"
}

4. **使用 replacer 函数来控制输出结果的顺序** 

您可以使用 replacer 函数来控制 JSON.stringify() 的输出结果的顺序。replacer 函数接受两个参数：键和值。您可以使用 replacer 函数来指定键值对在输出结果中的顺序。

例如，以下代码使用 replacer 函数来指定输出结果中键值对的顺序：

JSON.stringify(object, ['name', 'age', 'city']);

输出结果将是：

{
"name": "John Doe",
"age": 30,
"city": "New York"
}

5. **使用 toJSON() 方法来自定义对象的输出结果** 

您可以使用 toJSON() 方法来自定义对象的输出结果。toJSON() 方法返回一个对象，该对象包含您希望在 JSON 字符串中包含的键值对。

例如，以下代码使用 toJSON() 方法来自定义对象的输出结果：

const object = {
name: "John Doe",
age: 30,
city: "New York",
toJSON() {
return {
name: this.name,
age: this.age + 1
};
}
};

JSON.stringify(object);

输出结果将是：

{
"name": "John Doe",
"age": 31
}

JSON.stringify() 是一个非常强大的函数，它可以用于各种目的。我希望这些技巧能帮助您更有效地使用该函数。