前言
作为一名前端开发者(本人业余前端，前些年搞过一段时间的全栈)，你可能熟悉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()，但我即将揭示一些隐藏的技巧。
第二个参数(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 对象混乱地显示在控制台中，可以通过将所需的键作为数组传递给第二个参数来选择性地打印。
第二个参数(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} |
第三个参数作为数字
- 第三个参数控制最终字符串中的间距。如果是一个数字，字符串化的每个级别将相应缩进。
const obj = { name: 'San Shang You Ya', age: 18 }; console.log(JSON.stringify(obj, null, 2)); |
第三个参数作为字符串
如果第三个参数是一个字符串，它将替换为空格字符
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"}" |