JSON.stringify方法的5个秘密功能

欢迎大家来到IT世界,在知识的湖畔探索吧!

JSON.stringify()方法将JavaScript对象或值转换为JSON字符串。

作为JavaScript开发人员，JSON.stringify()是用于调试的最常用功能。但是，这有什么用，难道我们不能单独使用console.log()吗？那就试一把看看。

const user = { “name” : “Prateek Singh”, “age” : 26 } console.log(user); 结果： // [object Object]

欢迎大家来到IT世界,在知识的湖畔探索吧!

有些版本的浏览器不会进行格式化打印。最新Chrome打印出来很友好。

糟糕！ console.log()不能帮助我们打印所需的结果。它打印[object Object]，因为从对象到字符串的默认转换是”[object Object]”。因此，我们使用JSON.stringify()首先将对象转换为字符串，然后像这样在控制台中进行打印。

欢迎大家来到IT世界,在知识的湖畔探索吧!const user = { “name” : “Prateek Singh”, “age” : 26 } console.log(JSON.stringify(user)); RESULT // "{ "name" : "Prateek Singh", "age" : 26 }"

通常，开发人员像上面一样以简单的方式使用stringify函数。但是我要告诉你一些更简单实用的秘密技巧。

1：第二个参数（数组）

是的，我们的stringify函数也可以有第二个参数。它是您要在控制台中打印的对象的键的数组。看起来简单吗？让我们仔细看看。我们有一个对象产品，我们想知道产品的名称。当我们将其打印为：

console.log(JSON.stringify(product));

它给出以下结果。

{“id”:”0001",”type”:”donut”,”name”:”Cake”,”ppu”:0.55,”batters”: {“batter”:[{“id”:”1001",”type”:”Regular”}, {“id”:”1002",”type”:”Chocolate”},{“id”:”1003",”type”:”Blueberry”}, {“id”:”1004",”type”:”Devil’s Food”}]}, ”topping”:[{“id”:”5001",”type”:”None”},{“id”:”5002",”type”:”Glazed”}, {“id”:”5005",”type”:”Sugar”},{“id”:”5007",”type”:”Powdered Sugar”}, {“id”:”5006",”type”:”Chocolate with Sprinkles”}, {“id”:”5003",”type”:”Chocolate”},{“id”:”5004",”type”:”Maple”}]}

由于控制台上显示了大量无用的信息，因此很难在日志中找到名称键。当对象内容变大时，难度增加。

stringify函数的第二个参数就要派上用场了。让我们再次重写代码并查看结果。

欢迎大家来到IT世界,在知识的湖畔探索吧!console.log(JSON.stringify(product,['name']); //RESULT {"name" : "Cake"}

解决了问题，而不是打印整个JSON对象，我们可以通过将所需的键作为数组传递给第二个参数来仅打印所需的键。

2：第二个参数（函数）

我们还可以将第二个参数作为函数传递。它根据函数中编写的逻辑来过滤每个键值对。如果返回undefined，则将不会显示该键值对。示例如下

const user = { “name” : “Prateek Singh”, “age” : 26 }

// Result { "age" : 26 }

仅打印年龄，因为我们的函数参数，判断条件返回的值typeOf String未定义。

3：第三个参数为Number

第三个参数控制最终字符串中的间距。如果参数是数字，则字符串化的每个层级都将以此数量的空格字符缩进。

提示: '--' 表示空格, purposeJSON.stringify(user, null, 2); //{ //--"name": "Prateek Singh", //--"age": 26, //--"country": "India" //}

4：第三个参数为String

如果第三个参数是字符串，则将使用它代替上面显示的空格字符。

JSON.stringify(user, null,'**'); //{ //**"name": "Prateek Singh", //**"age": 26, //**"country": "India" //} 这里的 * 替代了空格

5：toJSON方法

我们有一个名为toJSON的方法，该方法可以作为任何对象的一部分，作为其属性。 JSON.stringify返回此函数的结果并将其字符串化，而不是将整个对象转换为字符串。请参阅此示例。

const user = { firstName : "Prateek", lastName : "Singh", age : 26, toJSON() { return { fullName: `${this.firstName} + ${this.lastName}` } } console.log(JSON.stringify(user)); RESULT // "{ "fullName" : "Prateek Singh"}"

在这里，我们可以看到而不是打印整个对象，而是仅打印toJSON函数的结果。

推荐阅读：如何在Vuejs中实现页面空闲超时检测