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.keyobj["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.keyobj["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": "bob@example.com"
    }
  ]
};

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

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

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

// 新增 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 的基础知识和常见操作方法是非常必要的。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS中操作JSON总结 - Python技术站

(0)
上一篇 2023年5月26日
下一篇 2023年5月26日

相关文章

  • redis scan命令导致redis连接耗尽,线程上锁的解决

    下面我会详细讲解Redis Scan命令导致Redis连接耗尽和线程上锁的解决攻略。 问题背景 Redis Scan命令是Redis用于迭代key的一种方法。Scan命令的工作原理是对已有keys的集合进行分批迭代。但是,由于Scan需要通过多次迭代才能完成全部数据的扫描,所以会比较耗时和占用Redis的连接资源。 同时,当多个线程同时对Redis进行Sca…

    Java 2023年5月19日
    00
  • Java性能工具JMeter实现上传与下载脚本编写

    完整攻略: Java性能工具JMeter实现上传与下载脚本编写 本教程旨在通过JMeter实现上传与下载功能的性能测试,为此要求读者已经了解如何使用JMeter进行测试。如果您是JMeter新手,请参阅JMeter官方文档以获取更多信息。 步骤1:下载测试文件 为了执行上传和下载脚本的性能测试,我们需要先准备一些测试文件。可以使用wget命令或浏览器下载,务…

    Java 2023年5月19日
    00
  • Java实现人脸识别登录、注册等功能(最新完整版)

    首先我们来介绍一下这篇文章。《Java实现人脸识别登录、注册等功能(最新完整版)》是一篇介绍如何使用Java语言实现人脸识别登录、注册等功能的文章。文章详细介绍了如何搭建环境、实现人脸注册、识别、显示等功能。下面将对文章中的内容进行详细讲解。 一、环境搭建 在文章中,作者先介绍了如何搭建Java开发环境,包括JDK、Eclipse、OpenCV等工具的安装和…

    Java 2023年5月19日
    00
  • 简单实现Java web服务器

    请先让我简单介绍一下Java web服务器是什么:Java web服务器是通过Java编写的用于处理HTTP请求的服务器。它可以处理静态内容和动态内容。与其他Web服务器不同,Java web服务器通常可以执行Java Servlets和JavaServer Pages(JSP)等代码,以生成动态内容。下面是Java web服务器实现的完整攻略: 1. 确定…

    Java 2023年5月18日
    00
  • Mybatis 插入和删除批处理操作

    对于“Mybatis插入和删除批处理操作”的完整攻略,可以分为以下几个步骤: 1.配置Mybatis的批处理模式2.编写插入和删除的SQL语句3.使用SqlSession进行批量操作 下面对每一步进行详细的讲解。 1.配置Mybatis的批处理模式 在Mybatis配置文件中,添加以下属性来开启批处理模式。 <configuration> &lt…

    Java 2023年5月19日
    00
  • SpringBoot是如何使用SQL数据库的?

    Spring Boot是一个基于Spring框架的快速开发框架,它可以帮助我们快速构建Web应用程序。在Spring Boot中,我们可以使用多种方式来使用SQL数据库。以下是两种常见的方式: 1. 使用Spring Data JPA Spring Data JPA是一种基于JPA的数据访问框架,它可以帮助我们快速构建数据访问层。以下是一个示例: 添加依赖 …

    Java 2023年5月14日
    00
  • JavaScript6 let 新语法优势介绍

    JavaScript6 let 新语法优势介绍 ES6 新增了 let 声明变量的关键字,相较于传统的 var 声明变量方式,let 声明变量的方法具有以下优势。 1. 作用域更加清晰 JavaScript 变量的作用域与 var 关键字有关,var 声明变量会将变量提升至函数或全局作用域的顶端,因此在调用变量时可能会出现意料之外的问题,例如变量的作用域范围…

    Java 2023年6月15日
    00
  • Java的Struts框架报错“BaseException”的原因与解决办法

    当使用Java的Struts框架时,可能会遇到“BaseException”错误。这个错误通常由以下原因之一起: 配置错误:如果配置文件中没有正确配置Action,则可能会出现此。在这种情况下,需要检查配置文件以解决此问题。 代码错误:如果编写的代码中存在错误,则可能会出现此。在这种情况下,需要检查代码以解决此问题。 以下是两个实例: 例 1 如果配置文件中…

    Java 2023年5月5日
    00
合作推广
合作推广
分享本页
返回顶部