JS操作JSON要领详细总结

什么是JSON

JSON是一种轻量级的数据交换格式，是JavaScript的一种子集。JSON格式具有很好的兼容性和可读性，广泛应用于前端与后端之间的数据传递及存储。

JSON语法规则

JSON数据由键值对组成，键和值使用冒号分隔，每个键值对之间使用逗号分隔，最外层需用花括号{}包裹。

{
  "name": "张三",
  "age": 18,
  "gender": "male"
}

如何在JS中操作JSON

JSON.parse()

JSON.parse()方法用于将JSON字符串转为JS对象。

const jsonStr = '{"name": "张三", "age": 18, "gender": "male"}';
const jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.name); // 输出：张三

JSON.stringify()

JSON.stringify()方法用于将JS对象转为JSON字符串。

const jsonObj = {"name": "张三", "age": 18, "gender": "male"};
const jsonStr = JSON.stringify(jsonObj);
console.log(jsonStr); // 输出：{"name":"张三","age":18,"gender":"male"}

访问JSON数据

访问JSON数据的方式与访问JS对象的方式相同，可以使用点操作符或方括号操作符。

const jsonObj = {"name": "张三", "age": 18, "gender": "male"};
console.log(jsonObj.name); // 输出：张三
console.log(jsonObj["age"]); // 输出：18

示例说明

示例1：将表单数据转化为JSON字符串

使用FormData对象获取表单数据，并使用JSON.stringify()方法将其转化为JSON字符串。

const form = document.querySelector('#my-form');
const formData = new FormData(form);
const jsonObj = {};

for (const [key, value] of formData.entries()) {
  jsonObj[key] = value;
}

const jsonStr = JSON.stringify(jsonObj);
console.log(jsonStr);

示例2：从服务器端获取JSON数据

使用XMLHttpRequest对象发起HTTP请求，并通过JSON.parse()方法将服务器返回的JSON字符串转为JS对象。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/data.json');

xhr.onload = function () {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};

xhr.send();