【Java 进阶篇】JavaScript JSON 语法入门:轻松理解数据的序列化和反序列化

在这里插入图片描述

嗨,亲爱的小白们!欢迎来到这篇关于 JavaScript 中 JSON(JavaScript Object Notation)语法的入门指南。JSON 是一种轻量级的数据交换格式,广泛应用于前端开发中。通过这篇博客,我将带你深入了解 JSON 的语法,以及如何在 JavaScript 中使用它来实现数据的序列化和反序列化。让我们一起踏上这段有趣的学习之旅吧!

JSON 是什么?

JSON,即 JavaScript Object Notation,是一种用于在不同语言之间交换数据的轻量级数据格式。它以易于阅读和编写的文本形式表示数据对象,同时也易于机器解析和生成。在 JavaScript 中,JSON 通常用于在浏览器和服务器之间传输数据。

JSON 数据是一个键值对的集合,其中键(属性名)和值之间使用冒号分隔,不同的键值对使用逗号分隔。整个 JSON 数据包含在花括号 {} 中,表示一个对象。数组在 JSON 中用中括号 [] 表示,其中的元素可以是任何有效的 JSON 数据。

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

{"name": "John Doe","age": 30,"city": "New York","skills": ["JavaScript", "HTML", "CSS"]
}

在这个例子中,我们有一个包含个人信息的 JSON 对象,其中包括姓名、年龄、城市和技能数组。

JSON 的语法规则

对象(Object)

JSON 对象由一组键值对组成,键和值之间使用冒号 : 分隔,不同的键值对使用逗号 , 分隔。整个对象使用花括号 {} 包裹。

{"key1": "value1","key2": "value2","key3": "value3"
}

数组(Array)

JSON 数组由一组值组成,值之间使用逗号 , 分隔,整个数组使用中括号 [] 包裹。

["value1", "value2", "value3"]

字符串(String)

JSON 字符串是由双引号 " 包裹的文本。

"Hello, JSON!"

数字(Number)

JSON 数字表示整数或浮点数。

42
3.14

布尔值(Boolean)

JSON 布尔值表示真或假。

true
false

空值(Null)

JSON 空值表示为 null

null

在 JavaScript 中使用 JSON

现在我们已经了解了 JSON 的基本语法,让我们看看如何在 JavaScript 中使用 JSON 进行数据的序列化和反序列化。

数据序列化(JSON.stringify)

在 JavaScript 中,可以使用 JSON.stringify() 方法将对象转换为 JSON 格式的字符串。这是一个简单的例子:

const person = {name: "John Doe",age: 30,city: "New York",skills: ["JavaScript", "HTML", "CSS"]
};const jsonString = JSON.stringify(person);console.log(jsonString);

上面的代码将 person 对象转换为 JSON 字符串,并输出结果:

{"name":"John Doe","age":30,"city":"New York","skills":["JavaScript","HTML","CSS"]}

数据反序列化(JSON.parse)

相反地,可以使用 JSON.parse() 方法将 JSON 字符串转换回 JavaScript 对象。以下是一个例子:

const jsonString = '{"name":"John Doe","age":30,"city":"New York","skills":["JavaScript","HTML","CSS"]}';const person = JSON.parse(jsonString);console.log(person);

这段代码将 JSON 字符串转换为 JavaScript 对象,并输出结果:

{name: "John Doe",age: 30,city: "New York",skills: ["JavaScript", "HTML", "CSS"]
}

JSON 的应用场景

JSON 在前端开发中有着广泛的应用,常见的应用场景包括:

  • 与服务器通信: 在网络请求中,常用 JSON 格式传输数据。
  • 存储配置信息: 许多应用程序使用 JSON 格式来存储和读取配置信息。
  • 本地存储: 在客户端,可以使用 JSON 来存储和读取本地数据。

小结

通过这篇博客,你应该对 JSON 的基本语法以及在 JavaScript 中的应用有了更深入的了解。JSON 提供了一种简洁而强大的方式来表示和交换数据,使得前端开发更加灵活和高效。希望这篇文章能够帮助你更好地掌握 JSON,从而更自信地处理数据在前端的应用。继续加油学习,同学们!

作者信息

作者 : 繁依Fanyi
CSDN: https://techfanyi.blog.csdn.net
掘金:https://juejin.cn/user/4154386571867191

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

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

相关文章

Redis从入门到精通(二)- 入门篇

文章目录 0. 前言1. 入门篇[【入门篇】1.1 redis 基础数据类型详解和示例](https://icepip.blog.csdn.net/article/details/134438573)[【入门篇】1.2 Redis 客户端之 Jedis 详解和示例](https://icepip.blog.csdn.net/article/details/134440061)[【入门篇】1.3 redis客户端之…

ubuntu linux C/C++环境搭建

目录 前言 1.1 vim安装与配置 ​编辑 1.2 vim配置 1.3 gcc g编译器的安装 与gdb调试器的安装 1.4 写个C/C程序测试一下 1.6 vscode安装 1.7 vscode插件下载​编辑 前言 在开始C之前,我们需要搭建好C的开发环境,我这里使用的操作系统是ubuntu Linux&a…

键盘映射笔记

dumpkeys命令用于显示当前系统中定义的键盘映射表。它可以帮助用户查看和理解系统中的键盘布局和键盘映射规则。 当用户执行dumpkeys命令时,它会读取系统中的键盘映射表文件(通常是/etc/keymaps或/etc/console/boottime.kmap.gz),…

利用SVD对图像进行压缩

利用SVD对图像进行压缩 使用SVD能够对数据进行降维,对图像进行SVD,降维之后然后重构数据,还原后的图像就是压缩后的图像。 SVD SVD进行图像压缩所依据的数学原理就是矩阵的近似表示: A m n ≈ U m k ∑ k k V k n T A_{m\…

git修改commit历史提交时间、作者

1、修改最近的几条记录,进入提交记录列表,修改提交记录模式 git rebase -i HEAD~3 // 修改最近的三条记录,顺序排列按提交时间升序 指令说明: pick:保留该commit(缩写:p) reword&#xff1a…

苍穹外卖—解决前端时间属性显示问题

项目场景: 点击员工管理 出现显示时间属性问题 输入员工姓名为zhangsan 现实的时间属性是数组类型 问题描述 提示:这里描述项目中遇到的问题: 例如:数据传输过程中数据不时出现丢失的情况,偶尔会丢失一部分数据 APP …

AD从原理图到PCB超详细教程

AD超详细教程 前言一、建立一个工程模板二、原理图1.设计原理图。2.使用AD自带库和网上开源原理图库3.画原理图库4.编译原理图 三、PCB1.确定元器件尺寸大小2.绘制PCB Library①使用元器件向导绘制元件库②原理图与PCB的映射 3.绘制PCB①更新PCB②调整元件位置③布线④漏线检查…

Git 远程仓库(Github)

目录 添加远程库 查看当前的远程库 提取远程仓库 推送到远程仓库 删除远程仓库 Git 并不像 SVN 那样有个中心服务器。 目前我们使用到的 Git 命令都是在本地执行,如果你想通过 Git 分享你的代码或者与其他开发人员合作。 你就需要将数据放到一台其他开发人员…

OSG文字-各种文字效果(边框、阴影及颜色倾斜)示例(2)

各种文字效果(边框、阴影及颜色倾斜)示例 各种文字效果(边框、阴影及颜色倾斜)示例的代码如程序清单9-2所示&#xff1a; 1. /* 各种文字效果(边框、阴影及颜色倾斜)示例 */ 2. osg::ref_ptr<osg::Camera> createAllKindText(const string &strDataFolder) 3. {…

问题 R: 胜利大逃亡(HUST)

#include <deque> #define inf 200000 #include<iostream> #include<queue> using namespace std;// 迷宫坐标 int map[59][59][59] { 0 };// 可访问标记 int visit[51][51][51] { 0 }; // 移动方式 int next1[7][4] { {1,0,0},{-1,0,0}, {0,1,0},{0,-1,…

mysql主从搭建(docker)

一、主从概述 MySQL主从又叫Replication、AB复制。简单讲就是A与B两台机器做主从后&#xff0c;在A上写数据&#xff0c;另外一台B也会跟着写数据&#xff0c;实现数据实时同步。有这样几个关键点&#xff1a; 1&#xff09;MySQL主从是基于binlog&#xff0c;主上需开启binl…

Altium Designer学习笔记6

原理图库的制作&#xff0c;SMA元件的制作&#xff1a; 图形不是很重要&#xff0c;重要的是管脚的功能。 Design Item ID和Designator两个值是要注意的。 进行Place放置&#xff0c;切换到原理图工作区&#xff0c;测试下功能。 AD9851元件库制作&#xff1a; 不需要再新建原…

IDEA中更换java项目JDK

我们打开IDEA 打开项目 然后选择 File 下的 Project Structure 这里 我们下拉选择自己需要的JDK Sources这里 也要设置一下JDK对应版本 然后 上面这个 Project 中 也要设置一下对应jdk的版本 保持一直 然后 我们打开 File 下的 Settings 然后 找到如下图配置 如果JKD版本看…

企业app软件定制开发的重点是什么?|小程序网站搭建

企业app软件定制开发的重点是什么&#xff1f;|小程序网站搭建 在当今数字化时代&#xff0c;企业对于信息技术的依赖越来越大。为了适应市场需求并提高内部运营效率&#xff0c;许多企业开始寻求定制开发企业app软件。这种定制开发可以根据企业的具体需求和业务流程进行个性化…

基于像素特征的kmeas聚类的图像分割方案

kmeans聚类代码 将像素进行聚类&#xff0c;得到每个像素的聚类标签&#xff0c;默认聚类簇数为3 def seg_kmeans(img,clusters3):img_flatimg.reshape((-1,3))# print(img_flat.shape)img_flatnp.float32(img_flat)criteria(cv.TERM_CRITERIA_MAX_ITERcv.TERM_CRITERIA_EPS,2…

IonQ、Rigetti、D-Wave公布2023年第三季度财报!

近期&#xff0c;量子计算公司Rigetti、IonQ和D-Wave均公布了各自在2023年第三季度的盈利收益。 这三家公司在近期均实现了收入增长&#xff0c;并助力客户实现相应的业务增长。然而&#xff0c;在追求实现量子霸权和超越经典硅基计算机系统的同时&#xff0c;这些公司仍面临着…

平民如何体验一把大模型知识库

背景 随着openai发布的chatgpt,各界掀起大模型热. 微软、谷歌、百度、阿里等大厂纷纷拥抱人工智能, 表示人工智能将是下一个风口.确实, chatgpt的表现确实出乎大部分的意料之外,网上也不断流传出来,chatgpt未来会替换很多白领.作为一名普通的程序员,觉得非常有必要随波逐流一下…

概念解析 | 网络安全数字孪生(Digital Twin of Cyber Security, DTCS)技术

注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:网络安全数字孪生。 概念解析 | 网络安全的“数字镜像” —— 网络安全数字孪生 1. 背景介绍 随着数字化转型进程的深入推进,网络空间安全问题日益凸显。当前的网络安全防护面…

城市易涝点怎么安装万宾科技内涝积水监测仪?

城市内涝是多个城市广泛存在的问题&#xff0c;经常给城市的居民和基础设施带来一些安全威胁。暴雨引发的道路积水和交通中断、财产损失&#xff0c;甚至公共安全威胁都是城市管理者需要提前预防的问题。为了解决这些问题&#xff0c;内涝积水监测仪的应用是一大重要的举措&…