前端JavaScript篇之对JSON的理解

目录

  • 对JSON的理解
    • `JSON.stringify` 和 `JSON.parse` 方法
    • `JSON.stringify` 和 `JSON.parse` 区别
    • `JSON.stringify` 和 `JSON.parse` 注意事项
    • 总结


对JSON的理解

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它以易读易写的文本形式表示结构化数据,比较适合用来在不同的应用程序或平台之间传递数据。

简单来说,JSON就像是一种数据的语言,用于在不同的应用程序之间传递和共享数据。它的基本结构包括对象(由键值对组成)和数组(由值的有序列表组成)。对象中的键是字符串,值可以是字符串、数字、布尔值、对象或数组。数组是值的有序列表,可以包含任意类型的值。

下面是一个简单的JSON示例:

{"name": "John","age": 30,"isStudent": true,"hobbies": ["reading", "coding", "playing"]
}

在这个示例中,我们有一个对象,包含了人的姓名、年龄、是否是学生以及爱好的列表。键是字符串,对应的值可以是字符串(如姓名)或其他类型的值(如年龄为数字,是否是学生为布尔值,爱好为字符串数组)。

如果我们想在JavaScript中使用这个JSON数据,首先需要将JSON解析(或反序列化)为JavaScript对象,然后就可以方便地访问和操作其中的数据。

下面是一个使用JavaScript解析JSON的案例代码:

var jsonStr = '{ "name": "John", "age": 30, "isStudent": true, "hobbies": ["reading", "coding", "playing"] }'
var jsonObj = JSON.parse(jsonStr)console.log(jsonObj.name) // 输出: John
console.log(jsonObj.age) // 输出: 30
console.log(jsonObj.isStudent) // 输出: true
console.log(jsonObj.hobbies) // 输出: ["reading", "coding", "playing"]

请添加图片描述
在这个案例中,我们首先定义了一个包含JSON字符串的变量jsonStr。然后,使用JSON.parse()方法将JSON字符串解析为JavaScript对象,并将结果存储在jsonObj变量中。

通过访问jsonObj对象的属性,我们可以获取JSON中的数据。例如,jsonObj.name返回对象的姓名属性值"John",jsonObj.age返回年龄属性值30。

通过这种方式,我们可以方便地处理在不同应用程序之间传递的数据,实现数据的交换和共享。

JSON.stringifyJSON.parse 方法

在 JavaScript 中,JSON.stringifyJSON.parse 方法用于处理 JSON 数据。

  • JSON.stringify 方法接收一个 JavaScript 对象作为参数,并将其转换为一个 JSON 字符串。如果需要向后端发送数据,可以使用这个方法将 JavaScript 对象转换为 JSON 格式的字符串。例如:
var obj = { name: 'John', age: 30 }
var jsonString = JSON.stringify(obj)
console.log(jsonString)
// 输出 '{"name":"John","age":30}'

请添加图片描述

  • JSON.parse 方法接收一个 JSON 格式的字符串作为参数,并将其解析为一个 JavaScript 对象。当从后端接收到 JSON 格式的字符串时,可以使用这个方法将其解析为 JavaScript 对象,以便进行数据的访问。例如:
var jsonStr = '{"name":"John","age":30}'
var obj = JSON.parse(jsonStr)
console.log(obj)
// 输出 { name: "John", age: 30 }

请添加图片描述

这两个方法在前后端数据交互中非常常用,能够方便地实现 JavaScript 对象和 JSON 字符串之间的转换。

JSON.stringifyJSON.parse 区别

区别

  • JSON.stringify:用于将 JavaScript 对象转换为 JSON 格式的字符串。
  • JSON.parse:用于将 JSON 格式的字符串解析为 JavaScript 对象。

JSON.stringifyJSON.parse 注意事项

  1. 循环引用JSON.stringify 无法处理包含循环引用的对象,会导致报错。在处理可能包含循环引用的对象时需要小心处理。
  2. 日期对象JSON.stringify 在序列化日期对象时会将其转换为 ISO 格式的字符串,但在使用 JSON.parse 解析时不会自动转换回日期对象,需要进行额外的处理。
  3. 特殊值JSON.stringify 在处理特殊值(如 undefined、函数、Symbol 等)时会将其转换为 null 或忽略。在需要保留这些特殊值的情况下需要特别注意。
  4. 异常处理JSON.parse 在解析非标准的 JSON 格式字符串时会抛出 SyntaxError 异常,因此需要确保传入的字符串是符合 JSON 格式的。
  5. 性能考虑:在处理大型数据集时,需要考虑 JSON.stringifyJSON.parse 的性能,避免影响页面或应用程序的性能。

总结

JSON是一种基于文本的轻量级数据交换格式,适用于任何编程语言。在项目开发中,JSON常被用作前后端数据交换的方式。前端通过序列化符合JSON格式的数据结构为JSON字符串,传递给后端。后端则解析JSON字符串,生成对应的数据结构,实现数据传递。

虽然JSON的语法基于JavaScript,但JSON对象格式更严格。例如,JSON属性值不能为函数,不能包含NaN等。大多数JavaScript对象不符合JSON格式。

JavaScript提供了两个方法:

  • JSON.stringify:将符合JSON格式的数据结构转换为JSON字符串,便于前端向后端发送数据。
  • JSON.parse:将JSON格式的字符串转换为JavaScript数据结构,方便从后端接收JSON格式的字符串并解析为JavaScript对象,以便进行数据访问。

持续学习总结记录中,回顾一下上面的内容:
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,基于 JavaScript 语法的子集,采用键值对的方式表示数据。JSON 具有易于阅读和编写、易于解析和生成、可扩展性强等特点,被广泛应用于前后端数据交互和配置文件等领域。在 JavaScript 中,可以使用 JSON.parse() 方法将 JSON 字符串解析为 JavaScript 对象,使用 JSON.stringify() 方法将 JavaScript 对象序列化为 JSON 字符串。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/253765.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue前端框架--Vue工程项目问题总结{脚手架 Vue-cli}

Vue脚手架部署问题总结 我所遇到的一共两大问题 只有先执行npm install之后 才能run serve 否则会报错 vue-cli-serve不是内部或者外部的命令,也不是可运行的程序或者批处理文件的错误 1. 运行npm install会报错 2. 运行npm run serve报错 nodejs官网为 https://no…

ERP 系统架构的设计与实践总结

企业资源计划(ERP)系统是一种集成多个业务功能的综合性软件解决方案。在设计和实践 ERP 系统架构时,需要考虑诸多因素,以确保系统能够满足企业的需求,并提供高效、可靠、安全的服务。本文将介绍一些关键的设计原则和实…

03-抓包_封包_协议_APP_小程序_PC应用_WEB应用

抓包_封包_协议_APP_小程序_PC应用_WEB应用 一、参考工具二、演示案例:2.1、WEB应用站点操作数据抓包-浏览器审查查看元素网络监听2.2、APP&小程序&PC抓包HTTP/S数据-Charles&Fiddler&Burpsuite2.3、程序进程&网络接口&其他协议抓包-WireSh…

LabVIEW双光子荧光显微成像系统开发

双光子显微成像是一种高级荧光显微技术,广泛用于生物学和医学研究,尤其是用于活体组织的深层成像。在双光子成像过程中,振镜(Galvo镜)扮演了非常关键的角色,它负责精确控制激光束在样本上的扫描路径。以下是…

贪心算法篇

“靠漫步,将生趣填饱~” 贪心算法简介? 贪心算法(Greedy Algorithm),也称为贪婪算法,是一种在解决问题时采取贪心策略的方法。其基本原理是很简单的: “在每个决策点上都选择当下看似最好的选项…

専攻春节钜惠

専攻春节钜惠 大家好,新春佳节到来之际,为了答谢大家多年来的支持厚爱,也为了更广泛的推广VBA应用,“VBA语言専攻”在春节期间再次推出钜惠活动,时间2月9日到2月17日(大年三十到正月初八) 1 &…

一个基于 .NET 7 + Vue.js 的前后端分离的通用后台管理系统框架 - DncZeus

前言 今天给大家推荐一个基于.NET 7 Vue.js(iview-admin) 的前后端分离的通用后台权限(页面访问、操作按钮控制)管理系统框架:DncZeus。 官方项目简介 DncZeus是一个基于 .NET 7 Vue.js 的前后端分离的通用后台管理系统框架。后端使用.NET 7 Entity Framework…

6-3、T型加减速单片机程序【51单片机+L298N步进电机系列教程】

↑↑↑点击上方【目录】,查看本系列全部文章 摘要:根据前两节内容,已完成所有计算工作,本节内容介绍具体单片机程序流程及代码 一、程序流程图 根据前两节文章内容可知,T型加减速的关键内容是运动类型的判断以及定时…

第5节、S曲线加减速转动【51单片机+L298N步进电机系列教程】

↑↑↑点击上方【目录】,查看本系列全部文章 摘要:本节介绍步进电机S曲线相关内容,总共分四个小节讨论步进电机S曲线相关内容 5-1、S曲线加减速简介   根据上节内容,步进电机每一段的速度可以任意设置,但是每一段的…

单片机学习笔记---中断系统(含外部中断)

目录 中断介绍 中断优先级 中断嵌套 中断技术的优点 中断的结构 中断请求源 中断优先级 5个基本中断内部的结构 INT0和INT1 T0和T1 串口 中断寄存器 IE TCON 中断优先级列表 中断号 中断响应的条件 代码编写实例分析 外部中断硬件电路分析 这一节我们主要是…

视频上传 - 断点续传那点事

在上一篇文章中,我们讲解了分片上传的实现方式。在讲解断点续传之前,我要把上篇文章中留下的问题讲解一下。读过上一篇文章的小伙伴们都知道,对于分片上传来说,它的传输方式分为2种,一种是按顺序传输,一种是…

GPT-1, GPT-2, GPT-3, GPT-3.5, GPT-4论文内容解读

目录 1 ChatGPT概述1.1 what is chatGPT1.2 How does ChatGPT work1.3 The applications of ChatGPT1.3 The limitations of ChatGPT 2 算法原理2.1 GPT-12.1.1 Unsupervised pre-training2.1.2 Supervised fine-tuning2.1.3 语料2.1.4 分析 2.2 GPT-22.3 GPT-32.4 InstructGPT…

【操作系统】MacOS虚拟内存统计指标

目录 命令及其结果 参数解读 有趣的实验 在 macOS 系统中,虚拟内存统计指标提供了对系统内存使用情况和虚拟内存操作的重要洞察。通过分析这些指标,我们可以更好地了解系统的性能状况和内存管理情况。 命令及其结果 >>> vm_stat Mach Virtu…

常见云计算服务模式( IaaS基础架构即服务、PaaS平台即服务、SaaS软件即服务)

常见云计算服务模式 ( IaaS基础架构即服务、PaaS平台即服务、SaaS软件即服务) 零、00时光宝盒 世界并不完美,面对很多事情我们都很无奈甚至悲哀,但生活总要继续下去,不止是为了自己。抱怨没有用,顾影自怜也…

51单片机之LED灯模块篇

御风以翔 破浪以飏 🎥个人主页 🔥个人专栏 目录 点亮一盏LED灯 LED的组成原理 LED的硬件模型 点亮一盏LED灯的程序设计 LED灯闪烁 LED流水灯 独立按键控制LED灯亮灭 独立按键的组成原理 独立按键的硬件模型 独立按键控制LED灯状态 按键的抖动 独立按键…

Python(SQLite)executescript用法

SQLite 数据库模块的游标对象还包含了一个 executescript() 方法,这不是一个标准的 API 方法,这意味着在其他数据库 API 模块中可能没有这个方法。但是这个方法却很实用,它可以执行一段 SQL 脚本。 例如,如下程序使用 executescr…

Android中的MVVM

演变 开发常用的框架包括MVC、MVP和本文的MVVM,三种框架都是为了分离ui界面和处理逻辑而出现的框架模式。mvp、mvvm都由mvc演化而来,他们不属于某种语言的框架,当存在ui页面和逻辑代码时,我们就可以使用这三种模式。 model和vie…

uniapp android和微信小程序实现PDF在线预览

在使用uniapp开发移动端时,微信开发者工具里webview能正常打开后端接口返回的pdf文件流。正式发布后,在配置了业务域名和服务器域名的前提下,预览pdf文件却只能看到白屏,因此我猜测微信小程序不能通过webview读取文件流。这个想法…

机器学习的整个流程

机器学习的整个流程定义了数据科学团队执行以创建和交付机器学习模型的工作流。此外,机器学习流程还定义了团队如何协作合作,以创建最有用的预测模型。 机器学习high level的流程 机器学习流程的关键步骤包括问题探索(Problem Exploration&a…

Django模板(三)

一、标签URL 返回与给定视图和可选参数相匹配的绝对路径引用(不含域名的 URL) {% url some-url-name v1 v2 %} 第一个参数是url模式名称,后面跟着的是参数,以空格分隔可以使用关键字: {% url some-url-name arg1=v1 arg2=v2 %}如果您想检索命名空间的URL,请指定完全限定…