json.stringify()与json.parse()的区别以及用处

JSON在现代Web应用程序开发过程中扮演着非常重要的角色。它是一种数据格式，用来交换数据，而且被广泛使用。JS开发者通常需要将JS对象转换为JSON格式，然后将其发送到服务器或者持久性存储，JSON也会从服务器返回，然后被转换为JS对象。这个过程需要使用JSON.stringify()和JSON.parse()这两个方法来进行。

JSON.stringify()

JSON.stringify()方法将JavaScript对象转换为JSON字符串形式。该方法有三个参数:

1. obj（必选参数）：将要进行转换的 JavaScript 对象或其它值（数组、字符串、数字、布尔值等）。
2. replacer（可选参数）：JSON 字符串中需要被替换的值，即函数，任意类型数据（例如数组、对象和字符串）组成的数组或外部函数。如果省略，则返回一个JSON字符串对象，所有属性均为基本类型。
3. space（可选参数）：在 JSON 字符串中添加缩进、空格和换行符，使其更易于阅读。

下面是典型的JSON.stringify()用法以及它的效果:

const user = {
  name: 'John',
  age: 30,
  email: '[e-mail]'
}

const jsonString = JSON.stringify(user) 
console.log(jsonString)

输出结果:

{"name":"John","age":30,"email":"[e-mail]"}

JSON.parse()

JSON.parse()方法将JSON字符串转换为JavaScript对象，并具有两个参数:

1. JSON 字符串。
2. (可选)过滤器,指定如何将纯JS对象转换为键值对形式。

下面是JSON.parse()典型的用法以及效果：

const userJson = '{"name":"John","age":30,"email":"[e-mail]"}'

const userObj = JSON.parse(userJson) 
console.log(userObj)

输出结果:

{name: "John", age: 30, email: "[e-mail]"}

区别

两者之间最明显的区别是JSON.stringify()是将JavaScript对象转换为JSON字符串，而JSON.parse()是将JSON字符串转换为JavaScript对象。通常情况下，必须使用JSON.stringify()在网络上发送JSON数据。在服务器端，我们要接受JSON数据并将其转换为JavaScript对象，所以我们使用JSON.parse()方法。

JSON.stringify()侧重于将JS对象转化为JSON字符串,包括可以选择转化哪些属性,也可以有缩放效果，而JSON.parse()则是将JSON字符串反序列化回JS对象，不做任何操作。

以下是使用两者技巧的一些示例

// 用于发送到服务器的原始数据
const data = {
  firstName: 'John',
  lastName: 'Doe',
  email: '[e-mail]'
}

// 将JS对象转换为JSON字符串，使其可以被服务器接受​​。
const jsonData = JSON.stringify(data) 

// 发送JSON数据到服务器，并等待响应...
const response = await fetch('/api/user', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: jsonData
})

// 从响应中获取JSON字符串并解析为JS对象
const responseData = await response.json()

// 打印响应数据
console.log(responseData)

// 从响应中获取JSON字符串并解析为JS对象
const responseData = await response.json()

// JS对象被传回了，现在对数据进行处理...
const fullName = `${responseData.firstName} ${responseData.lastName}`
console.log(`Welcome, ${fullName}!`)

总的来说，JSON.stringify()用于将JS对象转换为JSON字符串，可以将数据发送给服务器或用于持久性存储。JSON.parse()则将JSON字符串转换为JS对象以进行进一步处理。