JS中操作JSON总结

我们来详细讲解 JS 中操作 JSON 的完整攻略。

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端数据传输，也被广泛应用于配置文件、日志文件等数据交换场景。在 JavaScript 中，我们可以直接操作 JSON，完成数据的解析、修改、序列化等操作。下面我们来逐步介绍相关知识点。

JSON 基础

JSON 格式及基本语法

JSON 是一种基于面向对象的轻量级数据交换格式，因此其格式与 JavaScript 中的对象很相似。 JSON 的基本语法如下所示：

{
  "name": "Bob",
  "age": 18,
  "gender": "male"
}

其中使用花括号 {} 表示一个 JSON 对象，可以包含多个属性，每个属性由一个键值对组成，键名和键值之间使用英文冒号 : 分隔。键名必须为字符串类型，键值可以是字符串、数字、布尔值、数组、对象等。

JSON 的数据类型和数据结构

JSON 中的数据类型和数据结构包括：

• 对象（object）：使用花括号 {} 表示，包含多个键值对。
• 数组（array）：使用方括号 [] 表示，包含多个值，可以是字符串、数字、对象、数组等类型。
• 字符串（string）：使用双引号包裹，表示一个文本字符串。
• 数字（number）：表示一个数字类型，可以是整型、浮点型等。
• 布尔值（boolean）：表示一个 true 或 false 的逻辑值。
• 空值（null）：表示一个空值。

JSON 的序列化和反序列化

在 JavaScript 中，我们可以将一个 JSON 对象序列化为一个 JSON 字符串，也可以将一个 JSON 字符串反序列化为一个 JSON 对象。

序列化可以使用 JSON.stringify() 方法，反序列化可以使用 JSON.parse() 方法。例如：

const jsonObj = {
  "name": "Bob",
  "age": 18,
  "gender": "male"
};

// 将 jsonObj 转为 JSON 字符串
const jsonString = JSON.stringify(jsonObj);
console.log(jsonString); // 输出："{\"name\":\"Bob\",\"age\":18,\"gender\":\"male\"}"

// 将 JSON 字符串反序列化为 JSON 对象
const json = JSON.parse(jsonString);
console.log(json); // 输出：{ name: 'Bob', age: 18, gender: 'male' }

JSON 操作

访问 JSON 对象的属性

访问 JSON 对象的属性和访问 JavaScript 对象的属性非常类似，使用 obj.key 或 obj["key"] 的语法即可。例如：

const jsonObj = {
  "name": "Bob",
  "age": 18,
  "gender": "male"
};

// 访问 jsonObj 的 name 属性
console.log(jsonObj.name); // 输出：Bob

// 访问 jsonObj 的 age 属性
console.log(jsonObj["age"]); // 输出：18

修改和新增 JSON 对象的属性

修改或新增 JSON 对象的属性，同样可以使用 obj.key 或 obj["key"] 的语法。例如：

const jsonObj = {
  "name": "Bob",
  "age": 18,
  "gender": "male"
};

// 修改 jsonObj 的 age 属性
jsonObj.age = 20;

// 新增或修改 jsonObj 的 phone 属性
jsonObj["phone"] = "123456789";

console.log(jsonObj); // 输出：{ name: 'Bob', age: 20, gender: 'male', phone: '123456789' }

删除 JSON 对象的属性

删除 JSON 对象的属性可以使用 JavaScript 中的 delete 关键字。例如：

const jsonObj = {
  "name": "Bob",
  "age": 18,
  "gender": "male"
};

// 删除 jsonObj 的 age 属性
delete jsonObj.age;

console.log(jsonObj); // 输出：{ name: 'Bob', gender: 'male' }

循环遍历 JSON 的键值对

使用 for...in 循环可以遍历 JSON 对象的所有键值对。例如：

const jsonObj = {
  "name": "Bob",
  "age": 18,
  "gender": "male"
};

// 遍历 jsonObj 的所有键值对
for (const key in jsonObj) {
  console.log(`${key}: ${jsonObj[key]}`);
}

输出结果为：

name: Bob
age: 18
gender: male

复杂 JSON 对象的访问和修改

复杂的 JSON 对象可能包含多重嵌套，访问和修改起来会比较复杂。这时可以结合数组下标和对象属性的方式访问和修改 JSON 对象。

例如，对于以下 JSON 对象：

const jsonObj = {
  "name": "Bob",
  "age": 18,
  "contacts": [
    {
      "type": "phone",
      "value": "123456789"
    },
    {
      "type": "email",
      "value": "[e-mail]"
    }
  ]
};

可以使用以下代码访问和修改各个属性：

// 访问 jsonObj 中联系方式数组的第一个元素的值属性
console.log(jsonObj.contacts[0].value); // 输出：123456789

// 修改 jsonObj 中联系方式数组的第二个元素的值属性
jsonObj.contacts[1].value = "[e-mail]";

// 新增 jsonObj 中联系方式数组的第三个元素
jsonObj.contacts.push({
  "type": "wechat",
  "value": "BobWeChat"
});

console.log(jsonObj); // 输出修改后的 JSON 对象

示例说明

示例一：从后端接口获取 JSON 数据

假设我们有一个客户端应用，需要从后端接口获取 JSON 数据，然后渲染到页面上。我们可以使用 JavaScript 中的 fetch 方法获取 JSON 数据，然后使用 JSON.parse 方法将其转换为 JSON 对象，最后根据需要对 JSON 对象进行操作、修改和渲染。

以下是一个示例代码：

fetch("/api/user/1")
  .then(response => response.json())
  .then(jsonData => {
    console.log(jsonData); // 输出从后端接口获取的 JSON 数据

    // 将从后端接口获取的 JSON 数据渲染到页面中
    const nameEl = document.getElementById("name");
    const ageEl = document.getElementById("age");
    const genderEl = document.getElementById("gender");

    nameEl.textContent = jsonData.name;
    ageEl.textContent = jsonData.age;
    genderEl.textContent = jsonData.gender;
  });

示例二：将表单数据序列化为 JSON 字符串

假设我们有一个包含表单的页面，用户填写表单后需要将表单数据序列化为 JSON 字符串，然后提交到后端保存。我们可以使用 JavaScript 中的 FormData 对象获取表单数据，然后根据需要构建 JSON 对象，最后使用 JSON.stringify 方法将其转换为 JSON 字符串。

以下是一个示例代码：

<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" name="name" id="name">
  <br>

  <label for="age">年龄：</label>
  <input type="number" name="age" id="age">
  <br>

  <label for="gender">性别：</label>
  <select name="gender" id="gender">
    <option value="male">男</option>
    <option value="female">女</option>
  </select>
  <br>

  <button type="submit">提交</button>
</form>

<script>
  const formEl = document.getElementById("myForm");

  formEl.addEventListener("submit", event => {
    event.preventDefault();

    const formData = new FormData(formEl);
    const jsonObj = {};

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

    const jsonString = JSON.stringify(jsonObj);
    console.log(jsonString); // 输出序列化后的 JSON 字符串

    // 将序列化后的 JSON 字符串提交到后端保存
    // ...
  });
</script>

以上是对操作 JSON 的一些基本介绍和实践。操作 JSON 对于前端开发非常常见，能熟练掌握 JSON 的基础知识和常见操作方法是非常必要的。