JS对象与json字符串格式转换实例

JS对象与JSON字符串格式转换是前端开发中常用的一项技术，本文将以实例的方式详细讲解对象与JSON字符串格式的相互转换。

将JS对象转换成JSON字符串格式

使用JSON.stringify()方法

JavaScript中可以使用JSON.stringify()方法将一个对象转换成JSON字符串格式，该方法接收两个参数：

1. 待转换的JS对象
2. 一个可选的replacer函数或数组，指定如何序列化对象的值，或要包含的属性。

示例代码如下：

const user = {
  name: '小王',
  age: 18,
  hobbies: ['篮球', '游泳', '听音乐'],
  address: {
    province: '广东省',
    city: '深圳市',
    area: '宝安区'
  }
}

const jsonString = JSON.stringify(user)

console.log(jsonString)

输出结果为：

{
  "name": "小王",
  "age": 18,
  "hobbies": ["篮球", "游泳", "听音乐"],
  "address": {
    "province": "广东省",
    "city": "深圳市",
    "area": "宝安区"
  }
}

上面的代码中，我们首先定义了一个对象user，然后使用JSON.stringify()方法将其转换成JSON字符串格式，并将转换后的结果赋值给变量jsonString，最后使用console.log()来输出结果。

包含对象属性选项

JSON.stringify()方法还可以通过提供第二个参数来选择要显示的属性值。

示例代码如下：

const user = {
  name: '小王',
  age: 18,
  hobbies: ['篮球', '游泳', '听音乐'],
  address: {
    province: '广东省',
    city: '深圳市',
    area: '宝安区'
  }
}

const jsonString = JSON.stringify(user, ['name', 'hobbies'])

console.log(jsonString)

输出结果为：

{
  "name": "小王",
  "hobbies": ["篮球", "游泳", "听音乐"]
}

上面的代码中，我们在JSON.stringify()方法的第二个参数中指定了要显示的属性，这里只显示了name和hobbies这两个属性的值。

将JSON字符串格式转换成JS对象

使用JSON.parse()方法

JavaScript中可以使用JSON.parse()方法将JSON字符串格式转换成JS对象，该方法只接收一个参数：

1. 待转换的JSON字符串

示例代码如下：

const jsonString = '{ "name": "小明", "age": 20, "gender": "男" }'

const user = JSON.parse(jsonString)

console.log(user)

输出结果为：

{
  name: "小明",
  age: 20,
  gender: "男"
}

上面的代码中，我们首先定义了一个JSON字符串jsonString，然后使用JSON.parse()方法将其转换成JS对象，并将转换后的结果赋值给变量user，最后使用console.log()来输出结果。

包含reviver参数

JSON.parse()方法还可以通过提供第二个参数来修改JSON对象及其属性的值。

示例代码如下：

const jsonString = '{ "name": "小明", "age": 20, "gender": "男" }'

const user = JSON.parse(jsonString, function(key, value) {
  if (typeof value === 'string') {
    return value.toUpperCase()
  } else {
    return value
  }
})

console.log(user)

输出结果为：

{
  name: "小明",
  age: 20,
  gender: "男"
}

上面的代码中，我们在JSON.parse()方法的第二个参数中提供了一个函数，该函数用于将JSON对象及其属性的值转换为大写字母，并将转换后的结果返回。