【全解析】深入理解 JavaScript JSON 数据解析
一、JSON 概述
1. 概念
JSON 全称为 JavaScript Object Notation,是一种轻量级的数据交换格式。它是 JavaScript 中用于描述对象数据的语法的扩展。不过并不限于与 JavaScript 一起使用。它采用完全独立于语言的文本格式,这些特性使 JSON 成为理想的数据交换格式。易于阅读和编写,同时也易于机器解析和生成。所有现代编程语言都支持这些数据结构,使 JSON 完全独立于语言。
2. 历史
在 2000 年代初期,Douglas Crockford 创建了 JSON 以实现最小化、可移植和文本化。作为 JavaScript 的一个子集,JSON 与 Web 浏览器脚本语言大约在同一时间流行起来。到 2010 年代初,JSON 成为新公共 API 的流行选择。
JSON 于 2013 年标准化为 ECMA-404,并于 2017 年发布为 RFC8259。RFC 和 ECMA 标准保持一致。JSON 的官方媒体类型是 application/json
,JSON 文件名使用扩展名 .json
。
JSON 源于对无状态、实时的服务器到浏览器通信协议的需求,它旨在成为 XML 的轻量级替代方案,以允许在移动处理场景和 Web 上轻松解析 JavaScript。
JSON 通常与 REST 服务相关联,尤其是对于 Web 上的 API。尽管 API 的 REST 架构允许使用任何格式,但 JSON 提供了一种更灵活的消息格式,可以提高通信速度。在开发需要快速、紧凑和方便的数据序列化的 Web 或移动应用程序时,它非常有用。
3. 特点
JSON 的流行正是因为网站和移动应用程序需要更快捷、有效地将数据从一个系统传输到另一个系统。JSON 可以通过多种方式共享数据、存储设置以及与系统交互。它的简单性和灵活性使其适用于许多不同的情况。
JSON 最常见的用法是通过网络连接交换序列化数据。JSON 的其他常见用途包括公共、前端或内部 API、NoSQL 数据库、模式描述、配置文件、公共数据或数据导出。
JSON 的特点如下:
-
紧凑、高效的格式:JSON 语法提供了简单的数据解析和更快的实现;
-
易于阅读: 人类和计算机都可以快速解释语法且错误最少;
-
广泛支持: 大多数语言、操作系统和浏览器都可以使用开箱即用的 JSON,这允许使用 JSON 而不存在兼容性问题;
-
自我描述:很容易区分数据类型,并且更容易解释数据,而无需提前知道会发生什么;
-
格式灵活:JSON 支持多种数据类型,可以组合起来表达大多数数据的结构。
二、JSON 结构和语法
JSON 易于编写和阅读,并且易于在大多数语言使用的数据结构之间进行转换。下面来看一下 JSON 的组成、JSON 支持的数据类型。
1. 结构
下面是一个最基本的 JSON 示例:
{"name": "zhangsan"}
在上面的示例中,key 是 name
,value 是 zhangsan
。JSON 可以保存多个 key:value
对:
{"name": "zhangsan", "age": 18, "city": "beijing"}
当然这只是一个简单的例子,在实际应用中 JSON 可能会多层嵌套。对象和数组是可以保存其他值的值,因此 JSON 数据可能会发生无限嵌套。这允许 JSON 描述大多数数据类型。
下面是 JSON 数据类型的完整列表:
-
string:用引号括起来的文字。
-
number:正整数或负整数或浮点数。
-
object:用花括号括起来的键值对
-
array:一个或多个 JSON 对象的集合。
-
boolean:不带引号的 true 或 false 值。
-
null:表示键值对没有数据,表示为 null,不带引号。
下面是一个包含这些数据类型的 JSON 对象示例:
{"name": "zhangsan","age": 28,"badperson":true,"child": {"name": "zhangxiaosan","age": 8},"job": ["React", "JavaScript"],"wages": null,
}
2. 语法
下面来看看如何避免常见的 JSON 语法错误:
-
始终将键值对保存在双引号内,大多数 JSON 解析器使用双引号解析 JSON 对象;
-
切勿在 key 中使用连字符。而是使用下划线 (_)、全部小写或驼峰式大小写;
-
使用 JSON linter 来检查 JSON 是有效的,可以使用 JSONLint 等工具进行校验。
三、JSON 解析与序列化
JSON 内置了两种方法:
-
JSON.parse()
:将数据转换为 JavaScript 对象。 -
JSON.stringify()
:将 JavaScript 对象转换为字符串。
1. JSON.parse()
JSON.parse()
的语法如下:
JSON.parse(text, reviver)
-
text: 必需, 一个有效的 JSON 字符串。
-
reviver:可选,一个转换结果的函数, 将为对象的每个成员调用此函数。
const json = '{"name": "zhangsan", "age": 18, "city": "beijing"}';const myJSON = JSON.parse(json);console.log(myJSON.name, myJSON.age); // zhangsan 18
我们可以启用 JSON.parse
的第二个参数 reviver
,一个转换结果的函数,对象的每个成员都会调用此函数:
const json = '{"name": "zhangsan", "age": 18, "city": "beijing"}';const myJSON = JSON.parse(json, (key, value) => {if(typeof value === "number") {return String(value).padStart(3, "0");}return value;
});console.log(myJSON.name, myJSON.age); // zhangsan 018
2. JSON.stringify()
JSON.stringify()
的语法如下:
JSON.stringify(value, replacer, space)
-
value: 必需, 要转换的 JavaScript 值(通常为对象或数组)。
-
replacer: 可选。用于转换结果的函数或数组。如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined,则排除成员。根对象的键是一个空字符串:""。如果 replacer 是一个数组,则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时,将忽略 replacer 数组。
-
space: 可选,文本添加缩进、空格和换行符,如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格,如果 space 大于 10,则文本缩进 10 个空格。space 也可以使用非数字,如:
\t
。
const json = {"name": "zhangsan", "age": 18, "city": "beijing"};const myJSON = JSON.stringify(json);console.log(myJSON); // {"name":"zhangsan","age":18,"city":"beijing"}
3. 异常处理
那如果 JSON 无效怎么办呢?比如缺少了逗号,引号等,上面的两种方法都会抛出异常。建议在使用这两个方法时使用try...catch
来包裹,也可以将其封装成一个函数。
let myJSON = {}
const json = '{"name": "zhangsan", "age": 18, "city": "beijing"}';try {myJSON = JSON.parse(json);
} catch (e){console.error(e.message)
}
console.log(myJSON.name, myJSON.age); // zhangsan 18
如果 JSON 操作时出现问题,这样就能确保应用程序不会因此中断。
相关文章:
【全解析】深入理解 JavaScript JSON 数据解析
一、JSON 概述 1. 概念 JSON 全称为 JavaScript Object Notation,是一种轻量级的数据交换格式。它是 JavaScript 中用于描述对象数据的语法的扩展。不过并不限于与 JavaScript 一起使用。它采用完全独立于语言的文本格式,这些特性使 JSON 成为理想的数…...
影刀RPA怎么和AI结合,制作自动采集小红书爆款文章+自动用AI改写标题、内容+用AI文生图生成发文图片+自动在小红书上发布文章
环境: 影刀5.26.24 Win10专业版 doubao deepseek r1 wps 问题描述: 影刀RPA怎么和AI结合,制作自动采集小红书爆款文章+自动用AI改写标题、内容+用AI文生图生成发文图片+自动在小红书上发布文章,最后上传到飞书备份 解决方案: 1.主要流程如下: 全局变量设置(关键…...
懒人一键搭建符号执行环境V5K3
0.背景 在写完上一篇文章后发现,其实V5k3的组合也可以使用。Verilator v5.x 系列版本完全支持本项目的编译与仿真。 不同于 v3 版本,Verilator v5 引入了更严格的访问控制机制:要从 Verilator 生成的 C 仿真模型中访问内部信号或变量&#x…...
Java队列(Queue)核心操作与最佳实践:深入解析与面试指南
文章目录 概述一、Java队列核心实现类对比1. LinkedList2. ArrayDeque3. PriorityQueue 二、核心操作API与时间复杂度三、经典使用场景与最佳实践场景1:BFS层序遍历(树/图)场景2:滑动窗口最大值(单调队列) …...
Android 中实现图片翻转动画(卡片翻转效果)
1、简述 通过 ObjectAnimator 和 AnimatorSet 可以实现图片的翻转动画,并在翻转过程中切换图片,同时避免图片被镜像。 ObjectAnimator 是 Android 动画框架中的一个类,用于对对象的属性进行动画效果处理。它通过改变对象的属性值来实现动画效果,非常适合实现复杂的动画,如…...
智能电网第1期 | 工业交换机在变电站自动化系统中的作用
随着智能电网建设的加速推进,变电站自动化系统对通信网络的实时性、可靠性和安全性提出了更高要求。在变电站智能化改造过程中,传统网络架构面临诸多挑战: 多协议兼容难题:继电保护、测控装置等设备通信协议多样,难以统…...
01.浏览器自动化webdriver源码分析之启动函数
日后,网络爬虫也好,数据采集也好,自动化必然是主流。因此,笔者未雨绸缪,在此研究各类自动化源码,希望能够赶上时代,做出一套实用的自动化框架。 这里先研究传统的webdriver中转来进行浏览器自动…...
day35图像处理OpenCV
文章目录 一、图像预处理17 直方图均衡化17.1绘制直方图17.2直方图均衡化1. 自适应直方图均衡化2. 对比度受限的自适应直方图均衡化3. 示例 19 模板匹配 一、图像预处理 17 直方图均衡化 直方图:反映图像像素分布的统计图,横坐标就是图像像素的取值&…...
精益数据分析(15/126):解锁数据分析关键方法,驱动业务增长
精益数据分析(15/126):解锁数据分析关键方法,驱动业务增长 在创业与数据分析的征程中,我们都在努力探寻成功的密码。今天,我依旧带着和大家共同进步的初衷,深入解读《精益数据分析》的相关内容…...
JETBRAINS USER AGREEMENT【2025.4.16】更新用户许可协议
JETBRAIN旗下的各产品更新用户许可协议: 大致跟漂亮国出口管制政策有关,以下是详细内容: JETBRAINS USER AGREEMENT Version 2.0, effective as of April 16, 2025 THIS IS A LEGAL AGREEMENT. BY CLICKING ON THE "I AGREE" (OR…...
【数字图像处理】立体视觉基础(1)
成像 成像过程:三维空间坐标到二维图像坐标的变换 相机矩阵:建立三维到二维的投影关系 相机的使用步骤(模型-视图变换): (1)视图变换 (2)模型变换 (3&…...
通过AI工具或模型创建PPT的不同方式详解,结合 Assistants API、DALL·E 3 等工具的功能对比及表格总结
以下是通过AI工具或模型创建PPT的不同方式详解,结合 Assistants API、DALLE 3 等工具的功能对比及表格总结: 1. 主要实现方式详解 1.1 基于文本生成PPT 工具示例:Microsoft PowerPoint Copilot、Google Workspace(AI-powered D…...
weibo_har鸿蒙微博分享,单例二次封装,鸿蒙微博,微博登录
weibo_har鸿蒙微博分享,单例二次封装,鸿蒙微博 HarmonyOS 5.0.3 Beta2 SDK,原样包含OpenHarmony SDK Ohos_sdk_public 5.0.3.131 (API Version 15 Beta2) 🏆简介 zyl/weibo_har是微博封装使用,支持原生core使用 &a…...
C++ Lambda表达式复习
C Lambda表达式 (C Lambda Expressions: Beginner to Advanced) Lambda表达式是C11引入的一种轻量级匿名函数语法,支持闭包捕获,可以简化代码逻辑,特别是在函数式编程、回调函数和STL算法场景中尤为常用。本文将从基础语法到高级应用&#x…...
鸿蒙NEXT开发权限工具类(申请授权相关)(ArkTs)
import abilityAccessCtrl, { Permissions } from ohos.abilityAccessCtrl; import { bundleManager, common, PermissionRequestResult } from kit.AbilityKit; import { BusinessError } from ohos.base; import { ToastUtil } from ./ToastUtil;/*** 权限工具类(…...
1000 QPS 下 MySQL 性能瓶颈解决方案
当 MySQL 在 1000 QPS 时出现性能瓶颈,需从索引优化、查询逻辑调整、服务器配置调优、架构扩展等多维度综合解决,具体策略如下: 一、索引优化 补充缺失索引 通过慢查询日志定位高频低效 SQL,使用 EXPLAIN 分…...
【MySQL】MySQL 表的增删改查(CRUD)—— 下篇(内含聚合查询、group by和having子句、联合查询、插入查询结果)
目录 1. 插入查询结果 2 聚合查询 (行与行之间运算) count 计算查询结果的行数 sum 求和 avg 求平均值 max 最大值 min 最小值 【小结】 3. group by 子句 分组 where 条件 having 条件 4. 联合查询(多表查询) 内连接…...
简化K8S部署流程:通过Apisix实现蓝绿发布策略详解(上)
本次主题主要目的是为大家讲解蓝绿发布,但是发现文档和内容太长了,对此将文档拆分成了两部分,视频拆分成了好几部分,这样大家刷起来没疲劳感。 第一部分《apisix argorollout 实现蓝绿发布I-使用apisix发布应用》,主要…...
FLV 与 MP4 格式深度剖析:结构、原理
1 FLV格式分析 1.1 定义 FLV(Flash Video)是Adobe公司推出的⼀种流媒体格式,由于其封装后的⾳视频⽂件体积⼩、封装简单等特点,⾮常适合于互联⽹上使⽤。⽬前主流的视频⽹站基本都⽀持FLV。采⽤FLV格式封装的⽂件后缀为.flv FLV封装格式是由⼀个**⽂件…...
k8s的yaml文件里的volume跟volumeMount的区别
volume 是 Pod 级别的资源,用于定义存储卷。它是一个独立于容器的存储资源,可以被一个或多个容器共享使用。volume 的定义位于 Pod 的 spec.volumes 部分。 特点 独立性:volume 是 Pod 的一部分,而不是容器的一部分。它独立于容…...
Git常用操作命令
配置 Git git config --global user.name "Your Name": 设置用户名。git config --global user.email "your_emailexample.com": 设置用户邮箱。 初始化和克隆仓库 git init: 初始化一个新的 Git 仓库。git clone [URL]: 克隆一个远程仓库到本地。 git cl…...
09.传输层协议 ——— TCP协议
文章目录 TCP协议 谈谈可靠性TCP协议格式 序号与确认序号窗口大小六个标志位 确认应答机制(ACK)超时重传机制连接管理机制 三次握手四次挥手 流量控制滑动窗口拥塞控制延迟应答捎带应答面向字节流粘包问题TCP异常情况TCP小结基于TCP的应用层协议 TCP协…...
NineData 与飞书深度集成,企业级数据管理审批流程全面自动化
NineData 正式推出与飞书审批系统的深度集成功能,企业用户在 NineData 平台发起的审批工单,将自动推送至审批人的飞书中,审批人可以直接在飞书进行审批并通过/拒绝。该功能实现跨系统协作,带来巨大的审批效率提升,为各…...
WebRTC服务器Coturn服务器中的通信协议
1、概述 作为WebRTC服务器,coturn通信协议主要是STUN和TURN协议 STUN&TURN协议头部都是20个字节,用 Message Type来区分不同的协议 |------2------|------2------|------------4------------|------------------------12-------------------------|-----------…...
4.19除自身以外数组的乘积
我自己的思路,想用双指针, 一个从左边left开始乘,一个从右边right开始乘,如果left,或者right遇到了目标索引i(也就是我们要跨过去的当前元素),那么直接让对应的指针加一,当前元素不参与累积的计算ÿ…...
Anaconda3使用conda进行包管理
一、基础包管理操作 安装包 使用 conda install <包名> 安装指定包,支持多包批量安装和版本指定: conda install numpy # 安装单个包 conda install numpy scipy pandas # 批量安装多个包 conda install numpy1.21 # 指定版本 conda instal…...
媒体关注:联易融聚焦AI+业务,重塑供应链金融生态
近日,供应链金融科技龙头企业联易融科技集团(以下简称“联易融”)发布的公告显示,截至2024年末,公司现金储备达51亿元,同比上一年增加2亿元。公司称,公司经营性现金流保持健康,现金储…...
安装 Conda 环境
安装 Conda 环境:快速指南 什么是 Conda? Conda 是一个开源的跨平台包管理器和环境管理系统,支持 Python、R、Julia 等语言。它广泛用于数据科学和机器学习领域,能够轻松创建、管理和切换开发环境。 安装步骤 1. 安装 Anaconda…...
Qt Creator 创建 Qt Quick Application一些问题
一、Qt Creator 创建 Qt Quick Application 时无法选择 MSVC 编译器(即使已安装 Qt 5.15.2 和 MSVC2019) 1、打开 Qt Creator 的编译器设置 工具 (Tools) → 选项 (Options) → Kits → 编译器 (Compilers) 检查是否存在 Microsoft Visual C++ Compiler (x86_amd64) 或类似条…...
Spark-Streaming核心编程
以下是今天所学的知识点与代码测试: Spark-Streaming DStream实操 案例一:WordCount案例 需求:使用 netcat 工具向 9999 端口不断的发送数据,通过 SparkStreaming 读取端口数据并统计不同单词出现的次数 实验步骤:…...
深度剖析神经网络:从基础原理到面试要点(二)
引言 在人工智能蓬勃发展的今天,神经网络作为其核心技术之一,广泛应用于图像识别、自然语言处理、语音识别等众多领域。深入理解神经网络的数学模型和结构,对于掌握人工智能技术至关重要。本文将对神经网络的关键知识点进行详细解析…...
c#操作excel
说明 vs2022开发,调用excel 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.IO; using System.Linq; using System.Text; using System.Threading.Tasks; using Sy…...
MQTTX + MCP:MQTT 客户端秒变物联网 Agent
引言:MQTTX 与 MCP 的融合 作为最受欢迎的 MQTT 客户端工具,MQTTX 在 1.12.0 beta 版本中集成了模型上下文协议(MCP)到 Copilot AI 功能中,显著提升了服务能力。这一融合让 MQTTX 转变为 MCP Host(也就是发…...
GSAP 动画引擎实战:打造丝滑动效交互组件库
目录 一、前言二、项目初始化三、核心动效组件实战1. 元素淡入组件:FadeIn.vue2. 列表级联动画:SlideList.vue3. 滚动触发 Reveal 动画:ScrollReveal.vue4. 拖拽盒子组件:DraggableBox.vue5. 打字机效果组件:Typewrite…...
[OpenGL] Lambertian材质漫反射BRDF方程的解释与推导
一、简介 本文简单的介绍了 Physical Based Rendering, PBR 中的 Lambertian 材质漫反射BRDF公式 f r l a m b e r t i a n c d i f f π fr_{lambertian}\frac{c_{diff}}{\pi} frlambertianπcdiff的推导。 二、漫反射项 根据 渲染方程: L o ( v ) ∫ …...
网易云音乐如何修改缓存地址到D盘
你可以通过创建 符号链接(Symbolic Link) 将网易云音乐的缓存目录转移到D盘,无需修改软件设置。以下是具体步骤: 操作步骤 关闭网易云音乐 确保程序完全退出(任务栏右下角无残留进程)。 备份并移动原缓存文…...
react使用01
React.cloneElement(element,props,…children) 这个是React的官方API,,主要用于克隆并修改React元素,, 本质: 复制一个已有的React元素,并允许你修改他的props element : 必须是一个有效的element元素p…...
yooAsset打包后材质丢失
以安卓为目标平台打出的AssetBundle包(尤其是YooAsset打出的),在Window下Unity编辑器以HostPlayMode运行,有时显示会丢失部分材质。 这是因为安卓目标的AssetBundle包适合OpenglES,而window下Unity编辑器模式是Dx11&a…...
Codeforces Round 1019 (Div. 2)
A. Common Multiple 找不同的数字 #include<iostream> #include<vector> #include<algorithm> using namespace std; int main() {int t; cin >> t;while (t--) {int n;cin >> n;vector<int> a(n);for (int i 0; i < n; i)cin >&…...
【Spring Boot】MyBatis多表查询的操作:注解和XML实现SQL语句
1.准备工作 1.1创建数据库 (1)创建数据库: CREATE DATABASE mybatis_test DEFAULT CHARACTER SET utf8mb4;(2)使用数据库 -- 使⽤数据数据 USE mybatis_test;1.2 创建用户表和实体类 创建用户表 -- 创建表[⽤⼾表…...
Docker离线安装与配置指南
Docker离线安装与配置指南 离线安装步骤 1. 下载离线安装包 官方下载地址: https://download.docker.com/linux/static/stable/x86_64/注意:国内用户若无法访问,可能需要使用科学上网工具。本文档以Docker 20.10.23版本为例。 2. 安装与部…...
N8N 官方 MCP 节点实战指南:AI 驱动下的多工具协同应用场景全解析
在低代码自动化领域,N8N 凭借其强大的节点扩展能力和灵活的工作流编排,成为企业构建复杂自动化流程的首选工具。随着 AI Agent 技术的兴起,通过 MCP(Multi-Tool Coordination Protocol)实现 AI 与外部工具的协同调用&a…...
v-html 显示富文本内容
返回数据格式: 只有图片名称 显示不出完整路径 解决方法:在接收数据后手动给img格式的拼接vite.config中的服务器地址 页面: <el-button click"">获取信息<el-button><!-- 弹出层 --> <el-dialog v-model&…...
UWB与GPS技术融合的室内外无缝定位方案
一、技术原理与互补性 双模定位机制 室外场景:GPS/北斗提供10-30厘米级定位精度(RTK技术辅助),覆盖露天区域。室内场景:UWB通过TOF/TDOA算法实现10-50厘米级定位精度,穿透金…...
AiEditor v1.3.8 发布
2025 年 4 月 22 日,AI 富文本编辑器 AiEditor 发布了 v1.3.8 版本。 AiEditor 是一个面向 AI 的下一代富文本编辑器,基于 Web Component 开发,支持 Layui、Vue、React、Angular 等几乎任何前端框架,适配 PC Web 端和手机端&#…...
从零学会epoll的使用和原理
从零学会epoll的使用和原理 第一步:理解 select / poll 的缺陷 一、select 和 poll 是什么? 它们是 Linux 提供的 I/O 多路复用机制,可以让我们同时监听多个文件描述符(fd),比如 socket,来等…...
XHTMLConverter把docx转换html报java.lang.NullPointerException异常
一.报错 1.报错信息 org.apache.poi.xwpf.converter.core.XWPFConverterException: java.lang.NullPointerExceptionat org.apache.poi.xwpf.converter.xhtml.XHTMLConverter.convert(XHTMLConverter.java:77)at org.apache.poi.xwpf.converter.xhtml.XHTMLConverter.doConve…...
教育科技质检的三重挑战 质检LIMS系统在教育技术研发的应用
在教育技术研发领域,实验室作为产品验证的核心环节,其质检效率与数据安全性直接关乎企业的创新竞争力。LIMS(实验室信息管理系统)作为贯穿检测全流程的数字化中枢,正在成为教育科技企业的"质量守护者"。本文…...
MySQL最左前缀原则深度解析:优化索引设计的核心法则
一、什么是最左前缀原则? 最左前缀原则(Leftmost Prefix Principle) 指在使用复合索引(Composite Index)时,MySQL会按照索引定义的列顺序,从左到右匹配查询条件。只有连续且从最左侧开始的列组…...
多模态大语言模型arxiv论文略读(三十五)
On the Out-Of-Distribution Generalization of Multimodal Large Language Models ➡️ 论文标题:On the Out-Of-Distribution Generalization of Multimodal Large Language Models ➡️ 论文作者:Xingxuan Zhang, Jiansheng Li, Wenjing Chu, Junjia…...