JavaScript笔记 JSON详解

JSON叫做JavaScript Object Notation， JavaScript对象表示法。由JS大牛Douglas发明。
JSON 是存储和交换文本信息的语法，类似 XML。
JSON 比 XML 更小、更快，更易解析。

JSON与 XML 异同之处

相同之处

• JSON 是纯文本
• JSON 具有"自我描述性"（人类可读）
• JSON 具有层级结构（值中存在值）
• JSON 可通过 JavaScript 进行解析
• JSON 数据可使用 AJAX 进行传输

不同之处

• 没有结束标签
• 更短
• 读写的速度更快
• 能够使用内建的 JavaScript eval() 方法进行解析
• 使用数组
• 不使用保留字

JSON语法

JSON 语法规则
JSON 语法是 JavaScript 对象表示语法的子集。

• 数据在名称/值对中
• 数据由逗号分隔
• 大括号 {} 保存对象
• 中括号 [] 保存数组，数组可以包含多个对象
  JSON 数据的书写格式是：。

	key : value

名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：

"name" : "林江涛"

这很容易理解，等价于这条 JavaScript 语句：

name = "菜鸟教程"

JSON与对象实例示例

	//对象
	var obj={
    
    
		name:"ret",
		age:18,
		sex:"男"
	}
	//JSON
	var jon={
    
    
			"name":"ret",
			"age":18,
			"sex":"男"
	}

JSON 值

JSON 值可以是：

-数字（整数或浮点数）
-字符串（在双引号中）
-逻辑值（true 或 false）
-数组（在中括号中）
-对象（在大括号中）
-null

JSON数字

JSON 数字可以是整型或者浮点型：
示例

	var jon={
    
    
		"age":30,
		"height":18.5
	}
	console.log(jon.age);
	console.log(jon.height);

JSON对象

JSON对象语法

• JSON 对象在大括号 {} 中书写：
• 对象可以包含多个 key/value（键/值）对。
• key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
• key 和 value 中使用冒号(:)分割。
• 每个 key/value 对使用逗号(,)分割。

语法:{key1 : value1, key2 : value2, … keyN : valueN }

对象可以包含多个名称/值对：

{
    
     "name":"林江涛" , "sex":"男" }

这一点也容易理解，与这条 JavaScript 语句等价：

name = "林江涛",
sex= "男"

访问对象值

可以使用点号（.）来访问对象的值：也可以使用中括号（[]）来访问对象的值：

示例

	var jon={
    
    
		"name":"林江涛" , 
		"sex":"男",
		"kungfu":mykungfu,
		"无线影分身术":this
	}
	function mykungfu(){
    
    
		console.log("发射了一枚飞镖");
	}
	console.log(jon.name);
	console.log(jon["sex"])

---

==注意== json 在进行通过键名来获取值时，需要特别注意一下。 把键名赋值给另外一个变量，然后通过.方式去获取值。这种方式是行不通的。

	var my, x;
		my = {
    
     "name":"林江涛", "年龄":10000, "性别":null };
	x = "name";
	console.log(my.x) // 结果是 undefined

只能通过 [] 方式去访问:

	var my, x;
	my = {
    
     "name":"林江涛", "年龄":10000, "性别":null };
	x = "name";
	console.log(my[x]) // 结果是 林江涛

---

### 循环对象 以使用 for-in 来循环对象的属性： 示例

	var jon={
    
    
		"name":"林江涛" , 
		"sex":"男",
		"kungfu":mykungfu,
		"无线影分身术":this
	}
	function mykungfu(){
    
    
		console.log("发射了一枚飞镖");
	}
	for(x in jon){
    
    
		console.log(jon[x]);
	}

JSON对象的新增,修改,删除

JSON新增

	var	my = {
    
     "name":"林江涛", "年龄":10000, "性别":null };
	my.我是新增的="哈哈哈哈";
	console.log(my);

JSON修改

示例

	var	my = {
    
     "name":"林江涛", "年龄":10000, "性别":null };
	my.name="天王老子";
	console.log(my);

效果

JSON删除

示例

	var	my = {
    
     "name":"林江涛", "年龄":10000, "性别":null };
	delete	my.name
	console.log(my);

效果

偷个懒

其实对象就已经包含的其他所有的了因为对象是所有引用类型的基类
所以null 和bool什么的就不一一列举了
如下,包含JSON和function

JSON 数组

JSON 数组在中括号 [] 中书写：

数组可包含多个对象：
语法

[
{ key1 : value1-1 , key2:value1-2 },
{ key1 : value2-1 , key2:value2-2 },
{ key1 : value3-1 , key2:value3-2 },
…
{ keyN : valueN-1 , keyN:valueN-2 }
]

示例

	var 我={
    
    
		"师门":[
				{
    
    "关系":"师傅","年纪":40,"身高":175},
				{
    
    "关系":"徒弟","年纪":10,"身高":260},
				{
    
    "关系":"小徒弟","年纪":3,"身高":170}
		],
		"name":"林江涛",
		"age":100
	}
	console.log(我);

因为 JSON 使用 JavaScript 语法所以我们可以象访问数组一样访问里面的数据

	console.log(我.师门[0].关系)

也可以像这样修改数据：

我.师门[0].关系="老头子"

循环数组

for-in循环
代码示例

	var 我={
    
    
		"师门":[
			{
    
    "关系":"师傅","年纪":40,"身高":175},
			{
    
    "关系":"徒弟","年纪":10,"身高":260},
			{
    
    "关系":"小徒弟","年纪":3,"身高":170}
		],
		"name":"林江涛",
		"age":100
		}
	for(i in 我.师门){
    
    
		console.log(我.师门[i]);
	}

效果

也可以循环出数组里的键值对

	var 我={
    
    
		"师门":[
			{
    
    "关系":"师傅","年纪":40,"身高":175},
			{
    
    "关系":"徒弟","年纪":10,"身高":260},
			{
    
    "关系":"小徒弟","年纪":3,"身高":170}
		],
		"name":"林江涛",
		"age":100
	}
	for(i in 我.师门){
    
    
		for(j in 我.师门[i]){
    
    
			console.log(我.师门[i][j])
		}
	
	}

for循环

代码示例

	var 我={
    
    
		"师门":[
			{
    
    "关系":"师傅","年纪":40,"身高":175},
			{
    
    "关系":"徒弟","年纪":10,"身高":260},
			{
    
    "关系":"小徒弟","年纪":3,"身高":170}
		],
		"name":"林江涛",
		"age":100
	}
	
	for(i=0 ;i < 我.师门.length ; i++){
    
    
		console.log(我.师门[i])
	}

效果

但从数组中循环出来的是对象所以我们不能再使用for循环遍历里面的每一个元素了
代码示例

	var 我={
    
    
		"师门":[
			{
    
    "关系":"师傅","年纪":40,"身高":175},
			{
    
    "关系":"徒弟","年纪":10,"身高":260},
			{
    
    "关系":"小徒弟","年纪":3,"身高":170}
		],
		"name":"林江涛",
		"age":100
	}
	
	for(i=0 ;i < 我.师门.length ; i++){
    
    
		for(j=0;j<我.师门[i].length;j++){
    
    
			console.log(我.师门[i][j]);
		}
	}

效果,出错误了啥也没有

JOSN数组的新增修改删除

因为josn使用的就是JavaScript的语法,所以josn数组的新增修改和JavaScript的一模一样,
那么我这里就写一下奇奇怪怪的新增修改
新增示例

	var 我={
    
    
		"师门":[
			{
    
    "关系":"师傅","年纪":40,"身高":175},
			{
    
    "关系":"徒弟","年纪":10,"身高":260},
			{
    
    "关系":"小徒弟","年纪":3,"身高":170}
		],
		"name":"林江涛",
		"age":100
	}
	
	我.师门[我.师门.length]={
    
    "HHHH":"HHHH","我是新增的":"对的,他是新来的"};
	console.log(我)

效果示例.可以看到,师门下面多出了一个数组

修改删除同上

JSON数组中的删除

删除数值的元素，数组的大小不变，代码如下：

	var 我={
    
    
		"师门":[
			{
    
    "关系":"师傅","年纪":40,"身高":175},
			{
    
    "关系":"徒弟","年纪":10,"身高":260},
			{
    
    "关系":"小徒弟","年纪":3,"身高":170}
		],
		"name":"林江涛",
		"age":100
	}
	console.log("删除前数组长度:"+我.师门.length);
	delete 我.师门[1];
	console.log("删除后数组长度:"+我.师门.length)
	console.log("查看被删除的数组:"+我.师门[1])
	console.log("for in遍历数组")
	for(i in 我.师门){
    
    
		console.log("数组下标:"+i);
		console.log( 我.师门[i]);
	}

delete 运算符并不是彻底删除元素，而是删除它的值，但仍会保留空间。

运算符 delete 只是将该值置为 undefined，而不会影响数组长度，即将其变为稀疏数组（《JS权威指南》7.5节）

JS 中彻底删除 JSON 对象组成的数组中的元素

在 JS 中，对于某个由 JSON 对象组成的数组，例如：

	var 我={
    
    
		"师门":[
			{
    
    "关系":"师傅","年纪":40,"身高":175},
			{
    
    "关系":"徒弟","年纪":10,"身高":260},
			{
    
    "关系":"小徒弟","年纪":3,"身高":170}
		],
		"name":"林江涛",
		"age":100
	}

如果我们想要删除其中的第二个json对象，应该怎么做呢？方法和操作数组完全相同。

但在上面使用delete运算符删除数组的过程中,我们发现这种方法并不是彻底删除元素，而是删除它的值，但仍会保留空间。

查询运算符 delete 我们知道它只是将该值置为 undefined，而不会影响数组长度，即将其变为稀疏数组

了解及此，也许想着可以将删除点之后的元素各往前移动1个单位，实现彻底剔除该元素，但在JS方法中我们可以查到一种更加简便的方式：splice() 方法

	var 我={
    
    
		"师门":[
			{
    
    "关系":"师傅","年纪":40,"身高":175},
			{
    
    "关系":"徒弟","年纪":10,"身高":260},
			{
    
    "关系":"小徒弟","年纪":3,"身高":170}
		],
		"name":"林江涛",
		"age":100
	}
	console.log("删除前数组长度:"+我.师门.length);
	delete 我.师门.splice(1,1);
	console.log("删除后数组长度:"+我.师门.length)
	console.log("查看被删除的数组:"+我.师门[1])
	console.log("for in遍历数组")
	for(i in 我.师门){
    
    
		console.log("数组下标:"+i);
		console.log( 我.师门[i]);
	}

效果

如上图,删除后,我.师门长度为二这正是我想要的结果