jacascript JSON对象的就学

前言:那是作者学习之后自身的精晓与整治。假设有荒唐恐怕疑问的地点,请大家指正,小编会持续更新!

  JSON (javascript object notation) 全称是 javascript
对象表示法,它是1种数据交流的文本格式,而不是一种编制程序语言,用于读取结构化数据。2001年由DouglasCrockford提议,指标是代表繁琐笨重的 XML 格式。正确的 JSON
格式需求符合一定的语法规则,使用 www.json.cn
网址能够对 JSON 进行格式校验;

语法规则

  JSON 的语法能够象征以下两种档次的值:简单值、对象、数组。

简单值

  不难值使用与 javascript 相同的语法,能够在 JSON
中意味着字符串、数值、布尔值和 null;JSON 不帮衬 javascript 中的特殊值
undefined;

  字符串必须采纳双引号表示,不能够应用单引号。数值必须以十进制表示,且不可能利用
NaN 和 Infinity;

对象

  对象作为1种复杂数据类型,表示的是一组有序的键值对。而各样键值对中的值能够是简约值,也得以是犬牙交错数据类型的值;

  与 javascript 的对象字面量比较,JSON 有多个不等的地方:

  1. JSON 未有变量的概念
  2. JSON
    中,对象的键名必须放在双引号里面
  3. 因为 JSON 不是 javascript
    语句,所以并未有最后的分行

  同2个对象中不该出现四个同名属性;

数组

  数组也是一种复杂数据类型,表示一组有序的值的列表,能够透过数值索引来访问当中的值。数组的值也得以是随机档次——简单值、对象或数组

  JSON
数组也不曾变量和分公司,把数组和指标结合起来,能够组成更复杂的多少集合

  数组或对象最终二个成员的背后,不可能加逗号;

 

JSON对象

  JSON 之所以流行,是因为能够把 JSON 数据结构解析为使得的 javascript
对象;

  ECMAScript伍 对分析 JSON 的一举一动展开了正规化,定义了全局对象 JSON;IE七及以下浏览器不帮助;

  JSON 对象有四个法子:stringify() 和 parse()。那多少个点子分别用于把
JavaScript 对象种类化为 JSON 字符串和把 JSON 字符串解析为原生 JavaScript
值;

JSON.stringify()

  JSON.stringify() 方法用于将二个JavaScript 值转为 JSON
字符串。该字符串应该符合 JSON 格式,并且能够被 JSON.parse() 方法还原; 

  私下认可意况下,JSON.stringify()
输出的 JSON 字符串不包含别的层空间格字符或缩进 ;

  JSON.stringify()
方法会忽略对象的不得遍历属性;

        <script type="text/javascript">
            var mate = {
                "title":"javascript",
                "person":{
                    "name":"jack",
                    "age":"18"
                }
            };

            console.log(JSON.stringify(mate));//{"title":"javascript","person":{"name":"jack","age":"18"}}
            console.log(JSON.stringify(new Date()));//"2017-09-25T10:50:42.362Z"
        </script>

  

  JSON.stringify()
除了要类别化的 javascript
对象外,仍是能够接过其余四个参数,那四个参数用于钦命以区别的方法体系化
javascript
对象。第1个参数是个过滤器,能够是一个数组,也足以是3个函数;第二个参数是一个选用,表示是还是不是在
JSON 字符串中保留缩进;

  当 JSON.stringify()
方法的第3个参数是2个数组时,那时也就是贯彻叁个过滤器的作用;过滤器只对指标的第三层属性使得;

  过滤器对数组无效;

        <script type="text/javascript">
            var mate = {
                "title":"javascript",
                "person":{
                    "name":"jack",
                    "age":"18"
                }
            };

            console.log(JSON.stringify(mate,['bbb','person','aaaaaa','age']));//{"person":{"age":"18"}}
            //当 JSON.stringify() 方法的第二个参数是一个数组时,这时相当于实现一个过滤器的功能;过滤器只对对象的第一层属性有效;

            var arr = ["a","b"];
            console.log(JSON.stringify(arr,["c"]));//["a","b"]
            //过滤器对数组无效
        </script>

 

  JSON.stringify()
方法的第壹个参数也能够是三个函数。传入的函数接收几个参数,属性(键)名和属性值;

  属性(键)名只可以是字符串,而在值并非键值对儿结构的值时,键名能够是空字符串;

  那么些函数参数会递归处理全体的键;

        <script type="text/javascript">
            var data = {
                "title":"javascript",
                "person":{
                    "name":"jack",
                    "age":"18",
                    a:{
                        bbb:1111
                    }
                }
            };

            //属性名只能是字符串,而在值并非键值对儿结构的值时,键名可以是空字符串
            //这个函数参数会递归处理所有的键
            JSON.stringify(data,function(key,value){
                console.log("["+ key + "]:" + value);
                return value;
            })
            // []:[object Object]   第一次键名为空,键值是整个对象
            // [title]:javascript
            // [person]:[object Object]
            // [name]:jack
            // [age]:18
            // [a]:[object Object]
            // [bbb]:1111
        </script>

  函数再次回到的值就是相应键的值。如若函数重返了undefined或从不重临值,那么相应的品质会被忽略;

        <script type="text/javascript">
            var data = {
                "title":"javascript",
                "person":{
                    "name":"jack",
                    "age":"18",
                    a:{
                        bbb:1111
                    }
                }
            };

            //函数返回的值就是相应键的值。如果函数返回了undefined或没有返回值,那么相应的属性会被忽略
            JSON.stringify(data,function(key,value){
                if(typeof(value) === "string"){
                    return undefined;
                }
                console.log("["+ key + "]:" + value);
                return value;
            })
            // []:[object Object]
            // [person]:[object Object]
            // [a]:[object Object]
            // [bbb]:1111
        </script>

  

  JSON.stringify()
方法还是可以承受第四个参数,表示数据里面包车型客车缩进(暗中同意为0),用于充实重临的
JSON 字符串的可读性;

  假设是数字,表示每一个属性前边添加的空格(最多不超越十二个),3个 tab
是陆个空格,所以1般写2要么四;

  假若是字符串(不当先1三个字符),则该字符串会添加在每行后面;

        <script type="text/javascript">
            var data = {
                "title":"javascript",
                "person":{
                    "name":"jack",
                    "age":"18",
                    a:{
                        bbb:1111
                    }
                }
            };

            console.log(JSON.stringify(data,null,'数据'));
            //{
            //数据"title": "javascript",
            //数据"person": {
            //数据数据"name": "jack",
            //数据数据"age": "18",
            //数据数据"a": {
            //数据数据数据"bbb": 1111
            //数据数据}
            //数据}
            //}
        </script>

 

JSON.parse()

  JSON.parse() 方法用于将 JSON 字符串转化成 javascript 对象;前端获取 JSON
数据后,要先用它转载后才能操作数据;

  要是传入的字符串不是实用的 JSON 格式,JSON.parse方法将报错;

  JSON.parse()
方法也得以接到一个函数参数,在各个键值对上调用,那些函数被叫做还原函数(reviver)。该函数收取四个参数,一个键和贰个值,重返一个值;

  若是还原函数重返undefined,则意味要从结果中剔除相应的键;若是回到其余值,则将该值插入到结果中;

        <script type="text/javascript">
            var test = JSON.parse('{"title":"javascript","person":{"name":"Shane","age":"18"}}',function(key,value){
                if (key === ''){
                    return value
                }else if(key === 'person'){
                    return value;
                }
                return value;
            });

            console.log(test.person.name);//Shane
        </script>

  在将日期字符串转换为Date对象时,平日要用到恢复生机函数;

        <script type="text/javascript">
            var person = {
                "name": "Shane",
                "date": new Date(2017,10,10)
            }
            var jsonData = JSON.stringify(person);

            var bookCopy = JSON.parse(jsonData,function(key,value){
                if(key == 'date'){
                    return new Date(value);
                }
                return value;
            })
            console.log(bookCopy.date.getMonth());//10
        </script>