以下JS对象通过,文章摘自此处

深切精晓 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字符串后输出是什么。

一、什么是json?

小说摘自这里

豆蔻梢头、JSON是风华正茂种格式,基于文本,优于轻量,用于交流数据

大器晚成经未有去过JSON的合法介绍能够去一下这里,官方介绍第大器晚成、二段已经很掌握地球表面述了JSON是何许,小编将JSON是何许提炼成以下几个地方:

json斯拉维尼亚语全称 JavaScript Object Notation,是大器晚成种易于精晓的轻量级数据沟通格式。

  • 以下js对象用JSON.stringify()施行后,是何等的?**
  • 怎么着将最终的JSON字符串里面姓名相关的源委全方位换到大写,相当于把"Good"--->"GOOD",把"Man"--->"MAN"

1. 一种多少格式

何以是格式?正是专门的学业你的数目要怎么表示,举个栗子,有私人民居房叫“二百六”,身高“160cm”,体重“60kg”,现在你要将以这个人的那些音信传给旁人依然其他什么事物,你有很各个采取:

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

上述全数接受,传递的数额是相仿的,可是你能够看来格局是足以有滋有味的,那正是各类差别格式化后的数据,JSON是里面豆蔻梢头种表示方法。

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

2. 基于文本的数量格式

JSON是依赖文本的多少格式,相对于依附二进制的多少,所以JSON在传递的时候是传递切合JSON这种格式(至于JSON的格式是哪些大家第二有的再说)的字符串,大家常会称呼“JSON字符串”。

二、语法则则

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

3. 轻量级的多寡格式

在JSON在此之前,有八个数目格式叫xml,今后依旧遍布在用,不过JSON特别轻量,如xml需求使用非常多标签,像上边的例子中,你能够显然看出xml格式的多寡中标签小编攻陷了成都百货上千空间,而JSON比较轻量,即生机勃勃律数量,以JSON的格式攻陷的带宽越来越小,那在有恢宏数额央浼和传递的情况下是有醒目优势的。

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

相关js函数介绍

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对象的代码示例:

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

那一个函数的函数签字是那样的:

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

下边将独家开展带1~3个参数的用法,最终是它在连串化时做的局地“聪明”的事,要特别注意。

  • ### 基本使用---仅需二个参数###

传扬三个JSON格式的JS对象或许数组,JSON.stringify({"name":"Good Man","age":18})再次来到叁个字符串"{"name":"Good Man","age":18}"

  • ### 第叁个参数可以是函数,也可以是一个数组###

借使第二个参数是八个函数,那么种类化进程中的每一个属性都会被那一个函数转变和处理

例如第三个参数是二个数组,那么唯有隐含在这里个数组中的属性才会被连串化到最后的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}

借使制订了第一个参数是函数,那么那些函数必得对每风流罗曼蒂克项皆有再次来到,那么些函数接受三个参数,三个键名,一个是属性值,函数必得针对每三个本来的属性值都要有新属性值的回到。

  • 第二个参数为数组
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”由于没有在原来的对象中找到而被忽略

借使第3个参数是二个数组,那么唯有在数组中冒出的天性才会被体系化进结果字符串,只要在这里个提供的数组中找不到的品质就不会被含有进去,而那个数组中留存可是源JS对象中不设有的习性会被忽视,不会报错。

  • 其多少个参数用于美化输出——不提出用

点名缩进用的空白字符,能够取以下多少个值
是字符串的话,就用该字符串替代空格,最多取这几个字符串的前十一个字符
还未有提供该参数 等于 设置成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"
   }
}

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

重重时候都听到“JSON是JS的叁个子集”那句话,并且那句话小编已经也一向如此感觉,各类符合JSON格式的字符串你深入分析成js都以能够的,直到后来意识了多少个奇离奇怪的东西…

  {"firstName":"John", "lastName":"Doe"}

JSON.stringify函数的此外功效#

  • 键名不是双引号的(包蕴未有引号大概是单引号卡塔尔国,会自行成为双引号;字符串是单引号的,会自动变成双引号
    末段三个属性前边有逗号的,会被活动去掉
  • 非数组对象的性情不能够确认保障以特定的顺序出以往连串化后的字符串中
    以此好掌握,也正是对非数组对象在终极字符串中不保险属性顺序和原本相符
  • 布尔值、数字、字符串的包装对象在系列化进度中会自动转变到对应的原始值
    也正是您的什么样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 参数中强制钦点满含了它们
  • 层出不穷的属性会被忽视

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字符串深入剖析为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("----");
});

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语法参照他事他说加以侦察

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

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

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分析时会报错。

三、json的操作

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

在JS中我们主要会接触到五个和JSON相关的函数,分别用于JSON字符串和JS数据结构之间的转速,二个叫JSON.stringify,它很聪明,聪明到您写的不适合JSON格式的JS对象都能帮您管理成切合JSON格式的字符串,所以你得领悟它到底干了什么,免得它只是布鼓雷门,然后令你Debug long time;另八个叫JSON.parse,用于转变json字符串到JS数据结构,它很严酷,你的JSON字符串要是组织地不对,是无法分析的。

而它们的参数不独有二个,就算大家平日用的时候只传入二个参数。

除此以外,还应该有一个toJSON函数,大家超少见到,不过它会影响JSON.stringify

  JSON 最袖手观察的用法之意气风发,是从 web 服务器上读取 JSON 数据(作为文件或当作 HttpRequest卡塔 尔(英语:State of Qatar),将 JSON 数据转变为 JavaScript 对象,然后在网页中动用该多少。

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

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

JavaScript

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

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

上面将各自打开带1~3个参数的用法,最终是它在系列化时做的有的“聪明”的事,要非常注意。

  相关代码示例:

1.1 基本采取——仅需三个参数

其风华正茂我们都会接纳,传入多少个JSON格式的JS对象可能数组,JSON.stringify({"name":"Good Man","age":18})回来二个字符串"{"name":"Good Man","age":18}"

能够看来自家我们传入的那些JS对象便是相符JSON格式的,用的双引号,也未尝JSON不收受的属性值,那么只要像起先那几个例子中的雷同,how to play?不急,大家先举轻巧的例子来证实这几个函数的多少个参数的含义,再来讲那一个难点。

  <!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,那成效上和空着没啥差距,但是不想设置第四个参数,只是想设置首个参数的时候,就能够安装第3个参数为null

那第1个参数假设函数

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对象中荒诞不经的属性会被忽视,不会报错。

        var obj = eval ("(" + txt + ")");

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

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

  • 是1-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); /* 最五只取12个字符 { 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}  
}
*/

笑笑就好,别那样用,种类化是为了传输,传输便是能越小越好,加无缘无故的缩进符,拆解深入分析困难(假若是字符串的话卡塔 尔(英语:State of Qatar),也减弱了轻量化那几个本性。

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

1.4 注意这一个函数的“小智慧”(首要卡塔 尔(英语:State of Qatar)

譬喻有其余不明确的情状,那么最棒的措施正是”Have a try”,调整台做下实验就明了。

  • 键名不是双引号的(包蕴没有引号只怕是单引号卡塔 尔(英语:State of Qatar),会自行产生双引号;字符串是单引号的,会自行成为双引号
  • 最终三脾质量前面有逗号的,会被活动去掉
  • 非数组对象的属性不可能保险以一定的相继出今后类别化后的字符串中
    以此好驾驭,也等于对非数组对象在终极字符串中不保障属性顺序和原来同样
  • 布尔值、数字、字符串的包装对象在体系化进度中会自动转变成对应的原始值
    也正是您的怎样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.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是最终深入分析完毕指标,因为到了最上层,已经未有真的的属性了。

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

本文由必威发布于必威-前端,转载请注明出处:以下JS对象通过,文章摘自此处

相关阅读