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日

相关文章

  • Java 集合系列(二)ArrayList详解

    Java 集合系列(二)ArrayList详解 一、ArrayList概述 ArrayList是Java中最常用的集合类之一,其底层是由数组实现的动态数组结构。与数组相比,ArrayList具有容量可动态增加、元素可动态删除、插入,方便灵活,更加适合实际业务需求。 二、ArrayList常用操作 1.创建ArrayList集合 通过无参构造器可以创建一个初始…

    Java 2023年5月26日
    00
  • 页面的缓存与不缓存设置及html页面中meta的作用

    页面缓存是浏览器缓存方式之一,也是提高网站性能的重要手段之一。Web页面中通过使用HTTP头,让浏览器在本地缓存页面,以避免重复网络请求。本文将对页面缓存和不缓存设置进行详细讲解,并介绍HTML页面中meta标签的作用。 页面缓存的作用 页面缓存是将网站的静态资源如CSS、JS、图片等文件保存在本地,下次打开同样的页面,在一段时间内可以直接从缓存中读取,从而…

    Java 2023年6月16日
    00
  • Java SpringBoot 使用拦截器作为权限控制的实现方法

    下面我详细讲解“Java SpringBoot 使用拦截器作为权限控制的实现方法”的完整攻略。 前言 在 Web 应用中,通常需要对不同的用户(或用户组)进行权限控制,以保证数据和资源的安全。其中,Spring Security 是目前比较流行的安全框架,它提供了很多种安全特性,比如:认证、授权、防止 CSRF 攻击等。然而,在某些场景下,我们可能只需要简单…

    Java 2023年5月19日
    00
  • Android基于socket实现的简单C/S聊天通信功能

    实现Android基于socket的C/S聊天通信功能,可以分成如下几个步骤: 1. 建立Server端 使用Java的ServerSocket类创建Server端。 在Server端运行一个死循环,等待Client发来连接请求(使用Socket类进行连接)。 接收Client发送的消息,处理并返回数据给Client。 下面是一个Java Server端的示…

    Java 2023年5月23日
    00
  • Java数组的基本操作方法整理

    Java数组的基本操作方法整理 什么是Java数组 Java数组(Array)是一个固定长度、由同类型元素构成的有序集合。 Java数组的长度是不可变的(一旦确定,就不能再改变),数组一旦创建便固定,数组中的元素必须是相同的类型,这有利于Java的类型检查。 Java数组的定义 Java数组的定义格式如下: // 定义数组的方法之一 <元素类型>…

    Java 2023年5月19日
    00
  • 基于Ajax+div的“左边菜单、右边内容”页面效果实现

    “基于Ajax+div的‘左边菜单、右边内容’页面效果实现”是现代web前端开发中常用的技术之一,利用该技术可以实现Web应用程序的异步局部更新,提升用户体验。实现该效果的主要步骤包括以下内容: 步骤一:设计页面结构 该效果的实现主要依赖于HTML页面布局的正确实现。需要创建两个区域:左边菜单和右边内容区域。左边菜单区域需要部署一组链接,点击每个链接时,右边…

    Java 2023年6月15日
    00
  • SpringBoot超详细讲解自动配置原理

    SpringBoot超详细讲解自动配置原理 SpringBoot的自动配置是其最重要的特性之一。在本文中,我们将深入探讨SpringBoot自动配置的原理,并提供两个示例来帮助读者更好地理解这些概念。 自动配置原理 SpringBoot的自动配置是通过条件注解来实现的。条件注解是一种特殊的注解,它只有在满足特定条件时才会生效。SpringBoot使用条件注解…

    Java 2023年5月15日
    00
  • 剑指Offer之Java算法习题精讲链表专题篇

    这篇文章主要是讲解《剑指Offer》中链表专题的相关算法习题的解法,并使用Java语言实现。其中包括链表的基本操作、链表的快慢指针应用、链表的反转、链表的合并等。接下来,我将从以下几个方面逐一介绍该篇文章的内容。 标题 文章的每一部分都应该用适当的标题进行标识,方便读者阅读和理解。 代码块 在介绍算法的过程中,应该包含合适的代码块,以便读者更加清晰地理解算法…

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