JSON.stringify() 的使用、toJSON 方法 以及 JSON.parse 方法

一、 JSON.stringify() 的使用

JSON.stringify() 方法能将一个 JavaScript 对象或值转换成一个 JSON 字符串。

//初始化一个 user 对象
const user = {
	"name": 'Erick',
    "age": 24
{

console.log(user)

// [object Object]

console.log() 没有帮助我们打印出期望的结果。

它输出 [object Object]，并不是原始字符串形式。因此，我们使用 JSON.stringify() 首先将对象转换成字符串，然后在控制台中打印，如下所示。

const user = {
	"name": 'Erick',
    "age": 23
}

console.log(JSON.stringify(user))

// {"a":"111","b":23}

第二个参数（数组）

有一个对象 person 并且我们想知道 person 的 name 属性值。当我们将其打印出来：

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

输出结果：

{"id":"1","age":"23","name":"Erick"}  // person对象

当对象变大时，我们只想找到对象中的某一个属性。就可以利用stringify函数的第二个参数。

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

// {"name":"Erick"}

第二个参数（函数）

它根据函数中写入的逻辑来计算每个键值对。如果返回undefined，则不会打印键值对。请参考示例以获得更好的理解。

const user = {
	"name": 'Erick',
    "age": 23
}

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

// { "age": 23 }

第三个参数（数字）

第三个参数控制最后一个字符串的间距。如果参数是一个数字，则字符串化中的每个级别都将缩进这个数量的空格字符。

// 注意：为了达到理解的目的，使用 '--' 替代了空格
console.log(JSON.stringify(person, ['name'], 2))
// {
// --"name": "Erick"
// }

第三个参数（字符串）

console.log(JSON.stringify(person, ['name'], '**'))
// {
// **"name": "Erick"
// }

二、 toJSON 方法

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

const user = {
    "firstName": 'zzz',
    "lastName": 'ran',
    "age": 23,
    toJSON() {
        return {
            fullName: `${this.firstName} ${this.lastName}`
        }
    }
}

console.log(JSON.stringify(user))

// {"fullName":"zzz ran"}

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

三、 JSON.parse()

JSON.parse()的用法了，就是将字符串转为json格式。