新浦京81707con > 功能介绍 > 这里水很深,深入理解

原标题:这里水很深,深入理解

浏览次数:189 时间:2019-05-02

深深明白 JSON

2017/03/29 · JavaScript · 2 评论 · JSON

原稿出处: Apriltail   

大家先来看一个JS吉林中国广播集团大的JS对象系列化成JSON字符串的难点,请问,以下JS对象通过JSON.stringify后的字符串是怎样的?先不要急着复制粘贴到调节台,先自身张开二个代码编辑器恐怕纸,写写看,写完再去仔细比较你的主宰台出口,假若有误记得看完全文并评价,哈哈。

JavaScript

var friend={ firstName: 'Good', 'lastName': 'Man', 'address': undefined, 'phone': ["1234567",undefined], 'fullName': function(){ return this.firstName ' ' this.lastName; } }; JSON.stringify(friend);//那1行再次回到什么吧?

1
2
3
4
5
6
7
8
9
10
11
var friend={  
    firstName: 'Good',
    'lastName': 'Man',
    'address': undefined,
    'phone': ["1234567",undefined],
    'fullName': function(){
        return this.firstName ' ' this.lastName;
    }
};
 
JSON.stringify(friend);//这一行返回什么呢?

第三个难题,借使作者想在终极JSON字符串将以此’friend’的姓名全体成为大写字母,也正是把”Good”造成”GOOD”,把”Man”变成”MAN”,那么能够怎么办?

基于以上八个难题,大家再追本溯源问一下,JSON究竟是怎么东西?为啥JSON正是轻易数据交流?JSON和JS对象的区分?JS中JSON.parseJSON.stringify和不常见的toJSON,这些函数的参数和拍卖细节到底是什么样的?

招待进入此次“深挖JSON之旅”,下文将从以下多少个方面去领略JSON:

  • 率先是对“JSON是1种轻量的数据沟通格式”的精晓;
  • 下一场来看平日被混为1谈的JSON和JS对象的差异;
  • 最后大家再来看JS中那多少个JSON相关函数具体的施行细节。

仰望全文能让如以前的本身同样对JSON以蠡测海的亲能说清楚JSON是怎么,也能游刃有余应用JSON,不看调控台就知晓JS对象系列化成JSON字符串后输出是什么。

咱俩先来看1个JS中常见的JS对象类别化成JSON字符串的标题,请问,以下JS对象通过JSON.stringify后的字符串是何等的?先不要急着复制粘贴到调整台,先本身张开一个代码编辑器也许纸,写写看,写完再去仔细相比你的主宰台出口,要是有误记得看完全文并评价,哈哈。

转发网站:

一、JSON是壹种格式,基于文本,优于轻量,用于调换数据

假设未有去过JSON的合法介绍能够去一下那边,官方介绍第2、2段已经很通晓地球表面述了JSON是何等,笔者将JSON是何许提炼成以下多少个方面:

var friend={
    firstName: 'Good',
    'lastName': 'Man',
    'address': undefined,
    'phone': ["1234567",undefined],
    'fullName': function(){
        return this.firstName   ' '   this.lastName;
    }
};

JSON.stringify(friend);//这一行返回什么呢?

 

1. 一种多少格式

怎样是格式?正是职业你的数额要怎么表示,举个栗子,有私人住房叫“贰百陆”,身高“160cm”,体重“60kg”,以往你要将这厮的这一个音讯传给外人照旧其他什么东西,你有很二种挑选:

  • 姓名“二百六”,身高“160cm”,体重“60kg”
  • name="二百六"&height="160cm"&weight="60kg"
  • 二百六16060
  • {"name":"二百六","height":160,"weight":60}
  • … …

上述全体选拔,传递的数据是千篇壹律的,不过你可以观望方式是能够美妙绝伦的,那正是各种不一致格式化后的数目,JSON是内部一种表示方法。

第贰个难题,要是本身想在最后JSON字符串将以此'friend'的全名全部成为大写字母,相当于把"Good"形成"GOOD",把"Man"形成"MAN",那么能够如何做?

咱俩先来看1个JS中常见的JS对象体系化成JSON字符串的主题材料。

二. 遵照文本的数码格式

JSON是依据文本的数据格式,相对于依靠2进制的数量,所以JSON在传递的时候是传递符合JSON那种格式(至于JSON的格式是如何大家第壹片段再说)的字符串,大家常会称呼“JSON字符串”。

基于以上几个难题,大家再追本溯源问一下,JSON终归是如陈菲西?为啥JSON就是轻松数据交流?JSON和JS对象的区分?JS中JSON.parseJSON.stringify和不布满的toJSON,那多少个函数的参数和拍卖细节到底是何许的?

请问:以下JS对象通过JSON.stringify后的字符串是哪些的?

三. 轻量级的数据格式

在JSON在此以前,有贰个数据格式叫xml,今后依旧相近在用,可是JSON特别轻量,如xml供给采用大多标签,像上边的事例中,你能够明显看出xml格式的多寡中标签笔者侵吞了重重上空,而JSON相比较轻量,即一律数量,以JSON的格式占领的带宽越来越小,这在有恢宏数目请求和传递的情况下是有引人注目优势的。

接待进入这一次“深挖JSON之旅”,下文将从以下多少个地点去掌握JSON:

(先不要急着复制粘贴到调节台,先自身打开多个代码编辑器大概纸,写写看,写完再去仔细相比你的决定台出口,若是有误记得看完全文并评价,哈哈。)

四. 被大面积地用于数据调换

轻量已经是四个用来数据互换的优势了,但更首要的JSON是便于阅读、编写和机具解析的,即这几个JSON对人和机器都以温馨的,而且又轻,独立于言语(因为是基于文本的),所以JSON被普及用于数据交流。

先前端JS实行ajax的POST请求为例,后端PHP管理请求为例:

  1. 前者构造三个JS对象,用于包装要传递的数据,然后将JS对象转化为JSON字符串,再发送请求到后端;
  2. 后端PHP接收到这些JSON字符串,将JSON字符串转化为PHP对象,然后管理请求。

能够看出,同样的数码在那边有三种不一致的表现格局,分别是前者的JS对象、传输的JSON字符串、后端的PHP对象,JS对象和PHP对象分明不是2个东西,不过出于大家用的都是JSON来传递数据,大家都能理解那种数量格式,都能把JSON这种多少格式很轻巧地转车为投机能知晓的数据结构,那就便于啊,在其余各样语言景况中交换数据都是那般。

  • 率先是对“JSON是一种轻量的数据交换格式”的明亮;

  • 下一场来看平时被混为壹谈的JSON和JS对象的分别;

  • 最后大家再来看JS中这么些JSON相关函数具体的实行细节。

图片 1

2、JSON和JS对象时期的“八卦”

众多时候都听见“JSON是JS的贰个子集”那句话,而且那句话作者早已也一贯那样认为,种种符合JSON格式的字符串你分析成js都是足以的,直到后来意识了二个奇离奇怪的东西…

可望全文能让如以前的自个儿同1对JSON窥豹一斑的亲能说清楚JSON是什么样,也能十分熟练使用JSON,不看调节台就了然JS对象连串化成JSON字符串后输出是甚。

其次个难题,即使本身想在结尾JSON字符串将那些'friend'的全名全部造成大写字母,约等于把"Good"变成"GOOD",把"Man"产生"MAN",那么能够怎么做?

一. 八个精神不相同的事物怎么那么精心

JSON和JS对象本质上完全不是同3个东西,就像是“斑马线”和“斑马”,“斑马线”基于“斑马”身上的条纹来显现和命名,不过斑马是活的,斑马线是非生物。

1致,”JSON”全名”JavaScript Object Notation”,所以它的格式(语法)是依赖JS的,但它正是壹种格式,而JS对象是一个实例,是存在于内存的1个事物。

说句玩笑话,借使JSON是基于PHP的,也许就叫PON了,格局大概就是那般的了['propertyOne' => 'foo', 'propertyTwo' => 42,],如若如此,那么JSON恐怕以往是和PHP相当的细致了。

别的,JSON是能够传输的,因为它是文本格式,可是JS对象是无法传输的,在语法上,JSON也会进一步严刻,可是JS对象就很松了。

那便是说三个不等的事物怎么那么精心,因为JSON毕竟是从JS中国对外演出公司变出来的,语法周边。

1、JSON是一种格式,基于文本,优于轻量,用于沟通数据

若是未有去过JSON的合法介绍能够去一下这里,官方介绍第二、贰段已经很明亮地发挥了JSON是怎样,小编将JSON是如何提炼成以下多少个地点:

基于以上五个难点,大家再追本溯源问一下:

二. JSON格式别JS对象语法表现上严峻在哪

先就以“键值对为展现的靶子”格局上,比较下相互的不等,至于JSON还可以够以怎么着的款型表现,比较完后再罗列。

对比内容 JSON JS对象
键名 必须是加双引号 可允许不加、加单引号、加双引号
属性值 只能是数值(10进制)、字符串(双引号)、布尔值和null,
也可以是数组或者符合JSON要求的对象,
不能是函数、NaN, Infinity, -Infinity和undefined
爱啥啥
逗号问题 最后一个属性后面不能有逗号 可以
数值 前导0不能用,小数点后必须有数字 没限制

能够见见,相对于JS对象,JSON的格式更严峻,所以大多数写的JS对象是不符合JSON的格式的。

以下代码引用自这里

JavaScript

var obj1 = {}; // 那只是 JS 对象 // 可把那些称做:JSON 格式的 JavaScript 对象 var obj二 = {"width":100,"height":200,"name":"rose"}; // 可把那个称做:JSON 格式的字符串 var str壹 = '{"width":100,"height":200,"name":"rose"}'; // 那一个可叫 JSON 格式的数组,是 JSON 的稍复杂一点的款型 var arr = [ {"width":100,"height":200,"name":"rose"}, {"width":100,"height":200,"name":"rose"}, {"width":100,"height":200,"name":"rose"}, ]; // 这几个可叫稍复杂一点的 JSON 格式的字符串 var str二='[' '{"width":100,"height":200,"name":"rose"},' '{"width":100,"height":200,"name":"rose"},' '{"width":100,"height":200,"name":"rose"},' ']';

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var obj1 = {}; // 这只是 JS 对象
 
// 可把这个称做:JSON 格式的 JavaScript 对象
var obj2 = {"width":100,"height":200,"name":"rose"};
 
// 可把这个称做:JSON 格式的字符串
var str1 = '{"width":100,"height":200,"name":"rose"}';
 
// 这个可叫 JSON 格式的数组,是 JSON 的稍复杂一点的形式
var arr = [  
    {"width":100,"height":200,"name":"rose"},
    {"width":100,"height":200,"name":"rose"},
    {"width":100,"height":200,"name":"rose"},
];
 
// 这个可叫稍复杂一点的 JSON 格式的字符串    
var str2='['   
    '{"width":100,"height":200,"name":"rose"},'
    '{"width":100,"height":200,"name":"rose"},'
    '{"width":100,"height":200,"name":"rose"},'
']';

此外,除了布满的“平常的”JSON格式,要么表现为3个对象情势{...},要么表现为三个数组方式[...],任何单独的三个10进制数值、双引号字符串、布尔值和null都以可行符合JSON格式的。

这里有完整的JSON语法参考

一. 一种多少格式

何以是格式?正是专门的学业你的多少要怎么表示,举个栗子,有私人住房叫“二百陆”,身高“160cm”,体重“60kg”,未来你要将以这厮的那几个信息传给外人依然其他什么事物,你有很四种选取:

  • 姓名“二百六”,身高“160cm”,体重“60kg”

  • name="二百六"&height="160cm"&weight="60kg"

  • <person><name>二百六</name><height>160</height><weight>60</weight></person>

  • {"name":"二百六","height":160,"weight":60}

  • ... ...

如上全数选用,传递的数据是均等的,可是你能够观看格局是能够形形色色的,那正是种种不一样格式化后的数目,JSON是里面一种表示方法。

  • JSON毕竟是什么东西?
  • 干什么JSON就是便于数据交流?
  • JSON和JS对象的分歧?
  • JS中JSON.parse、JSON.stringify和不广泛的toJSON,那多少个函数的参数和处理细节到底是何许的?

三. 三个有趣的地点,JSON不是JS的子集

第1看上边包车型客车代码,你能够copy到调节台实行下:

JavaScript

var code = '"u2028u2029"'; JSON.parse(code); // works fine eval(code); // fails

1
2
3
var code = '"u2028u2029"';  
JSON.parse(code); // works fine  
eval(code); // fails

那多少个字符u2028u2029分别代表行分隔符和段落分隔符,JSON.parse能够正常解析,但是作为js解析时会报错。

二. 基于文本的数据格式

JSON是依附文本的数额格式,相对于凭仗贰进制的多少,所以JSON在传递的时候是传递符合JSON那种格式(至于JSON的格式是哪些大家第贰有个别加以)的字符串,我们常会称呼“JSON字符串”。

应接进入这次“深挖JSON之旅”,下文将从以下多少个地点去通晓JSON:

三、这几个JS中的JSON函数,弄啥嘞

在JS中我们第3会触发到七个和JSON相关的函数,分别用于JSON字符串和JS数据结构之间的倒车,贰个叫JSON.stringify,它很聪慧,聪明到您写的不适合JSON格式的JS对象都能帮你管理成适合JSON格式的字符串,所以您得清楚它究竟干了什么,免得它只是布鼓雷门,然后让您Debug long time;另三个叫JSON.parse,用于转化json字符串到JS数据结构,它很严格,你的JSON字符串假设组织地不对,是不可能解析的。

而它们的参数不止1个,固然大家平时用的时候只传入叁个参数。

别的,还有四个toJSON函数,大家较少看到,可是它会潜移默化JSON.stringify

3. 轻量级的数据格式

在JSON在此之前,有一个数据格式叫xml,未来还是广大在用,可是JSON越发轻量,如xml亟待选取大多标签,像上边的例证中,你能够鲜明看出xml格式的多寡中标签笔者占有了繁多上空,而JSON比较轻量,即一律数量,以JSON的格式侵占的带宽更加小,那在有大气数目请求和传递的景况下是有强烈优势的。

  • 率先是对“JSON是1种轻量的数据交流格式”的明亮;
  • 然后来看平时被混为一谈的JSON和JS对象的分歧;
  • 提及底大家再来看JS中那多少个JSON相关函数具体的施行细节。

1. 将JS数据结构转化为JSON字符串——JSON.stringify

其一函数的函数具名是如此的:

JavaScript

JSON.stringify(value[, replacer [, space]])

1
JSON.stringify(value[, replacer [, space]])

上边将分头张开带一~贰个参数的用法,最终是它在类别化时做的片段“聪明”的事,要特别注意。

肆. 被普及地用来数据交流

轻量已经是3个用来数据交流的优势了,但更关键的JSON是轻巧阅读、编写和机具解析的,即那几个JSON对人和机器都以上下一心的,而且又轻,独立于言语(因为是基于文本的),所以JSON被大面积用于数据交流。

在此以前端JS实行ajax的POST请求为例,后端PHP处理请求为例:

  1. 前端构造叁个JS对象,用于包装要传送的数码,然后将JS对象转化为JSON字符串,再发送请求到后端;

  2. 后端PHP接收到那个JSON字符串,将JSON字符串转化为PHP对象,然后管理请求。

能够看看,一样的数据在那边有3种分歧的表现方式,分别是前者的JS对象、传输的JSON字符串、后端的PHP对象,JS对象和PHP对象显明不是叁个事物,但是由于大家用的都是JSON来传递数据,咱们都能知晓那种数据格式,都能把JSON那种数量格式很轻巧地倒车为协和能通晓的数据结构,那就便宜啦,在其它种种语言意况中交流数据都以那般。

指望全文能让如此前的本身同样对JSON夏虫语冰的亲能说清楚JSON是怎么样,也能轻车熟路应用JSON,不看调节台就明白JS对象连串化成JSON字符串后输出是甚。

1.1 基本使用——仅需一个参数

这几个我们都会动用,传入1个JSON格式的JS对象可能数组,JSON.stringify({"name":"Good Man","age":18})重返多个字符串"{"name":"Good Man","age":18}"

能够观望本人大家传入的那一个JS对象便是吻合JSON格式的,用的双引号,也向来不JSON不接受的属性值,那么1旦像先导这个例子中的同样,how to play?不急,大家先举简单的事例来表达这么些函数的多少个参数的含义,再来讲这么些难点。

二、JSON和JS对象之间的“八卦”

多多时候都听到“JSON是JS的一个子集”那句话,而且那句话作者1度也直接如此认为,每一个符合JSON格式的字符串你解析成js都以能够的,直到后来察觉了三个奇离奇怪的东西...

JSON 是一种格式

1.二 第一个参数能够是函数,也得以是一个数组

  • 若果第一个参数是一个函数,那么种类化进度中的各种属性都会被那个函数转化和拍卖
  • 设若第3个参数是1个数组,那么唯有隐含在那么些数组中的属性才会被种类化到终极的JSON字符串中
  • 借使第1个参数是null,这效能上和空着没啥分歧,不过不想设置第一个参数,只是想设置第肆个参数的时候,就可以安装第三个参数为null

那第二个参数假诺函数

JavaScript

var friend={ "firstName": "Good", "lastName": "Man", "phone":"12345陆7", "age":1八 }; var friendAfter=JSON.stringify(friend,function(key,value){ if(key==="phone") return "(000)" value; else if(typeof value === "number") return value 10; else return value; //要是你把那些else分句删除,那么结果会是undefined }); console.log(friendAfter); //输出:{"firstName":"Good","lastName":"Man","phone":"(000)123456七","age":2八}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var friend={  
    "firstName": "Good",
    "lastName": "Man",
    "phone":"1234567",
    "age":18
};
 
var friendAfter=JSON.stringify(friend,function(key,value){  
    if(key==="phone")
        return "(000)" value;
    else if(typeof value === "number")
        return value 10;
    else
        return value; //如果你把这个else分句删除,那么结果会是undefined
});
 
console.log(friendAfter);  
//输出:{"firstName":"Good","lastName":"Man","phone":"(000)1234567","age":28}

假设制定了第二个参数是函数,那么那一个函数必须对每1项都有重回,那些函数接受多个参数,一个键名,三个是属性值,函数必须针对每3个原来的属性值都要有新属性值的归来。

那么难点来了,举个例子传入的不是键值对的靶子情势,而是方括号的数组情势吗?,举例上边包车型客车friend改为这样:friend=["Jack","Rose"],那么那么些逐属性管理的函数接收到的key和value又是什么?要是是数组情势,那么key是索引,而value是其壹数组项,你能够在调整台在这么些函数内部打字与印刷出来那些key和value验证。

那第贰个参数假设数组

JavaScript

var friend={ "firstName": "Good", "lastName": "Man", "phone":"12345陆七", "age":1八 }; //注意上面包车型客车数组有三个值并不是地方对象的别样3个特性名 var friendAfter=JSON.stringify(friend,["firstName","address","phone"]); console.log(friendAfter); //{"firstName":"Good","phone":"12345陆7"} //钦点的“address”由于未有在本来的目的中找到而被忽视

1
2
3
4
5
6
7
8
9
10
11
12
13
var friend={  
    "firstName": "Good",
    "lastName": "Man",
    "phone":"1234567",
    "age":18
};
 
//注意下面的数组有一个值并不是上面对象的任何一个属性名
var friendAfter=JSON.stringify(friend,["firstName","address","phone"]);
 
console.log(friendAfter);  
//{"firstName":"Good","phone":"1234567"}
//指定的“address”由于没有在原来的对象中找到而被忽略

比方第二个参数是三个数组,那么唯有在数组中出现的习性才会被连串化进结果字符串,只要在这些提供的数组中找不到的属性就不会被含有进去,而以此数组中留存不过源JS对象中不存在的性质会被忽视,不会报错。

一. 七个精神区别的事物怎么那么精心

JSON和JS对象本质上完全不是同叁个东西,就如“斑马线”和“斑马”,“斑马线”基于“斑马”身上的条纹来显现和命名,不过斑马是活的,斑马线是非生物。

一致,"JSON"全名"JavaScript Object Notation",所以它的格式(语法)是依靠JS的,但它正是1种格式,而JS对象是二个实例,是存在于内部存款和储蓄器的1个东西。

说句玩笑话,假使JSON是依附PHP的,可能就叫PON了,格局可能正是如此的了['propertyOne' => 'foo', 'propertyTwo' => 42,],纵然这么,那么JSON恐怕今后是和PHP相比较密切了。

其余,JSON是足以传输的,因为它是文本格式,可是JS对象是无法传输的,在语法上,JSON也会愈来愈严格,然则JS对象就很松了。

那正是说五个差异的东西怎么那么精心,因为JSON究竟是从JS中国对外演出集团变出来的,语法相近。

- 基于文本,优于轻量,用于沟通数据

一.三 第10个参数用于美化输出——不提出用

钦赐缩进用的空白字符,能够取以下多少个值:

  • 是一-十的某些数字,代表用多少个空白字符
  • 是字符串的话,就用该字符串代替空格,最多取这么些字符串的前十一个字符
  • 未曾提供该参数 等于 设置成null 等于 设置1个稍低于1的数

JavaScript

var friend={ "firstName": "Good", "lastName": "Man", "phone":{"home":"1234567","work":"76543二壹"} }; //直接转化是那样的: //{"firstName":"Good","lastName":"Man","phone":{"home":"12345陆七","work":"76543二一"}} var friendAfter=JSON.stringify(friend,null,四); console.log(friendAfter); /* { "firstName": "Good", "lastName": "Man", "phone": { "home": "1234567", "work": "7654321" } } */ var friendAfter=JSON.stringify(friend,null,"HAHAHAHA"); console.log(friendAfter); /* { HAHAHAHA"firstName": "Good", HAHAHAHA"lastName": "Man", HAHAHAHA"phone": { HAHAHAHAHAHAHAHA"home": "1234567", HAHAHAHAHAHAHAHA"work": "7654321" HAHAHAHA} } */ var friendAfter=JSON.stringify(friend,null,"WhatAreYouDoingNow"); console.log(friendAfter); /* 最八只取11个字符 { WhatAreYou"firstName": "Good", WhatAreYou"lastName": "Man", WhatAreYou"phone": { WhatAreYouWhatAreYou"home": "12345陆柒", WhatAreYouWhatAreYou"work": "76543②一" WhatAreYou} } */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
var friend={  
    "firstName": "Good",
    "lastName": "Man",
    "phone":{"home":"1234567","work":"7654321"}
};
 
//直接转化是这样的:
//{"firstName":"Good","lastName":"Man","phone":{"home":"1234567","work":"7654321"}}
 
var friendAfter=JSON.stringify(friend,null,4);  
console.log(friendAfter);  
/*
{
    "firstName": "Good",
    "lastName": "Man",
    "phone": {
        "home": "1234567",
        "work": "7654321"
    }
}
*/
 
var friendAfter=JSON.stringify(friend,null,"HAHAHAHA");  
console.log(friendAfter);  
/*
{
HAHAHAHA"firstName": "Good",  
HAHAHAHA"lastName": "Man",  
HAHAHAHA"phone": {  
HAHAHAHAHAHAHAHA"home": "1234567",  
HAHAHAHAHAHAHAHA"work": "7654321"  
HAHAHAHA}  
}
*/
 
var friendAfter=JSON.stringify(friend,null,"WhatAreYouDoingNow");  
console.log(friendAfter);  
/* 最多只取10个字符
{
WhatAreYou"firstName": "Good",  
WhatAreYou"lastName": "Man",  
WhatAreYou"phone": {  
WhatAreYouWhatAreYou"home": "1234567",  
WhatAreYouWhatAreYou"work": "7654321"  
WhatAreYou}  
}
*/

笑笑就好,别那样用,系列化是为着传输,传输正是能越小越好,加无缘无故的缩进符,解析困难(固然是字符串的话),也减弱了轻量化这几个特点。

二. JSON格式别JS对象语法表现上严厉在哪

先就以“键值对为显示的靶子”情势上,比较下互相的例外,至于JSON仍是能够以如何的样式表现,比较完后再罗列。

对比内容 JSON JS对象
键名 必须是加双引号 可允许不加、加单引号、加双引号
属性值 只能是数值(10进制)、字符串(双引号)、布尔值和null,
也可以是数组或者符合JSON要求的对象,
不能是函数、NaN, Infinity, -Infinity和undefined
爱啥啥
逗号问题 最后一个属性后面不能有逗号 可以
数值 前导0不能用,小数点后必须有数字 没限制

能够见见,相对于JS对象,JSON的格式更严格,所以超越八分之四写的JS对象是不符合JSON的格式的。

以下代码引用自这里

var obj1 = {}; // 这只是 JS 对象

// 可把这个称做:JSON 格式的 JavaScript 对象 
var obj2 = {"width":100,"height":200,"name":"rose"};

// 可把这个称做:JSON 格式的字符串
var str1 = '{"width":100,"height":200,"name":"rose"}';

// 这个可叫 JSON 格式的数组,是 JSON 的稍复杂一点的形式
var arr = [
    {"width":100,"height":200,"name":"rose"},
    {"width":100,"height":200,"name":"rose"},
    {"width":100,"height":200,"name":"rose"},
];

// 这个可叫稍复杂一点的 JSON 格式的字符串     
var str2='[' 
    '{"width":100,"height":200,"name":"rose"},' 
    '{"width":100,"height":200,"name":"rose"},' 
    '{"width":100,"height":200,"name":"rose"},' 
']';

除此以外,除了常见的“平常的”JSON格式,要么表现为三个对象情势{...},要么表现为一个数组情势[...],任何单独的2个10进制数值、双引号字符串、布尔值和null都以卓有成效符合JSON格式的。

这里有完整的JSON语法参考

若果未有去过JSON的法定介绍能够去一下这里,官方介绍第三、2段已经很明白地球表面述了JSON是何等,作者将JSON是何许提炼成以下多少个方面:

一.肆 注意这一个函数的“小智慧”(首要)

假若有任何不分明的景况,那么最棒的艺术就是”Have a try”,调节台做下实验就明了。

  • 键名不是双引号的(包罗未有引号只怕是单引号),会自行产生双引号;字符串是单引号的,会自行成为双引号
  • 最后三本性质后边有逗号的,会被电动去掉
  • 非数组对象的习性不能够担保以特定的逐一出以后系列化后的字符串中
    本条好精通,也正是对非数组对象在结尾字符串中不保证属性顺序和原先同样
  • 布尔值、数字、字符串的卷入对象在体系化进程中会自动转变到对应的原始值
    也正是您的什么样new String("bala")会变成"bala"new Number(2017)会变成2017
  • undefined、大四的函数(实际有个函数会发出奇妙的事,前面会说)以及 symbol 值(symbol详见ES6对symbol的介绍)
    • 出现在非数组对象的属性值中:在系列化进度中会被忽略
    • 出现在数组中时:被转变来 null

JavaScript

JSON.stringify({x: undefined, y: function(){return 1;}, z: Symbol("")}); //出现在非数组对象的属性值中被忽略:"{}" JSON.stringify([undefined, Object, Symbol("")]); //出今后数组对象的属性值中,形成null:"[null,null,null]"

1
2
3
4
JSON.stringify({x: undefined, y: function(){return 1;}, z: Symbol("")});  
//出现在非数组对象的属性值中被忽略:"{}"
JSON.stringify([undefined, Object, Symbol("")]);  
//出现在数组对象的属性值中,变成null:"[null,null,null]"
  • NaN、Infinity和-Infinity,不论在数组恐怕非数组的目的中,都被转接为null
  • 抱有以 symbol 为属性键的品质都会被统统忽视掉,尽管 replacer 参数中强制钦定蕴涵了它们
  • 举不胜举的属性会被忽略

三. 一个有趣的地点,JSON不是JS的子集

第3看下边包车型大巴代码,你能够copy到调控台试行下:

var code = '"u2028u2029"';
JSON.parse(code); // works fine
eval(code); // fails

那多个字符u2028u2029独家代表行分隔符和段落分隔符,JSON.parse能够健康解析,可是作为js解析时会报错。

1.1种多少格式

二. 将JSON字符串解析为JS数据结构——JSON.parse

以此函数的函数具名是那般的:

JavaScript

JSON.parse(text[, reviver])

1
JSON.parse(text[, reviver])

假设第四个参数,即JSON字符串不是法定的字符串的话,那么这些函数会抛出荒谬,所以纵然您在写五个后端重回JSON字符串的脚本,最棒调用语言本身的JSON字符串相关体系化函数,而一旦是上下一心去拼接实现的连串化字符串,那么就一发要注意体系化后的字符串是还是不是是合法的,合法指那一个JSON字符串完全符合JSON供给的严刻格式

值得注意的是这里有二个可选的第一个参数,那个参数必须是八个函数,这一个函数作用在性质已经被分析只是还没回去前,将品质管理后再回到。

JavaScript

var friend={ "firstName": "Good", "lastName": "Man", "phone":{"home":"1234567","work":["7654321","999000"]} }; //大家先将其体系化 var friendAfter=JSON.stringify(friend); //'{"firstName":"Good","lastName":"Man","phone":{"home":"12345六7","work":["7654321","999000"]}}' //再将其分析出来,在其次个参数的函数中打印出key和value JSON.parse(friendAfter,function(k,v){ console.log(k); console.log(v); console.log("----"); }); /* firstName Good ---- lastName Man ---- home 1234567 ---- 0 7654321 ---- 1 999000 ---- work [] ---- phone Object ---- Object ---- */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var friend={  
    "firstName": "Good",
    "lastName": "Man",
    "phone":{"home":"1234567","work":["7654321","999000"]}
};
 
//我们先将其序列化
var friendAfter=JSON.stringify(friend);  
//'{"firstName":"Good","lastName":"Man","phone":{"home":"1234567","work":["7654321","999000"]}}'
 
//再将其解析出来,在第二个参数的函数中打印出key和value
JSON.parse(friendAfter,function(k,v){  
    console.log(k);
    console.log(v);
    console.log("----");
});
/*
firstName  
Good  
----
lastName  
Man  
----
home  
1234567  
----
0  
7654321  
----
1  
999000  
----
work  
[]
----
phone  
Object  
----
 
Object  
----
*/

全面看一下那些输出,能够发掘那个遍历是由内而外的,或然由内而外那几个词大家会误解,最里层是当中数组里的三个值啊,但是出口是从第一个属性开首的,怎么正是由内而外的吧?

那么些由内而外指的是对此复合属性来说的,通俗地讲,遍历的时候,原原本本进行遍历,假如是回顾属性值(数值、字符串、布尔值和null),那么直接遍历落成,如若是遭受属性值是目的或许数组方式的,那么暂停,先遍历这么些子JSON,而遍历的标准也是千篇壹律的,等那几个复合属性遍历达成,那么再产生对那性子情的遍历重返。

精神上,那正是贰个深度优先的遍历。

有两点要求专注:

  • 只要 reviver 再次回到undefined,则当前属性会从所属对象中除去,如若回到了任何值,则赶回的值会成为近日质量新的属性值。
  • 你能够小心到地方例子最终一组输出看上去未有key,其实这一个key是3个空字符串,而结尾的object是末明白析完毕目的,因为到了最上层,已经没有真的的特性了。

三、这几个JS中的JSON函数,弄啥嘞

在JS中大家注重会接触到三个和JSON相关的函数,分别用于JSON字符串和JS数据结构之间的转折,一个叫JSON.stringify,它很精晓,聪明到你写的不吻合JSON格式的JS对象都能帮您管理成符合JSON格式的字符串,所以你得精晓它到底干了什么样,免得它只是自作聪明,然后让你Debug long time;另3个叫JSON.parse,用于转化json字符串到JS数据结构,它很严俊,你的JSON字符串假若协会地不对,是无法解析的。

而它们的参数不止八个,即使大家平常用的时候只传入三个参数。

其余,还有一个toJSON函数,大家较少见到,可是它会影响JSON.stringify

怎么着是格式?正是职业你的多寡要怎么表示,举个栗子,有私人住房叫“二百陆”,身高“160cm”,体重“60kg”,未来您要将以此人的那几个音讯传给旁人只怕其他什么东西,你有很三种取舍:

三. 影响 JSON.stringify 的奇妙函数——object.toJSON

要是你在1个JS对象上完毕了toJSON艺术,那么调用JSON.stringify去种类化那一个JS对象时,JSON.stringify会把这几个目的的toJSON艺术再次来到的值作为参数去开始展览体系化。

JavaScript

var info={ "msg":"I Love You", "toJSON":function(){ var replaceMsg=new Object(); replaceMsg["msg"]="Go Die"; return replaceMsg; } }; JSON.stringify(info); //出si了,再次回到的是:'"{"msg":"Go Die"}"',说好的马虎函数呢

1
2
3
4
5
6
7
8
9
10
11
var info={  
    "msg":"I Love You",
    "toJSON":function(){
        var replaceMsg=new Object();
        replaceMsg["msg"]="Go Die";
        return replaceMsg;
    }
};
 
JSON.stringify(info);  
//出si了,返回的是:'"{"msg":"Go Die"}"',说好的忽略函数呢

以此函数正是那样子的。

其实Date类型能够平素传给JSON.stringify做参数,个中的道理正是,Date体系内置了toJSON方法。

1. 将JS数据结构转化为JSON字符串 —— JSON.stringify

其一函数的函数签名是这么的:

JSON.stringify(value[, replacer [, space]])
  • 姓名“二百六”,身高“160cm”,体重“60kg”
  • name="二百六"&height="160cm"&weight="60kg"
  • <person><name>二百六</name><height>160</height><weight>60</weight></person>
  • {"name":"二百六","height":160,"weight":60}
  • ... ...

肆、小结以及有关包容性的难点

到那边总算把,JSON和JS中的JSON,梳理了三次,也对里面包车型大巴细节和理会点打开了2遍遍历,知道JSON是1种语法上衍生于JS语言的1种轻量级的数据调换格式,也明白了JSON相对于一般的JS数据结构(尤其是目的)的差别,更进一步,仔细地商量了JS中有关JSON处理的二个函数和细节。

唯独遗憾的是,以上所用的2个函数,不包容IE7以及IE7此前的浏览器。有关包容性的探讨,留待今后吧。借使想一直在运用上消除包容性,那么能够套用JSON官方的js,可以缓和。

如有纰漏,应接留言提议。

1 赞 10 收藏 2 评论

图片 2

一.1 基本使用 —— 仅需多个参数

其一大家都会动用,传入1个JSON格式的JS对象也许数组,JSON.stringify({"name":"Good Man","age":18})归来叁个字符串"{"name":"Good Man","age":18}"

能够看到自个儿我们传入的那么些JS对象便是契合JSON格式的,用的双引号,也不曾JSON不接受的属性值,那么一旦像起初那些例子中的同样,how to play?不急,我们先举简单的事例来注明那一个函数的几个参数的意思,再来讲这些标题。

以上全体采用,传递的数据是平等的,可是你能够观察情势是能够各式各样的,那正是各样不一样格式化后的数码,JSON是中间壹种象征方法。

一.贰 第二个参数能够是函数,也得以是1个数组

  • 假若第一个参数是二个函数,那么系列化进度中的每一个属性都会被那么些函数转化和拍卖

  • 假诺第二个参数是2个数组,那么只有隐含在那么些数组中的属性才会被体系化到最终的JSON字符串中

  • 比方第二个参数是null,那功效上和空着没啥分化,可是不想设置第四个参数,只是想设置第多个参数的时候,就足以设置第二个参数为null

那第二个参数纵然函数

var friend={
    "firstName": "Good",
    "lastName": "Man",
    "phone":"1234567",
    "age":18
};

var friendAfter=JSON.stringify(friend,function(key,value){
    if(key==="phone")
        return "(000)" value;
    else if(typeof value === "number")
        return value   10;
    else
        return value; //如果你把这个else分句删除,那么结果会是undefined
});

console.log(friendAfter);
//输出:{"firstName":"Good","lastName":"Man","phone":"(000)1234567","age":28}

设若制定了第一个参数是函数,那么这几个函数必须对每1项都有重回,这一个函数接受四个参数,3个键名,三个是属性值,函数必须针对每三个原先的属性值都要有新属性值的回来。

那正是说难点来了,假设传入的不是键值对的靶子格局,而是方括号的数组格局呢?,例如上面的friend改为那样:friend=["Jack","Rose"],那么那几个逐属性管理的函数接收到的key和value又是何许?假使是数组方式,那么key是索引,而value是以此数组项,你能够在调控台在那个函数内部打字与印刷出来那些key和value验证,记得要再次回到value,否则会出错。

那第3个参数假使数组

var friend={
    "firstName": "Good",
    "lastName": "Man",
    "phone":"1234567",
    "age":18
};

//注意下面的数组有一个值并不是上面对象的任何一个属性名
var friendAfter=JSON.stringify(friend,["firstName","address","phone"]);

console.log(friendAfter);
//{"firstName":"Good","phone":"1234567"}
//指定的“address”由于没有在原来的对象中找到而被忽略

一经第一个参数是一个数组,那么唯有在数组中冒出的质量才会被体系化进结果字符串,只要在这些提供的数组中找不到的性质就不会被含有进去,而以此数组中留存但是源JS对象中不存在的本性会被忽略,不会报错。

二.依照文本的数码格式

一.叁 第几个参数用于美化输出 —— 不提出用

钦赐缩进用的空白字符,能够取以下多少个值:

  • 是壹-10的有些数字,代表用多少个空白字符

  • 是字符串的话,就用该字符串替代空格,最多取那个字符串的前11个字符

  • 尚无提供该参数 等于 设置成null 等于 设置三个低于1的数

    var friend={

    "firstName": "Good",
    "lastName": "Man",
    "phone":{"home":"1234567","work":"7654321"}
    

    };

    //直接倒车是这样的: //{"firstName":"Good","lastName":"Man","phone":{"home":"12345陆7","work":"76543二壹"}}

    var friendAfter=JSON.stringify(friend,null,4); console.log(friendAfter); /* {

    "firstName": "Good",
    "lastName": "Man",
    "phone": {
        "home": "1234567",
        "work": "7654321"
    }
    

    } */

    var friendAfter=JSON.stringify(friend,null,"HAHAHAHA"); console.log(friendAfter); / { HAHAHAHA"firstName": "Good", HAHAHAHA"lastName": "Man", HAHAHAHA"phone": { HAHAHAHAHAHAHAHA"home": "1234567", HAHAHAHAHAHAHAHA"work": "7654321" HAHAHAHA} }/

    var friendAfter=JSON.stringify(friend,null,"WhatAreYouDoingNow"); console.log(friendAfter); / 最七只取13个字符 { WhatAreYou"firstName": "Good", WhatAreYou"lastName": "Man", WhatAreYou"phone": { WhatAreYouWhatAreYou"home": "12345陆七", WhatAreYouWhatAreYou"work": "76543贰一" WhatAreYou} }/

 

笑笑就好,别那样用,类别化是为了传输,传输正是能越小越好,加岂有此理的缩进符,解析困难(假如是字符串的话),也减弱了轻量化那本性子。。

JSON是基于文本的数码格式,相对于依赖2进制的数额,所以JSON在传递的时候是传递符合JSON这种格式(至于JSON的格式是什么我们第二某些再说)的字符串,大家常会称呼“JSON字符串”。

一.四 注意那些函数的“小智慧”(首要)

假定有其余不分明的图景,那么最佳的点子就是"Have a try",调整台做下实验就明了。

  • 键名不是双引号的(包罗未有引号可能是单引号),会自行形成双引号;字符串是单引号的,会自行成为双引号

  • 最终三个属性前面有逗号的,会被活动去掉

  • 非数组对象的天性不能够确认保障以一定的相继出现在系列化后的字符串中 这些好精通,也便是对非数组对象在结尾字符串中不保险属性顺序和原先一样

  • 布尔值、数字、字符串的包装对象在体系化过程中会自动转换来对应的原始值 
    相当于你的哪些new String("bala")会变成"bala"new Number(2017)会变成2017

  • undefined、自便的函数(其实有个函数会发生神奇的事,前边会说)以及 symbol 值(symbol详见ES6对symbol的牵线)

    • 并发在非数组对象的属性值中:在体系化进度中会被忽视

    • 出现在数组中时:被转变来 null

    JSON.stringify({x: undefined, y: function(){return 一;}, z: Symbol("")}); //出现在非数组对象的属性值中被忽视:"{}" JSON.stringify([undefined, Object, Symbol("")]); //出现在数组对象的属性值中,形成null:"[null,null,null]"

  • NaN、Infinity和-Infinity,不论在数组只怕非数组的目的中,都被转载为null

  • 抱有以 symbol 为属性键的性质都会被统统忽视掉,就算 replacer 参数中威胁钦赐包括了它们

  • 习以为常的属性会被忽视

3.轻量级的数据格式

2. 将JSON字符串解析为JS数据结构 —— JSON.parse

其1函数的函数具名是如此的:

JSON.parse(text[, reviver])

如果第多少个参数,即JSON字符串不是官方的字符串的话,那么这些函数会抛出错误,所以若是您在写一个后端重返JSON字符串的脚本,最佳调用语言本人的JSON字符串相关类别化函数,而假设是上下一心去拼接完成的连串化字符串,那么就越来越要注意种类化后的字符串是还是不是是合法的,合法指那一个JSON字符串完全符合JSON须要的无情格式。

值得注意的是这里有三个可选的第四个参数,那么些参数必须是一个函数,那么些函数功能在性质已经被解析只是还没回去前,将品质管理后再回去。

var friend={
    "firstName": "Good",
    "lastName": "Man",
    "phone":{"home":"1234567","work":["7654321","999000"]}
};

//我们先将其序列化
var friendAfter=JSON.stringify(friend);
//'{"firstName":"Good","lastName":"Man","phone":{"home":"1234567","work":["7654321","999000"]}}'

//再将其解析出来,在第二个参数的函数中打印出key和value
JSON.parse(friendAfter,function(k,v){
    console.log(k);
    console.log(v);
    console.log("----");
});
/*
firstName
Good
----
lastName
Man
----
home
1234567
----
0
7654321
----
1
999000
----
work
[]
----
phone
Object
----

Object
----
*/

仔细看一下那些输出,能够窥见那几个遍历是由内而外的,可能由内而外这一个词我们会误解,最里层是在那之中数组里的五个值啊,可是出口是从第二个属性先导的,怎么便是由内而外的吧?

这些由内而外指的是对此复合属性来说的,通俗地讲,遍历的时候,原原本本举行遍历,借使是轻巧属性值(数值、字符串、布尔值和null),那么直接遍历完毕,假若是遇上属性值是目标可能数组情势的,那么暂停,先遍历这几个子JSON,而遍历的规格也是如出1辙的,等这么些复合属性遍历落成,那么再形成对这些天性的遍历再次回到。

实质上,那正是3个纵深优先的遍历。

有两点供给小心:

  • 就算 reviver 返回undefined,则当前属性会从所属对象中去除,要是回去了任何值,则赶回的值会成为当下品质新的属性值。

  • 您能够小心到上面例子最终一组输出看上去未有key,其实这么些key是3个空字符串,而结尾的object是最终解析完结目的,因为到了最上层,已经远非真正的特性了。

在JSON以前,有2个数量格式叫xml,以往依旧周围在用,可是JSON更加轻量,如xml须要利用诸多标签。

3. 影响 JSON.stringify 的奇妙函数 —— object.toJSON

倘若你在三个JS对象上贯彻了toJSON主意,那么调用JSON.stringify去连串化那几个JS对象时,JSON.stringify会把这一个目的的toJSON主意重回的值作为参数去开始展览系列化。

var info={
    "msg":"I Love You",
    "toJSON":function(){
        var replaceMsg=new Object();
        replaceMsg["msg"]="Go Die";
        return replaceMsg;
    }
};

JSON.stringify(info);
//出si了,返回的是:'"{"msg":"Go Die"}"',说好的忽略函数呢

其1函数便是那样子的。

其实Date品类能够一向传给JSON.stringify做参数,其中的道理正是,Date花色内置了toJSON方法。

像上面包车型大巴事例中,你能够可想而知看出xml格式的数量中标签小编攻下了大多上空,而JSON相比轻量,即壹律数量,以JSON的格式攻下的带宽越来越小,那在有恢宏数目请求和传递的事态下是有总来讲之优势的。

四、小结以及关于包容性的主题素材

到那边算是把,JSON和JS中的JSON,梳理了2次,也对里面包车型大巴底细和专注点张开了3次遍历,知道JSON是1种语法上衍生于JS语言的一种轻量级的数据沟通格式,也领会了JSON相对于一般的JS数据结构(更加是目标)的距离,更进一步,仔细地批评了JS中有关JSON管理的一个函数和细节。

可是遗憾的是,以上所用的一个函数,不包容IE7以及IE7在此之前的浏览器。有关包容性的商量,留待现在吧。假如想直接在运用上缓慢解决包容性,那么能够套用JSON官方的js,能够消除。

如有纰漏,欢迎留言提议。

 

via:

 

4.被布满地用于数据交流

轻量已经是1个用于数据交流的优势了,但更首要的JSON是轻易阅读、编写和机械解析的,即那个JSON对人和机械和工具都以温馨的,而且又轻,独立于言语(因为是依据文本的),所以JSON被广大用于数据沟通。

初始端JS举行ajax的POST请求为例,后端PHP管理请求为例:

一).前端构造贰个JS对象,用于包装要传送的多少,然后将JS对象转化为JSON字符串,再发送请求到后端;

二).后端PHP接收到那些JSON字符串,将JSON字符串转化为PHP对象,然后管理请求。

前者构造2个JS对象,用于包装要传递的数据,然后将JS对象转化为JSON字符串,再发送请求到后端;

后端PHP接收到那么些JSON字符串,将JSON字符串转化为PHP对象,然后处理请求。

能够观察,同样的数量在此处有三种差异的表现方式,分别是前者的JS对象、传输的JSON字符串、后端的PHP对象。

JS对象和PHP对象显著不是3个东西,然则出于大家用的都是JSON来传递数据,我们都能精晓那种多少格式,都能把JSON那种数据格式很轻松地转化为和睦能掌握的数据结构。

那就便宜啦,在其余各样语言情状中交流数据都以这么。

JSON 和 JS 对象之间的“八卦”

有的是时候都听到“JSON是JS的五个子集”那句话,而且那句话小编曾经也直接这么认为,每一种符合JSON格式的字符串你分析成js都以能够的,直到后来发掘了2个奇诡异怪的东西...

壹.八个真相分化的事物怎么那么精心

JSON和JS对象本质上完全不是同一个东西,就像“斑马线”和“斑马”,“斑马线”基于“斑马”身上的条纹来显示和命名,可是斑马是活的,斑马线是非生物。

同一,"JSON"全名"JavaScript Object Notation",所以它的格式(语法)是依赖JS的,但它正是一种格式,而JS对象是三个实例,是存在于内部存储器的一个东西。

说句玩笑话,假若JSON是依靠PHP的,恐怕就叫PON了,情势大概正是如此的了['propertyOne' => 'foo', 'propertyTwo' => 42,],若是这么,那么JSON只怕现在是和PHP相比较密切了。

除此以外,JSON是足以传输的,因为它是文本格式,然而JS对象是不能传输的,在语法上,JSON也会愈发严酷,不过JS对象就很松了。

本文由新浦京81707con发布于功能介绍,转载请注明出处:这里水很深,深入理解

关键词: 新浦京81707con javascript json js jQuery

上一篇:没有了

下一篇:没有了