前端学习 之 JavaScript 之 JSON
一.JSON的简介
1.什么是JSON
JSON 英文全称 JavaScript Object Notation
JSON 是一种轻量级的数据交换格式。
JSON是独立的语言 *
JSON 易于理解。
2.json的起源
在JSON出现之前,大家一直用XML来传递数据。因为XML是一种纯文本格式,所以它适合在网络上交换数据。XML本身不算复杂,但是,加上DTD、XSD、XPath、XSLT等一大堆复杂的规范以后,任何正常的软件开发人员碰到XML都会感觉头大了,最后大家发现,即使你努力钻研几个月,也未必搞得清楚XML的规范。
终于,在2002年的一天,道格拉斯·克罗克福特(Douglas Crockford)同学为了拯救深陷水深火热同时又被某几个巨型软件企业长期愚弄的软件工程师,发明了JSON这种超轻量级的数据交换格式。
道格拉斯同学长期担任雅虎的高级架构师,自然钟情于JavaScript。他设计的JSON实际上是JavaScript的一个子集。
3.json的数据类型及表示
number:和JavaScript的number完全一致;
boolean:就是JavaScript的true或false;
string:就是JavaScript的string;
null:就是JavaScript的null;
array:就是JavaScript的Array表示方式——[];
object:就是JavaScript的{ ... }表示方式。
以及上面的任意组合。
并且,JSON还定死了字符集必须是UTF-8,表示多语言就没有问题了。为了统一解析,JSON的字符串规定必须用双引号"",Object的键也必须用双引号""。
由于JSON非常简单,很快就风靡Web世界,并且成为ECMA标准。几乎所有编程语言都有解析JSON的库,而在JavaScript中,我们可以直接使用JSON,因为JavaScript内置了JSON的解析。
把任何JavaScript对象变成JSON,就是把这个对象序列化成一个JSON格式的字符串,这样才能够通过网络传递给其他计算机。
如果我们收到一个JSON格式的字符串,只需要把它反序列化成一个JavaScript对象,就可以在JavaScript中直接使用这个对象了。
(1)JSON 数字
JSON 数字可以是整型或者浮点型:
{ "age":30 }
(2)JSON 布尔值
JSON 布尔值可以是 true 或者 false:
{ "flag":true }
(3)JSON string
JSON的数据可以是字符串类型
{ "name":"hsz" }
(4)JSON null
JSON 可以设置 null 值:
{ "sex":null }
(5)JSON 数组
JSON 数组在中括号中书写:
数组可包含多个对象:
var JSONArray= { "personinfo":[
{"name":"hsz",}
{"age": 25, }
{"slogan":"学就是了!"}
]
};
(6)JSON 对象
JSON 对象在大括号({})中书写:
对象可以包含多个名称/值对:(类似于python的字典)
{ "name":"hsz" , "url":"https://home.cnblogs.com/u/hszstudypy/" }
二.JOSN 对象 与JSON 数组介绍
1.JSON对象
(1)对象语法
{ "name":"hsz", "alexa":10000, "site":null }
JSON 对象使用在大括号({})中书写。
对象可以包含多个 key/value(键/值)对。
key 必须是字符串,value 可以是合法的 JSON 数据类型(字符串, 数字, 对象, 数组, 布尔值或 null)。
key 和 value 中使用冒号(:)分割。
每个 key/value 对使用逗号(,)分割。
(2)访问对象值
你可以使用点号(.)来访问对象的值:
例:
<body>
<p>你可以使用点号(.)来访问 JSON 对象的值:</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = { "name":"hsz", "alexa":10000, "site":"www.hsz.com" };
x = myObj.site;
document.getElementById("demo").innerHTML = x;
</script>
</body>
(3)嵌套 JSON 对象
例:
<body>
<p>访问 JSON 内嵌对象。</p>
<p id="demo"></p>
<script>
myObj = {
"name":"hsz",
"alexa":10000,
"sites": {
"site1":"www.hsz.com",
"site2":"one.hsz.com",
"site3":"two.hsz.com"
}
}
document.getElementById("demo").innerHTML += myObj.sites.site2 + "<br>";
// 或者
document.getElementById("demo").innerHTML += myObj.sites["site2"];
</script>
</body>
(4)修改值
你可以使用点号(.)来修改 JSON 对象的值:
<body>
<p>修改 JSON 对象的值。</p>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"hsz",
"alexa":10000,
"sites": {
"site1":"www.hsz.com",
"site2":"one.hsz.com",
"site3":"two.hsz.com"
}
}
document.getElementById("demo").innerHTML += myObj.sites["site2"];
myObj.sites.site1 = "www.google.com";
for (i in myObj.sites) {
x += myObj.sites[i] + "<br>";
}
document.getElementById("demo1").innerHTML = myObj.name;
document.getElementById("demo2").innerHTML = myObj.sites.site1;
</script>
</body>
(5)删除 JSON 对象的属性
我们可以使用 delete 关键字来删除 JSON 对象的属性:
delete myObj.sites.site1;
或
delete myObj.sites["site1"]
例:
<body>
<p>删除 JSON 对象属性。</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"hsz",
"alexa":10000,
"sites": {
"site1":"www.hsz.com",
"site2":"one.hsz.com",
"site3":"two.hsz.com"
}
}
delete myObj.sites.site1;
for (i in myObj.sites) {
x += myObj.sites[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
(6)JavaScript 创建 JSON 对象
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h2>JavaScript 创建 JSON 对象</h2>
<p>
网站名称: <span id="jname"></span><br />
网站地址: <span id="jurl"></span><br />
网站 slogan: <span id="jslogan"></span><br />
</p>
<script>
var JSONObject= {
"name":"hsz",
"url":"https://home.cnblogs.com/u/hszstudypy/",
"slogan":"学就是了!"
};
document.getElementById("jname").innerHTML=JSONObject.name
document.getElementById("jurl").innerHTML=JSONObject.url
document.getElementById("jslogan").innerHTML=JSONObject.slogan
</script>
</body>
</html>
2.JSON 数组
(1)数组作为 JSON 对象
[ "Google", "baidu", "taobao" ]
JSON 数组在中括号中书写。
JSON 中数组值必须是合法的 JSON 数据类型(字符串, 数字, 对象, 数组, 布尔值或 null)。
JavaScript 中,数组值可以是以上的 JSON 数据类型,也可以是 JavaScript 的表达式,包括函数,日期,及 undefined。
(2)JSON 对象中的数组
对象属性的值可以是一个数组:
var myObj
myObj = {
"person":"人",
"num":3,
"name":[ "zero", "one", "two" ]
}
我们可以使用索引值来访问数组:
myObj.sites[1]
// 值为one
(3)循环数组
你可以使用 for-in 来访问数组:
例:
<body>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"person":"人",
"num":3,
"name":[ "zero", "one", "two" ]
};
for (i in myObj.name) {
x += myObj.name[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
(4)嵌套 JSON 对象中的数组
JSON 对象中数组可以包含另外一个数组,或者另外一个 JSON 对象:
例:
<body>
<p id="demo"></p>
<script>
var myObj, i, j, x = "";
myObj = {
"name":"个人数据",
"num":3,
"person": [
{ "name":"one", "info":[ 24, "男", "翻译官" ] },
{ "name":"two", "info":[ 20, "女", "学生" ] },
{ "name":"three", "info":[ 25, "男" ] }
]
}
document.getElementById("demo").innerHTML = myObj.person[0].info[2];
</script>
(5)修改数组值
你可以使用索引值来修改数组值:
例:
将(4)中的:
document.getElementById("demo").innerHTML = myObj.person[0].info[2];
改为:
myObj.person[0].info[2] = "软件开发工程师"
document.getElementById("demo").innerHTML = myObj.person[0].info;
(运行后可以知道,职业被修改了)
(6)删除数组元素
我们可以使用 delete 关键字来删除数组元素:
将(4)中的:
document.getElementById("demo").innerHTML = myObj.person[0].info[2];
改为:
delete myObj.person[0].info[1];
document.getElementById("demo").innerHTML = myObj.person[0].info;
(运行后可以知道,性别参数被删除)
三.JSON 序列化与返序列化
1.序列化 JSON.stringify(序列化数据);
JSON 通常用于与服务端交换数据。
在向服务器发送数据时一般是字符串。
我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
例:
var xiaoming = {
name: '小明',
age: 14,
gender: true,
height: 1.65,
grade: null,
'middle-school': '\"W3C\" Middle School',
skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};
var s = JSON.stringify(xiaoming);
console.log(s);
输出结果为:
{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}
注意这个结果的类型是字符串。
2.反序列化 JSON.parse(反序列化数据);
拿到一个JSON格式的字符串,我们直接用JSON.parse()把它变成一个JavaScript对象:
JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45
JSON.parse()还可以接收一个函数,用来转换解析出的属性:
例:
var obj = JSON.parse('{"name":"小明","age":14}', function (key, value) {
if (key === 'name') {
return value + '同学';
}
return value;
});
console.log(JSON.stringify(obj)); // {name: '小明同学', age: 14}
转载于:https://www.cnblogs.com/hszstudypy/p/11171677.html
前端学习 之 JavaScript 之 JSON相关推荐
- 零基础web前端学习之JavaScript 和css 阻塞
web前端学习之JavaScript 和css 阻塞,JavaScript 是客户端和服务器端的脚本语言,可以插入HTML 页函中, 并且是目前较热门的Web 开发语言.同时, JavaScript ...
- 前端学习记录 —— JavaScript(一)
前端学习记录 -- JavaScript(一) 前言 一.初识 JavaScript JavaScript 的特点 JavaScript的作用 编程语言与标记语言的区别 HTML/CSS/JS 的关系 ...
- 前端学习之——js解析json数组
** 前端学习之--js解析json数组 ** 解析json数组即对JSONArray的遍历 一.对于标准的json数组如: var result=[{"flag":1," ...
- 前端学习 之 JavaScript基础
一. JavaScript简介 1. JavaScript的历史背景介绍 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时 ...
- 前端学习笔记——JavaScript进阶
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.JavaScript 面向对象 1. 面向对象编程介绍 1.1 两大编程思想 1.2 面向过程编程 1.3 面向对 ...
- 重学前端-学习笔记-JavaScript对象
说明 重学前端是程劭非(winter)在极客时间开的一个专栏,在此主要整理我的学习笔记.如有侵权,请联系我,谢谢. javascript对象特征 对象具有唯一标识性:完全相同的两个对象,也不是同一个对 ...
- 前端学习,JavaScript实战总结
文章目录 声明JavaScript变量 JavaScript 使用=为变量赋值 JavaScript 使用=为变量赋初始值 理解JavaScript未定义变量 理解JavaScript变量的大小写敏感 ...
- 前端学习之JavaScript学习-2021-09-2029
JavaScript学习 1.什么是JavaScript 1.1.概述 Javascript是一门世界上最流行的脚本语言 一个合格的后端人员,必须要精通JavaScript 1.2.历史 JavaSc ...
- Web前端学习笔记——JavaScript之数组、函数、作用域
数组 为什么要学习数组 之前学习的数据类型,只能存储一个值(比如:Number/String.我们想存储班级中所有学生的姓名,此时该如何存储? 数组的概念 所谓数组,就是将多个元素(通常是同一类型)按 ...
最新文章
- USACO Section 1.5 Checker Challenge
- c实现的trim函数
- mysql和Oracle 备份表
- jvm调优:能生成的线程数
- android+清除循环动画,android - 如何使用ViewPropertyAnimator生成循环动画?
- 上师大计算机学院分数线,分数低还想上师范大学?这4所师范院校,二本的分数就够了...
- nuxt 服务器构建因太耗CPU进程被杀解决办法
- 如何理解操作系统的不确定性_温度最低-273度,最高却能有1.4亿亿亿亿度,如何定义的?...
- 【VB.NET】VB.NET基本语法常见问题的解答
- 提取MapInfo地图数据中的空间数据解决方案
- AI人工智能仿写在线v.1.2.3
- 【BZOJ2281】【博弈论+DP】 [Sdoi2011]黑白棋
- “无法移动文件 无法读源文件或磁盘”解决方法
- VS2012 正式版BUG太多
- STM32F1系列简单介绍及入门学习
- 小米——系统升级失败,不断重启解决+刷xposed(lsposed)+刷recovery+刷magisk
- 焦点较中的网络视频相关
- 美国弗吉尼亚大学计算机科学,弗吉尼亚大学计算机科学专业
- 线代9讲_特征值与特征向量相似理论
- 可以设置时间的计时器
热门文章
- 第二课:css选择器选择器优先级及css3新增选择器(系统解析)
- Java数据结构与算法——线性查找 二分查找 插值查找
- xp未受用户在此计算机登录,XP系统无线网络连接受限制或无连接的解决办法
- Android 各个版本获取IMEI、MEID
- github创建仓库,Idea上传自己的项目到新创建的仓库中
- php模拟炒股网站源码,stock 模 拟 炒 股 网 站 源 码(WEB版) WEB(ASP,PHP,...) 251万源代码下载- www.pudn.com...
- 如何恢复被永久删除的Outlook邮件
- 2021年10月TIOBE排行 榜首 Python yyds
- python实现测试android应用冷启动
- 嵌套相对比较通俗的解释(网页百度内容,非原创)