假设你愿意一层一层剥开我的心,深入通晓

深深精通 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
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是一种轻量的数据调换格式”的明亮;
  • 然后来看经常被混为一谈的JSON和JS对象的分歧;
  • 最后大家再来看JS中这多少个JSON相关函数具体的施行细节。

希望全文能让如从前的自家同一对JSON瓮天之见的亲能说清楚JSON是什么样,也能熟能生巧使用JSON,不看控制台就掌握JS对象序列化成JSON字符串后输出是甚。

俺们先来看一个JS中普遍的JS对象序列化成JSON字符串的难题,请问,以下JS对象通过JSON.stringify后的字符串是怎么样的?先不要急着复制粘贴到控制台,先自己打开一个代码编辑器或者纸,写写看,写完再去仔细相比较你的决定台出口,如若有误记得看完全文并评价,哈哈。

转发网址:

一、什么是json?

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

设若没有去过JSON的合法介绍可以去一下那边,官方介绍第一、二段已经很明白地表明了JSON是如何,我将JSON是如何提炼成以下多少个方面:

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

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

 

json英文全称 JavaScript Object Notation,是一种易于通晓的轻量级数据调换格式。

1. 一种多少格式

什么样是格式?就是标准你的数据要怎么表示,举个栗子,有私房叫“二百六”,身高“160cm”,体重“60kg”,现在你要将以这厮的这几个音讯传给旁人依旧其他什么事物,你有很各样摘取:

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

如上所有选取,传递的数目是一致的,不过你可以看出方式是可以各式种种的,那就是各个不一致格式化后的数额,JSON是其中一种表示方法。

其次个难点,假设自身想在最后JSON字符串将这些’friend’的真名全体化为大写字母,也就是把”Good”变成”GOOD”,把”Man”变成”MAN”,那么可以怎么做?

大家先来看一个JS中广泛的JS对象种类化成JSON字符串的题材。

JSON 作用:用于存储和传输数据的格式。 平日用于服务端向网页传递数据 。

2. 依照文本的数码格式

JSON是根据文本的数据格式,相对于根据二进制的数量,所以JSON在传递的时候是传递符合JSON那种格式(至于JSON的格式是何等我们第二部分加以)的字符串,大家常会称呼“JSON字符串”。

基于上述八个难点,我们再追本溯源问一下,JSON究竟是怎么事物?为何JSON就是简单数据调换?JSON和JS对象的分裂?JS中JSON.parseJSON.stringify和不普遍的toJSON,这多少个函数的参数和拍卖细节到底是哪些的?

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

二、语法规则

3. 轻量级的数据格式

在JSON以前,有一个数量格式叫xml,现在照旧周边在用,不过JSON尤其轻量,如xml必要选用很多标签,像上面的事例中,你可以明显看到xml格式的多少中标签我占据了重重上空,而JSON相比较轻量,即一律数量,以JSON的格式占据的带宽更小,那在有恢宏数目请求和传递的情景下是有显而易见优势的。

欢迎进入本次“深挖JSON之旅”,下文将从以下多少个地点去精通JSON:

(先不用急着复制粘贴到控制台,先自己打开一个代码编辑器或者纸,写写看,写完再去仔细相比较你的支配台出口,若是有误记得看完全文并评论,哈哈。)

  • 数据为 键/值 对。
  • 多少由逗号分隔。
  • 大括号保存对象
  • 方括号保存数组

4. 被周边地用来数据调换

轻量已经是一个用来数据互换的优势了,但更关键的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和JS对象的界别;

  • 最后我们再来看JS中那多少个JSON相关函数具体的施行细节。

美高梅开户网址 1

  json对象的代码示例:

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

多多时候都听见“JSON是JS的一个子集”那句话,而且那句话我一度也直接那样认为,每个符合JSON格式的字符串你解析成js都是足以的,直到后来发现了一个奇奇怪怪的东西…

意在全文能让如从前的我同样对JSON孤陋寡闻的亲能说清楚JSON是何许,也能熟练运用JSON,不看控制台就清楚JS对象种类化成JSON字符串后输出是啥。

其次个难点,倘使本身想在最后JSON字符串将那些’friend’的人名全体化为大写字母,也就是把”Good”变成”GOOD”,把”Man”变成”MAN”,那么可以如何做?

  {“firstName”:”John”, “lastName”:”Doe”}

1. 多个精神差距的事物怎么那么精心

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

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

说句玩笑话,若是JSON是基于PHP的,可能就叫PON了,情势可能就是这般的了['propertyOne' => 'foo', 'propertyTwo' => 42,],假使如此,那么JSON可能现在是和PHP对比细致了。

此外,JSON是足以传输的,因为它是文本格式,不过JS对象是不可能传输的,在语法上,JSON也会更加严刻,不过JS对象就很松了。

那就是说四个差其余东西怎么那么精心,因为JSON毕竟是从JS中衍变出来的,语法相近。

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

假使没有去过JSON的官方介绍可以去一下那边,官方介绍第一、二段已经很清楚地表达了JSON是什么样,我将JSON是什么样提炼成以下多少个方面:

按照以上四个难题,大家再追本溯源问一下:

  json数组的代码示例:

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

先就以“键值对为显示的靶子”格局上,相比较下彼此的不等,至于JSON仍能以什么的款型表现,比较完后再罗列。

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

可以看看,相对于JS对象,JSON的格式更严厉,所以半数以上写的JS对象是不符合JSON的格式的。

以下代码引用自这里

JavaScript

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”},’+ ‘]’;

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格式,要么表现为一个对象形式{...},要么表现为一个数组形式[...]假设你愿意一层一层剥开我的心,深入通晓。,任何单独的一个10进制数值、双引号字符串、布尔值和null都是可行符合JSON格式的。

那里有完整的JSON语法参考

1. 一种多少格式

何以是格式?就是标准你的数额要怎么表示,举个栗子,有个体叫“二百六”,身高“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,那多少个函数的参数和处理细节到底是怎么着的?

  ”employees”:[
    {“firstName”:”John”, “lastName”:”Doe”}, 
    {“firstName”:”Anna”, “lastName”:”Smith”}, 
    {“firstName”:”Peter”, “lastName”:”Jones”}
  ]

3. 一个好玩的地点,JSON不是JS的子集

首先看上面的代码,你可以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解析时会报错。

2. 根据文本的数码格式

JSON是按照文本的数据格式,相对于根据二进制的数量,所以JSON在传递的时候是传递符合JSON那种格式(至于JSON的格式是怎么着大家第二局地再说)的字符串,大家常会称呼“JSON字符串”。

欢迎进入本次“深挖JSON之旅”,下文将从以下多少个方面去通晓JSON:

三、json的操作

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

在JS中大家根本会触发到多个和JSON相关的函数,分别用于JSON字符串和JS数据结构之间的转折,一个叫JSON.stringify,它很聪慧,聪明到你写的不合乎JSON格式的JS对象都能帮您处理成适合JSON格式的字符串,所以你得领悟它究竟干了什么样,免得它只是自作聪明,然后让你Debug
long
time;另一个叫JSON.parse,用于转化json字符串到JS数据结构,它很严苛,你的JSON字符串借使社团地不对,是不可能解析的。

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

其余,还有一个toJSON函数,我们较少见到,可是它会潜移默化JSON.stringify

3. 轻量级的数量格式

在JSON此前,有一个数量格式叫xml,现在依然周边在用,然则JSON更加轻量,如xml亟待选拔很多标签,像下边的事例中,你可以一目驾驭看出xml格式的多寡中标签我占据了成千上万空间,而JSON相比轻量,即一律数量,以JSON的格式占据的带宽更小,那在有雅量数目请求和传递的情况下是有引人注目优势的。

  • 第一是对“JSON是一种轻量的数据调换格式”的知晓;
  • 接下来来看平日被混为一谈的JSON和JS对象的分别;
  • 最后大家再来看JS中那多少个JSON相关函数具体的施行细节。

  JSON 最广泛的用法之一,是从 web 服务器上读取 JSON
数据(作为文件或当作 HttpRequest),将 JSON 数据转换为 JavaScript
对象,然后在网页中采纳该数据。

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

本条函数的函数签名是那样的:

JavaScript

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

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

下边将各自举办带1~3个参数的用法,最终是它在体系化时做的有些“聪明”的事,要尤其注意。

4. 被大面积地用来数据调换

轻量已经是一个用来数据调换的优势了,但更器重的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 基本使用——仅需一个参数

这些我们都会动用,传入一个JSON格式的JS对象或者数组,JSON.stringify({"name":"Good Man","age":18})归来一个字符串"{"name":"Good Man","age":18}"

可以观望自己大家传入的这么些JS对象就是适合JSON格式的,用的双引号,也从不JSON不收受的属性值,那么只要像开首那个例子中的一样,how
to
play?不急,我们先举不难的例证来表达那一个函数的多少个参数的意义,再来说那一个题材。

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

多多时候都听到“JSON是JS的一个子集”那句话,而且那句话我早就也直接那样觉得,每个符合JSON格式的字符串你分析成js都是可以的,直到后来发现了一个奇奇怪怪的东西…

JSON 是一种格式

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset=”utf-8″>
      <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
      <h2>从 JSON 字符串中成立对象</h2>
      <p>
        名: <span id=”fname”></span><br>
        姓: <span id=”lname”></span><br>
      </p>
      <script>
        var txt = ‘{“employees”:[‘ +
        '{“firstName”:”John”,”lastName”:”Doe” },’ +
        '{“firstName”:”Anna”,”lastName”:”Smith” },’ +
        '{“firstName”:”Peter”,”lastName”:”Jones” }]}’;

1.2 第四个参数可以是函数,也得以是一个数组

  • 只要第三个参数是一个函数,那么连串化进程中的每个属性都会被那些函数转化和拍卖
  • 如果第三个参数是一个数组,那么唯有隐含在那一个数组中的属性才会被序列化到终极的JSON字符串中
  • 假设第四个参数是null,那功能上和空着没啥不一样,不过不想设置第三个参数,只是想设置第多个参数的时候,就足以安装首个参数为null

那首个参数即使函数

JavaScript

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
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}

假如制定了第三个参数是函数,那么那一个函数必须对每一项都有重回,那一个函数接受多个参数,一个键名,一个是属性值,函数必须针对每一个本来的属性值都要有新属性值的回到。

那就是说难点来了,若是传入的不是键值对的目的方式,而是方括号的数组方式吗?,比如上边的friend变成那样:friend=["Jack","Rose"],那么这些逐属性处理的函数接收到的key和value又是怎样?借使是数组格局,那么key是索引,而value是其一数组项,你可以在控制台在那个函数内部打印出来那么些key和value验证。

那首个参数即便数组

JavaScript

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”由于没有在本来的对象中找到而被忽略

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对象中不设有的习性会被忽视,不会报错。

1. 七个真相分裂的东西怎么那么精心

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

一如既往,”JSON”全名”JavaScript Object
Notation”,所以它的格式(语法)是基于JS的,但它就是一种格式,而JS对象是一个实例,是存在于内存的一个事物。

说句玩笑话,若是JSON是基于PHP的,可能就叫PON了,形式可能就是这么的了['propertyOne' => 'foo', 'propertyTwo' => 42,],倘诺如此,那么JSON可能现在是和PHP比较细致了。

其它,JSON是可以传输的,因为它是文本格式,不过JS对象是不能够传输的,在语法上,JSON也会愈加狠毒,不过JS对象就很松了。

那么四个不等的事物怎么那么细心,因为JSON毕竟是从JS中衍生和变化出来的,语法相近。

– 基于文本,优于轻量,用于调换数据

        var obj = eval (“(” + txt + “)”);

1.3 第二个参数用于美化输出——不提议用

指定缩进用的空白字符,可以取以下多少个值:

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

JavaScript

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} } */

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}  
}
*/

笑笑就好,别那样用,体系化是为了传输,传输就是能越小越好,加岂有此理的缩进符,解析困难(倘使是字符串的话),也削弱了轻量化这些特点。

2. 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格式,要么表现为一个目的方式{...},要么表现为一个数组格局[...],任何单独的一个10进制数值、双引号字符串、布尔值和null都是实惠符合JSON格式的。

此处有总体的JSON语法参考

借使没有去过JSON的法定介绍可以去一下那边,官方介绍第一、二段已经很精晓地发布了JSON是怎么着,我将JSON是怎么提炼成以下多少个方面:

        document.getElementById(“fname”).innerHTML=obj.employees[1].firstName
        document.getElementById(“lname”).innerHTML=obj.employees[1].lastName
      </script>
     </body>
    </html>

1.4 注意这一个函数的“小智慧”(主要)

借使有其它不确定的情事,那么最好的办法就是”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
    参数中威吓指定包括了它们
  • 恒河沙数的特性会被忽略

3. 一个诙谐的地点,JSON不是JS的子集

首先看上面的代码,你可以copy到控制台执行下:

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

那三个字符\u2028\u2029个别表示行分隔符和段落分隔符,JSON.parse可以健康解析,但是作为js解析时会报错。

1.一种多少格式

    JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

2. 将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”:”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 —- */

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是一个空字符串,而最后的object是终极解析达成目标,因为到了最上层,已经远非真正的性质了。

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

在JS中大家根本会触发到三个和JSON相关的函数,分别用于JSON字符串和JS数据结构之间的转会,一个叫JSON.stringify,它很聪明伶俐,聪明到您写的不符合JSON格式的JS对象都能帮你处理成适合JSON格式的字符串,所以您得知道它究竟干了哪些,免得它只是自作聪明,然后让您Debug
long
time;另一个叫JSON.parse,用于转化json字符串到JS数据结构,它很严峻,你的JSON字符串若是社团地不对,是无法解析的。

而它们的参数不止一个,即便大家常常用的时候只传入一个参数。

除此以外,还有一个toJSON函数,大家较少见到,不过它会潜移默化JSON.stringify

怎么着是格式?就是正式你的数额要怎么表示,举个栗子,有个人叫“二百六”,身高“160cm”,体重“60kg”,现在你要将此人的这么些音讯传给别人或者其余什么事物,你有很各样选项:

    语法:JSON.parse(text[, reviver])

3. 震慑 JSON.stringify 的神奇函数——object.toJSON

比方您在一个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,梳理了四次,也对内部的底细和注意点进行了三次遍历,知道JSON是一种语法上衍生于JS语言的一种轻量级的数据沟通格式,也通晓了JSON相对于一般的JS数据结构(尤其是目标)的差距,更进一步,仔细地谈论了JS中有关JSON处理的3个函数和细节。

但是遗憾的是,以上所用的3个函数,不包容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是其中一种象征方法。

    • text:必需, 一个实惠的 JSON 字符串,
    • reviver: 可选,一个转移结果的函数,
      将为对象的各种成员调用此函数。

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}

假诺制定了首个参数是函数,那么这么些函数必须对每一项都有重临,那个函数接受多少个参数,一个键名,一个是属性值,函数必须针对每一个原来的属性值都要有新属性值的归来。

这就是说难点来了,要是传入的不是键值对的目的格局,而是方括号的数组形式呢?,比如上面的friend变成那样:friend=["Jack","Rose"],那么那么些逐属性处理的函数接收到的key和value又是如何?如若是数组格局,那么key是索引,而value是其一数组项,你可以在控制台在这些函数内部打印出来那个key和value验证,记得要回来value,不然会出错。

那第一个参数倘使数组

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对象中不设有的属性会被忽略,不会报错。

2.根据文本的数目格式

    相关示例:

1.3 第多个参数用于美化输出 —— 不提议用

点名缩进用的空白字符,可以取以下多少个值:

  • 是1-10的某部数字,代表用多少个空白字符

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

  • 从未有过提供该参数 等于 设置成null 等于 设置一个低于1的数

    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是基于文本的数量格式,相对于依照二进制的数目,所以JSON在传递的时候是传递符合JSON那种格式(至于JSON的格式是什么样大家第二部分再说)的字符串,大家常会称呼“JSON字符串”。

    <!DOCTYPE
html>

1.4 注意这么些函数的“小智慧”(首要)

如若有其余不确定的事态,那么最好的方法就是”Have a
try”,控制台做下实验就明了。

  • 键名不是双引号的(包含没有引号或者是单引号),会活动成为双引号;字符串是单引号的,会自行变成双引号

  • 末段一个属性后边有逗号的,会被活动去掉

  • 非数组对象的属性不可能确保以一定的相继出现在种类化后的字符串中 这么些好精通,也就是对非数组对象在最终字符串中不保证属性顺序和原来一样

  • 布尔值、数字、字符串的包装对象在连串化进程中会自动转换成对应的原始值 
    也就是你的哪些new String("bala")会变成"bala"new Number(2017)会变成2017

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

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

    • 出现在数组中时:被转换成 null

    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
    参数中胁迫指定包括了它们

  • 不可胜数的属性会被忽略

3.轻量级的多寡格式

    <html>

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

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

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,而遍历的口径也是均等的,等这几个复合属性遍历完成,那么再形成对这几个特性的遍历重回。

本质上,这就是一个纵深优先的遍历。

有两点需求注意:

  • 设若 reviver 重回undefined,则当前属性会从所属对象中删去,要是回去了其余值,则赶回的值会成为当前质量新的属性值。

  • 您能够小心到上面例子最后一组输出看上去没有key,其实那一个key是一个空字符串,而最后的object是终极解析完毕目标,因为到了最上层,已经远非当真的质量了。

在JSON此前,有一个数目格式叫xml,现在照旧大规模在用,可是JSON越发轻量,如xml要求运用很多标签。

      <head>

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"}"',说好的忽略函数呢

以此函数就是那样子的。

其实Date类型可以一贯传给JSON.stringify做参数,其中的道理就是,Date连串内置了toJSON方法。

像上面的例证中,你可以显然看出xml格式的数目中标签我占据了广大空间,而JSON比较轻量,即一律数量,以JSON的格式占据的带宽更小,那在有大气数额请求和传递的景色下是有由此可见优势的。

        <meta charset=”utf-8″>
        <title>菜鸟教程(runoob.com)</title>
      </head>
    <body>

四、小结以及关于包容性的难题

到这边终于把,JSON和JS中的JSON,梳理了四回,也对内部的底细和专注点展开了四回遍历,知道JSON是一种语法上衍生于JS语言的一种轻量级的数据沟通格式,也精晓了JSON相对于一般的JS数据结构(越发是目的)的差异,更进一步,仔细地商量了JS中关于JSON处理的3个函数和细节。

然则遗憾的是,以上所用的3个函数,不兼容IE7以及IE7此前的浏览器。有关包容性的座谈,留待将来呢。假使想直接在使用上化解包容性,那么可以套用JSON官方的js,可以缓解。

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

 

via:

 

4.被广泛地用于数据调换

      <h2>从 JSON 字符串中创设一个目的</h2>
      <p id=”demo”></p>
    <script>
      var text = ‘{“employees”:[‘ +
      '{“name”:”菜鸟教程”,”site”:”” },’ +
      '{“name”:”Google”,”site”:”” },’ +
      '{“name”:”Taobao”,”site”:”” }]}’;
      obj = JSON.parse(text);
      document.getElementById(“demo”).innerHTML =
      obj.employees[1].name + ” ” + obj.employees[1].site;
美高梅开户网址,    </script>

轻量已经是一个用以数据沟通的优势了,但更器重的JSON是简单阅读、编写和机械解析的,即这么些JSON对人和机具都是自己的,而且又轻,独立于言语(因为是根据文本的),所以JSON被大规模用于数据沟通。

   </body>
  </html>

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

  选参:

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

    <!DOCTYPE html>

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

    <html>
    <head>
      <meta charset=”utf-8″>
      <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>

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

      <h2>使用可选参数,回调函数</h2>
      <p id=”demo”></p>
      <script>
        JSON.parse(‘{“p”: 5}’, function(k, v) {
        if (k === ”) { return v; }
        return v * 2;
        });
        JSON.parse(‘{“1”: 1, “2”: 2, “3”: {“4”: 4, “5”: {“6”:
6}}}’, function(k, v) {
        document.write( k );// 输出当前质量,最终一个为 “”
        document.write(“<br>”);
        return v; // 重返修改的值
        });
      </script>

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

    </body>
   </html>

能够看看,相同的多寡在此处有3种分裂的表现格局,分别是前者的JS对象、传输的JSON字符串、后端的PHP对象。

   JSON.stringify主意用于将一个值转为字符串。该字符串应该符合JSON格式,并且可以被JSON.parse方法还原。

JS对象和PHP对象显著不是一个东西,但是出于大家用的都是JSON来传递数据,我们都能领悟那种多少格式,都能把JSON那种多少格式很简单地转车为友好能知道的数据结构。

   语法:JSON.stringify(value[, replacer[, space]]) 

那就便于啊,在任何各样语言环境中沟通数据都是那般。

    参数表明:

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

    • value:

      需要, 一个立见成效的 JSON 字符串。

    • replacer:

      可选。用于必要转成字符串的属性。。

      一经 replacer 为函数,则 JSON.stringify
      将调用该函数,并传到每个成员的键和值。使用再次回到值而不是原始值。倘诺此函数再次回到undefined,则排除成员。根对象的键是一个空字符串:””。

      假诺 replacer
      是一个数组,则仅转换该数组中装有键值的积极分子。成员的转移顺序与键在数组中的顺序一样。当
      value 参数也为数组时,将忽略 replacer 数组。

    • space:

      可选,文本添加缩进、空格和换行符,用于增添重返的JSON字符串的可读性。倘诺是数字,表示每个属性前边添加的空格(最多不超越10个);假诺是字符串(不当先10个字符),则该字符串会添加在每行前边。

过多时候都听到“JSON是JS的一个子集”那句话,而且那句话我已经也一向这么觉得,每个符合JSON格式的字符串你分析成js都是可以的,直到后来发觉了一个奇奇怪怪的东西…

   相关代码示例:

1.七个真相区其他东西怎么那么精心

    <!DOCTYPE html>

JSON和JS对象本质上完全不是同一个事物,似乎“斑马线”和“斑马”,“斑马线”基于“斑马”身上的条纹来展现和命名,可是斑马是活的,斑马线是非生物。

    <html>
      <head>
        <meta charset=”utf-8″>
        <title>菜鸟教程(runoob.com)</title>
      </head>
      <body>

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

        <p id=”demo”></p>
        <script>
          var str = {“name”:”菜鸟教程”,
“site”:”
          str_pretty1 = JSON.stringify(str)
          document.write( “唯有一个参数情况:” );
          document.write( “<br>” );
          document.write(“<pre>” + str_pretty1 +
“</pre>” );
          document.write( “<br>” );
          str_pretty2 = JSON.stringify(str, null, 4)
//使用五个空格缩进
          document.write( “使用参数情况:” );
          document.write( “<br>” );
          document.write(“<pre>” + str_pretty2 +
“</pre>” ); // pre 用于格式化输出
        </script>

说句玩笑话,如若JSON是根据PHP的,可能就叫PON了,方式可能就是如此的了[‘propertyOne’
=> ‘foo’, ‘propertyTwo’ =>
42,],若是这么,那么JSON可能现在是和PHP比较密切了。

      </body>
    </html>

除此以外,JSON是可以传输的,因为它是文本格式,可是JS对象是不可以传输的,在语法上,JSON也会越加残暴,不过JS对象就很松了。

    由 JSON.stringify 方法用于允许转换某个对象的多寡以进行JavaScript Object Notation (JSON) 系列化。

那就是说八个区其他事物怎么那么精心,因为JSON毕竟是从JS中衍变出来的,语法相近。

    语法:objectname.toJSON()

2.JSON 格式比 JS 对象语法严峻的变现

    参数:objectname必备。  须要举办JSON 序列化的对象。  

先就以“键值对为显示的目的”格局上,相比较下相互的两样,至于JSON仍是可以以什么样的方式突显,相比较完后再罗列。

    代码示例:

美高梅开户网址 3

    使用 toJSON 方法将大写的字符串成员值序列化。  在调用 JSON.stringify 时调用 toJSON 方法。  

可以观望,相对于JS对象,JSON的格式更严苛,所以一大半写的JS对象是不切合JSON的格式的。

    var contact = new Object();

美高梅开户网址 4

     contact.firstname = “Jesper”;

3.JSON 不是 JS 的子集

     contact.surname = “Aaberg”;

第一看下边的代码,你可以copy到控制台执行下:

     **contact.phone = [“555-0100”, “555-0120”];**

美高梅开户网址 5

     ***contact.toJSON =
function(key*    ***       var replacement = new
Object();***

那五个字符\u2028和\u2029分别代表行分隔符和段落分隔符,JSON.parse可以健康解析,但是作为js解析时会报错。

       for (var val in this)
      {
          if (typeof (this[val]) === 'string')
              replacement[val] = this[val].toUpperCase();
          else
              replacement[val] = this[val]
      }
      return replacement;
  };

  var jsonText = JSON.stringify(contact);

  /* The value of jsonText is:
  '{"firstname":"JESPER","surname":"AABERG","phone":["555-0100","555-0120"]}'
  */
  以下示例演示如何使用作为 Date 对象的内置成员的 toJSON 方法。 

  var dt = new Date('8/24/2009');
  dt.setUTCHours(7, 30, 0);
  var jsonText = JSON.stringify(dt);

  /* The value of jsonText is:
  '"2009-08-24T07:30:00Z"'
  */

 

 

这几个 JS 中的 JSON 函数

在JS中大家紧要会触发到八个和JSON相关的函数,分别用于JSON字符串和JS数据结构之间的转折。

一个叫JSON.stringify,它很聪慧,聪明到您写的不切合JSON格式的JS对象都能帮你处理成适合JSON格式的字符串,所以您得明白它究竟干了何等,免得它只是布鼓雷门,然后让您Debug
long time。

另一个叫JSON.parse,用于转化json字符串到JS数据结构,它很严谨,你的JSON字符串倘诺社团地不对,是不能解析的。

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

其它,还有一个toJSON函数,我们较少看到,然而它会影响JSON.stringify。

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

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

本条函数的函数签名是那样的:

美高梅开户网址 6

下边将各自开展带1~3个参数的用法,最终是它在连串化时做的有的“聪明”的事,要更加注意。

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

这么些大家都会使用,传入一个JSON格式的JS对象或者数组,JSON.stringify({“name”:”Good
Man”,”age”:18})再次回到一个字符串”{“name”:”Good Man”,”age”:18}”。

可以观望自身大家传入的那几个JS对象就是吻合JSON格式的,用的双引号,也不曾JSON不接受的属性值,那么只要像起先那个例子中的一样,how
to play?

不急,大家先举简单的例证来表达这一个函数的多少个参数的意义,再来说那些标题。

1.2 首个参数可以是函数,也得以是一个数组

  • 假定第四个参数是一个函数,那么体系化进程中的每个属性都会被那么些函数转化和拍卖
  • 万一第三个参数是一个数组,那么唯有隐含在这么些数组中的属性才会被体系化到最后的JSON字符串中
  • 即使第一个参数是null,那功用上和空着没啥不一样,可是不想设置第四个参数,只是想设置第二个参数的时候,就可以安装第三个参数为null

那第四个参数倘诺函数

美高梅开户网址 7

若是制定了第三个参数是函数,那么那一个函数必须对每一项都有再次回到,那一个函数接受八个参数,一个键名,一个是属性值,函数必须针对每一个原先的属性值都要有新属性值的回到。

那就是说难点来了,假如传入的不是键值对的对象方式,而是方括号的数组格局呢?,比如上边的friend变成那样:friend=[“Jack”,”Rose”],那么那几个逐属性处理的函数接收到的key和value又是什么?

比方是数组格局,那么key是索引值,而value是这几个数组项,你可以在控制台在这么些函数内部打印出来这么些key和value验证,记得要在函数内部重临value,不然会出错。

那第四个参数即使数组

美高梅开户网址 8

假使第三个参数是一个数组,那么唯有在数组中冒出的特性才会被系列化进结果字符串,只要在那一个提供的数组中找不到的品质就不会被含有进去,而以此数组中存在然而源JS对象中不存在的习性会被忽略,不会报错。

1.3 第多个参数用于美化输出 —— 不指出用

指定缩进用的空白字符,可以取以下多少个值:

  • 是1-10的某个数字,代表用多少个空白字符
  • 是字符串的话,就用该字符串代替空格,最多取那几个字符串的前10个字符
  • 从没提供该参数 等于 设置成null 等于 设置一个稍低于1的数

美高梅开户网址 9

美高梅开户网址 10

笑笑就好,别这么用,体系化是为着传输,传输就是能越小越好,加莫明其妙的缩进符,解析困难(如若是字符串的话),也削弱了轻量化这几个特性。。

1.4 注意那一个函数的“小智慧”(紧要)

假定有任何不确定的景况,那么最好的主意就是”Have a
try”,控制台做下实验就明了。

  • 键名不是双引号的(包涵没有引号或者是单引号),会自动变成双引号;字符串是单引号的,会活动成为双引号
  • 末段一个性质后边有逗号的,会被电动去掉
  • 非数组对象的属性不可能有限支撑以特定的逐一现身在系列化后的字符串中
  • 本条好了解,也就是对非数组对象在结尾字符串中不有限支撑属性顺序和原先一样
  • 布尔值、数字、字符串的卷入对象在系列化进程中会自动转换成对应的原始值
  • 也就是您的什么样new String(“bala”)会成为”bala”,new
    Number(2017)会成为2017
  • undefined、任意的函数(其实有个函数会时有发生神奇的事,后边会说)以及
    symbol 值(symbol详见ES6对symbol的介绍)
    • 出现在非数组对象的属性值中:在系列化进度中会被忽略
    • 并发在数组中时:被转换成 null

美高梅开户网址 11

  • NaN、Infinity和-Infinity,不论在数组或者非数组的靶子中,都被转接为null
  • 享有以 symbol 为属性键的属性都会被完全忽视掉,即使 replacer
    参数中威迫指定包涵了它们
  • 恒河沙数的习性会被忽略

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

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

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

美高梅开户网址 12

只要第四个参数,即JSON字符串不是官方的字符串的话,那么这些函数会抛出错误,所以若是您在写一个后端重回JSON字符串的脚本,最好调用语言本身的JSON字符串相关连串化函数。

而假使是上下一心去拼接完毕的种类化字符串,那么就更为要注意系列化后的字符串是还是不是是合法的,合法指那些JSON字符串完全符合JSON需要的无情格式。

值得注意的是那里有一个可选的首个参数,那些参数必须是一个函数,这些函数作用在性质已经被分析只是还没回来前,将质量处理后再回来。

美高梅开户网址 13

美高梅开户网址 14

有心人看一下那一个输出,可以发现这么些遍历是由内而外的,可能由内而外这些词我们会误解,最里层是其中数组里的三个值啊,可是出口是从第四个属性发轫的,怎么就是由内而外的吧?

以此由内而外指的是对此复合属性来说的,通俗地讲,遍历的时候,从头到尾进行遍历,如果是简简单单属性值(数值、字符串、布尔值和null),那么直接遍历已毕。

假设是蒙受属性值是目的或者数组方式的,那么暂停,先遍历那个子JSON,而遍历的尺度也是同样的,等这些复合属性遍历落成,那么再形成对那几个特性的遍历重临。

本质上,那就是一个深度优先的遍历。

有两点需求小心:

  • 设若 reviver 重返undefined,则当前属性会从所属对象中除去,假诺回到了任何值,则赶回的值会成为近期品质新的属性值。
  • 你可以小心到上面例子最终一组输出看上去没有key,其实那个key是一个空字符串,而结尾的object是最终解析已毕目的,因为到了最上层,已经没有真的的属性了。

3.震慑 JSON.stringify 的神奇函数

潜移默化 JSON.stringify 的神奇函数 —— object.toJSON

即使你在一个JS对象上落实了toJSON方法,那么调用JSON.stringify去系列化这几个JS对象时,JSON.stringify会把那些目的的toJSON方法重临的值作为参数去进行体系化。

美高梅开户网址 15

这一个函数就是那样子的。

实际Date类型可以平昔传给JSON.stringify做参数,其中的道理就是,Date类型内置了toJSON方法。

统计以及关于兼容性的难题

到此处终于把,JSON和JS中的JSON,梳理了一回,也对中间的底细和留心点进展了两回遍历,知道JSON是一种语法上衍生于JS语言的一种轻量级的数据沟通格式,也领会了JSON相对于一般的JS数据结构(越发是目的)的差异,更进一步,仔细地琢磨了JS中有关JSON处理的3个函数和细节。

而是遗憾的是,以上所用的3个函数,不包容IE7以及IE7此前的浏览器。有关包容性的钻探,留待以后呢。假诺想直接在行使上解决包容性,那么可以套用JSON官方的js,能够化解。

 

 

 

 

 

 

 

 

 

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图