• JSON详解


    关于JSON
    JSON是一种数据格式并不是编程语言。JSON是javascript的一个严格子集,利用了javascript的一些模式来表示格式化数据。
    并不是只有javascript才能使用JSON,毕竟它只是一种数据格式,很多编程语言都有针对JSON的解析器和序列化器。
    JSON语法
    JSON可以表示三种类型的值:简单值、数组、对象。
    1、简单值:可以在JSON中表示字符串、数字、布尔值、null,但是不支持undefined;
     1     console.log(JSON.parse('5')); // 5
     2     console.log(JSON.parse(5)); // 5
     3 
     4     console.log(JSON.parse('true')); // true
     5     console.log(JSON.parse(true)); // true
     6 
     7     console.log(JSON.parse('"hello"')); // "hello"
     8     console.log(JSON.parse("hello")); // 报错 因为hello不是JSON字符串
     9 
    10     console.log(JSON.parse('null')); // null
    11     console.log(JSON.parse(null)); // null
    12 
    13     console.log(JSON.parse(undefined)); // 报错 因为JSON不能表示undefined换用null代替

    NOTE:

      JSON字符串必须用双引号括起来;

      在js中表示JSON字符串时最好在外面加上单引号。

    2、数组:JSON数组采用的是javascript数组字面量的形式;

    1     console.log(JSON.parse('[5,true,"hello",null]')); // [5,true,"hello",null]
    2     console.log(JSON.parse('[5,true,"hello",null, undefined]')); // 报错 

    3、对象:与js对象字面量相比,JSON对象没有变量声明也没有末尾的分号。

        console.log(JSON.parse('{"num":5,"stop":true,"str":"hello","empty":null}'));// object{num:5,stop:true,str:"hello",empty: null}

    NOTE:JSON的属性必须用双引号

    JSON解析和序列化
    早期JSON解析基本都使用javascript的eval()函数。但是eval有一些性能和安全上的缺点,ECMAScript对解析JSON对象进行了规范,定义了全局对象JSON,支持的浏览器有标准浏览器和IE8+。对于不支持的浏览器可以引入json2.js文件。
    JSON对象有两个方法:stringify()、parse()
    1、stringify:将javascript对象序列化为JSON字符串
     1     console.log(JSON.stringify(5)); // 5
     2     console.log(JSON.stringify(true)); // true
     3     console.log(JSON.stringify('hello')); // "hello"
     4     console.log(JSON.stringify(null)); // null
     5     console.log(JSON.stringify(undefined)); // undefined可以被序列化为undefined后台获取到是undefined字符串
     6     //console.log(JSON.parse(JSON.stringify(undefined))); // 出错
     7 
     8     var aArr = [5, true, 'hello', null];
     9     console.log(JSON.stringify(aArr)); //[5,true,"hello",null]
    10     var aArr = [5, true, 'hello', null, undefined]; // 数组中的undefined值会被序列化为null而不会跳过
    11     console.log(JSON.stringify(aArr)); //[5,true,"hello",null, null]
    12 
    13     var oJson = {num: 5, stop: true, str: 'hello', nu: null};
    14     console.log(JSON.stringify(oJson)); //{"num":5,"stop":true,"str":"hello","nu":null}
    15     var oJson = {num: 5, stop: true, str: 'hello', nu: null, un:undefined};// 值为undefined的任何属性都会被跳过
    16     console.log(JSON.stringify(oJson)); //{"num":5,"stop":true,"str":"hello","nu":null}
    17     var oJson = {num: 5, stop: true, str: 'hello', nu: null, num: 8}; // 同名属性会被后面的覆盖
    18     console.log(JSON.stringify(oJson)); //{"num":8,"stop":true,"str":"hello","nu":null}
    19     var oJson = {num: 5, stop: true, str: 'hello', nu: null, fn: function(){}}; // 函数属性会被跳过
    20     console.log(JSON.stringify(oJson)); //{"num":5,"stop":true,"str":"hello","nu":null}
    21 
    22 
    23     function Person(age, name){
    24         this.age = age;
    25         this.name = name;
    26     }
    27     var oPerson = new Person(23, 'hum');
    28     console.log(JSON.stringify(oPerson)); //{"age":23,"name":"hum"}
    29     Person.prototype.sex = 1;
    30     var oPerson = new Person(23, 'hum');
    31     console.log(JSON.stringify(oPerson)); //{"age":23,"name":"hum"} 原型中的属性也不会被序列化

    NOTE:

      数组中的undefined会被序列化为null

      对象中的undefined属性会被跳过

      undefined会被序列化为undefined后台能获取到undefined字符串

      对象中的函数和原型中的属性都不能被序列化

      对象中的同名属性会被后面的覆盖(和js对象一样)

    2、parse:将JSON字符串解析会javascript对象(使用参考JSON语法部分)

    JSON的两个方法详解
    1、stringify
      JSON.stringify除了要序列化的对象外,还可以接受两个参数。第一个参数是过滤器,可以是数组,也可以是函数;第二个参数控制JSON字符串中缩进。
    过滤器:默认值为null,不会进行任何过滤。
      数组过滤器:如果过滤器是数组,那么结果中只包含数组中列出的属性。
    1     var oJson = { name: 'hum', age: 20, sex: 1};
    2     console.log(JSON.stringify(oJson, ['age', 'sex'])); // {"age":20,"sex":1}

      函数过滤器:如果过滤器是函数,函数可以接受两个参数(属性名和属性值)。结果可以通过函数来修改如果函数返回undefined那么相应的属性会被跳过。

     1     var oJson = { name: 'hum', age: 26, sex: 1, love: ['swing', 'jump']};
     2     console.log(JSON.stringify(oJson, function(k, v){
     3         switch (k){
     4             case 'age':
     5                 return v > 20 ? '成年': '未成年';
     6             case 'love':
     7                 return v.join(',');
     8             case 'sex':
     9                 return undefined;
    10             default :
    11                 return v;
    12         }
    13     })); // {"name":"hum","age":"成年","love":"swing,jump"}

    JSON字符串缩进:stringify的第三个参数可以是数字,表示每个级别缩进的空格数

     1     var oJson = { name: 'hum', age: 26, sex: 1, love: ['swing', 'jump']};
     2     console.log(JSON.stringify(oJson, null, 4));
     3     /*
     4      {
     5          "name": "hum",
     6          "age": 26,
     7          "sex": 1,
     8          "love": [
     9              "swing",
    10              "jump"
    11          ]
    12      }
    13     */

    如果第三个参数是字符串,那么这个字符串就是缩进字符(而不是空格)。注意缩进字符串不能超过10个字符否则只会显示前10个字符。

     1     var oJson = { name: 'hum', age: 26, sex: 1, love: ['swing', 'jump']};
     2     console.log(JSON.stringify(oJson, null, '--'));
     3     /*
     4      {
     5      --"name": "hum",
     6      --"age": 26,
     7      --"sex": 1,
     8      --"love": [
     9      ----"swing",
    10      ----"jump"
    11      --]
    12      } 
    13     */

    2、parse:parse方法可以接受另一个参数,该参数是函数,该函数可以传递两个参数(属性名和属性值)。如果该函数返回undefined表示要从结果中删除相应的属性,如果返回其他值,将该值插入到结果中。

     1     var oJson = { name: 'hum', age: 26, sex: 1, love: ['swing', 'jump'], birthday: '1988-01-12'};
     2     var sJson = JSON.stringify(oJson);
     3     console.log(sJson);//{"name":"hum","age":26,"sex":1,"love":["swing","jump"],"birthday":"1988-01-12"}
     4     console.log(JSON.parse(sJson));
     5     console.log(JSON.parse(sJson, function (k, v) {
     6         if(k == 'birthday'){ // 返回日期对象
     7             return new Date(v);
     8         }else if(k == 'sex'){ // sex不在了
     9             return undefined;
    10         }else{
    11             return v;
    12         }
    13     }));
  • 相关阅读:
    编写PHP规则
    phpmyadmin修改mysql数据库密码
    响应式设计:流式布局
    响应式设计:媒体查询
    html5、css3及响应式设计入门
    HTML5学习笔记五:html5表单
    HTML5学习笔记四:html5结构
    HTML5学习笔记三:aside元素,time元素与微格式
    css基础知识1——css基础语法、css选择器、css继承和层叠
    HTML基础知识5——<div>和<span>标签
  • 原文地址:https://www.cnblogs.com/tyxloveyfq/p/4303913.html
Copyright © 2020-2023  润新知