JSON.stringify 之 5 大隐秘特性

众所周知，JSON.stringify() 方法可以将一个 Js 对象或值转换成一个 JSON 字符串。

作为一名 JavaScript 开发人员，JSON.stringify() 是用于调试最常见的函数。除了变为JSON字符串，它存在的意义还有什么呢，在调试中，我们不能运用 console.log() 来做相同的工作吗？让我们继续往下看。

//初始化一个 user 对象
const user = {
 "name" : "why",
 "age" : 29
}

console.log(user);

// 结果
// [object Object]

哦？console.log() 并没有协助我们打印出希望的成果。它输出的是 [object Object]，因为从对象到字符串的默认转化是 [object Object]。因此，我们需要使用 JSON.stringify() 首先将目标转化成字符串，然后在控制台中打印，如下所示。

const user = {
 "name" : "why",
 "age" : 29
}

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

// 结果
// "{ "name" : "why", "age" : 29 }"

一般情况下，开发人员使用 stringify 函数的场景较为普遍，就像我们在上面那样。但我要告知你一些隐藏的特性，这些小特性会让你开发起来愈加轻松。

JSON.stringify的第二个参数（数组）

stringify 函数也能够有第二个参数。它要操控台打印目标的键数组。看起来很简单？让咱们更深化一点。我们有一个目标 product 并且我们还想知道 product 的 name 的属性值。当我们将它打印出来时，它会输出下面的成果。

{
"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"}
		]
}

在log中很难找到 name 这个key键，因为操控台上显示了全部信息，但很多信息我们都用不到。当对象变大时，查找属性的难度随之添加。stringify 函数的第二个参数这时就有用了。让我们重写代码并检查结果。

console.log(JSON.stringify(product,['name' ]);

// 结果
{"name" : "Cake"}

我们的问题解决了，与打印整个 JSON 对象不同，我们可以在第二个参数中，将所需的key键作为数组传递，从而只打印出我们所需的属性。

JSON.stringify的第二个参数（函数）

我们还能够传入函数作为第二个参数。它会依据函数中写入的逻辑来计算每个键值对。假如返回 undefined，则不会打印键值对。请参考以下示例：

const user = {
 "name" : "why",
 "age" : 29
}

console.log(
	JSON.stringify(user,(key,value)=>{
		if(typeof value === 'string'){
			return undefined;
		}
		return value;
	})
)

// 结果 只有 age 被打印出来，因为函数判断 typeOf 为 String 的值返回 undefined。
{ "age" : 29 }

官方提供 toJSON 方法

官方提供了一个叫 toJSON 的方法fn，它可以作为任意对象的属性。JSON.stringify 返回这个函数的结果并对其进行序列化，而不是将整个对象转换为字符串。eg如下：

const user = {
 firstName : "Hongyan",
 lastName : "WANG",
 age : 26,
 toJSON() {
    return { 
      fullName: `${this.firstName} + ${this.lastName}`
    };
 }
}

console.log(JSON.stringify(user));
// 结果
// "{ "fullName" : "HongyanWANG"}"

这儿我们就可以看到，拥有toJSON方法后，它只打印 toJSON 函数的成果，而不是打印整个对象。