您的位置:新葡亰496net > 新葡亰官网 > 深深精通,json相关函数详解

深深精通,json相关函数详解

发布时间:2019-07-14 05:13编辑:新葡亰官网浏览(172)

    深远掌握 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,是一种易于驾驭的轻量级数据沟通格式。

    • 以下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字符串将这些'friend'的全名全体化为大写字母,也正是把"Good"形成"GOOD",把"Man"产生"MAN",那么能够如何是好?

    作者们先来看三个JS中广泛的JS对象种类化成JSON字符串的主题材料。

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

    2. 基于文本的多寡格式

    JSON是依据文本的数目格式,相对于依赖二进制的数码,所以JSON在传递的时候是传递符合JSON这种格式(至于JSON的格式是何许我们第3局地再说)的字符串,大家常会称呼“JSON字符串”。

    依赖上述多少个难点,大家再沿波讨源问一下,JSON毕竟是如何东西?为何JSON正是便于数据沟通?JSON和JS对象的区分?JS中JSON.parseJSON.stringify和不遍布的toJSON,这多少个函数的参数和管理细节到底是如何的?

    试问:以下JS对象通过JSON.stringify后的字符串是何等的?

    二、语法规则

    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的格式攻克的带宽越来越小,那在有大气数据伏乞和传递的情形下是有显明优势的。

    应接步入此次“深挖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是一种轻量的数据沟通格式”的精通;

    • 然后来看常常被混为一谈的JSON和JS对象的界别;

    • 最终大家再来看JS中那多少个JSON相关函数具体的实行细节。

    图片 1

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

    若是首个参数是贰个数组,那么独有在数组中出现的性能才会被体系化进结果字符串,只要在这些提供的数组中找不到的性质就不会被含有进去,而那么些数组中设有不过源JS对象中不设有的天性会被忽视,不会报错。

    • 其七个参数用于美化输出——不建议用

    点名缩进用的空白字符,能够取以下多少个值
    是字符串的话,就用该字符串替代空格,最多取那些字符串的前12个字符
    尚无提供该参数 等于 设置成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都以能够的,直到后来察觉了贰个奇诡异怪的东西…

    企望全文能让如从前的作者同样对JSON一孔之见的亲能说清楚JSON是何等,也能自如应用JSON,不看调整台就精晓JS对象体系化成JSON字符串后输出是什么。

    第一个难点,假诺自己想在最终JSON字符串将以此'friend'的真名全体变为大写字母,也正是把"Good"形成"GOOD",把"Man"产生"MAN",那么能够怎么办?

      {"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的法定介绍能够去一下那边,官方介绍第一、二段已经很通晓地发挥了JSON是何许,笔者将JSON是何许提炼成以下多少个方面:

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

      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语法参考

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

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

    2. 依据文本的多寡格式

    JSON是依照文本的数码格式,相对于依靠二进制的数码,所以JSON在传递的时候是传递符合JSON这种格式(至于JSON的格式是如何大家第1局地加以)的字符串,大家常会称呼“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 第4个参数能够是函数,也能够是五个数组

    • 万一第2个参数是三个函数,那么种类化进程中的每一种属性都会被这么些函数转化和拍卖
    • 假设第二个参数是八个数组,那么独有隐含在那一个数组中的属性才会被系列化到终极的JSON字符串中
    • 倘使第4个参数是null,那功能上和空着没啥分歧,然而不想设置第4个参数,只是想设置第八个参数的时候,就足以设置第1个参数为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的某部数字,代表用多少个空白字符
    • 是字符串的话,就用该字符串替代空格,最多取这些字符串的前十二个字符
    • 从未有过提供该参数 等于 设置成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); /* 最三只取拾三个字符 { 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 = '"u2028u2029"';
    JSON.parse(code); // works fine
    eval(code); // fails
    

    那三个字符u2028u2029独家表示行分隔符和段落分隔符,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字符串中

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

    假定第4个参数是多少个数组,那么独有在数组中冒出的质量才会被种类化进结果字符串,只要在那一个提供的数组中找不到的习性就不会被含有进去,而以此数组中设有不过源JS对象中海市蜃楼的天性会被忽略,不会报错。

    2.依据文本的数量格式

        相关示例:

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

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

    • 是1-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); / 最八只取拾一个字符 { 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:

    深深精通,json相关函数详解。 

    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字符串的可读性。假若是数字,表示各个属性后边增加的空格(最多不超越13个);假如是字符串(不超过13个字符),则该字符串会增加在每行前边。

    广大时候都听到“JSON是JS的三个子集”那句话,并且那句话小编早已也一向那样认为,各个符合JSON格式的字符串你深入分析成js都以足以的,直到后来发觉了三个奇古怪怪的东西...

    深深精通,json相关函数详解。   相关代码示例:

    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的格式更严谨,所以抢先50%写的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 第一个参数能够是函数,也得以是三个数组

    • 如果第三个参数是贰个函数,那么体系化进程中的每一个属性都会被这么些函数转化和管理
    • 要是第2个参数是一个数组,那么唯有隐含在这些数组中的属性才会被系列化到结尾的JSON字符串中
    • 比方第二个参数是null,那效能上和空着没啥分化,不过不想设置第3个参数,只是想设置第八个参数的时候,就足以设置第叁个参数为null

    那第三个参数就算函数

    图片 7

    假若制订了第壹个参数是函数,那么那么些函数必须对每一种都有重临,那个函数接受三个参数,三个键名,一个是属性值,函数必须针对每二个原来的属性值都要有新属性值的回来。

    那么难点来了,假设传入的不是键值对的对象情势,而是方括号的数组情势吗?,比方下边包车型大巴friend变成那样:friend=["Jack","Rose"],那么这一个逐属性管理的函数接收到的key和value又是何等?

    即使是数组方式,那么key是索引值,而value是其一数组项,你能够在调整台在这些函数内部打印出来这几个key和value验证,记得要在函数内部再次来到value,不然会出错。

    那第四个参数即使数组

    图片 8

    假使第一个参数是一个数组,那么唯有在数组中冒出的习性才会被类别化进结果字符串,只要在这些提供的数组中找不到的特性就不会被含有进去,而这几个数组中留存可是源JS对象中不设有的质量会被忽略,不会报错。

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

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

    • 是1-10的有些数字,代表用多少个空白字符
    • 是字符串的话,就用该字符串替代空格,最多取这几个字符串的前11个字符
    • 不曾提供该参数 等于 设置成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,能够化解。

     

     

     

     

     

     

     

     

     

     

     

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:深深精通,json相关函数详解

    关键词: