zoukankan      html  css  js  c++  java
  • 读javascript高级程序设计13-JSON

    JSON是一个轻量级的数据格式,可以简化表示数据结构的工作量。在实际工作中,我们经常用它来传递数据,不过对于其使用的一些细节还是需要注意的。在ECMAScript5中定义了原生的JSON对象,可以用来将对象序列化为JSON字符串,或者将JSON数据解析为javascript对象。

    一、JSON语法

    JSON可以用来表示三种类型的值:简单值、对象和数组。对象和数组一般是JSON结构的最外层形式。

    1.JSON简单值

    可以在JSON中表示字符串、数值、布尔值、null。

    例如:

    5//数值类型
    
    "hello json"//字符串类型

    注意:

    ①JSON不支持js中的特殊值undefined;

    ②JSON字符串必须使用双引号,不能使用单引号。

    ③在实际应用中,JSON一般用来表示较复杂的数据结构,而简单值一般用作复杂数据结构中的一部分。

    2.对象

    JSON对象与JavaScript对象字面量对象的语法是类似的。

    //JavaScript对象字面量表示
    var jsWeatherinfo={
      city:"北京",
      cityid:"101010100",
      weather:"多云转晴"
    //JSON对象
    {
      "city":"北京",
      "cityid":"101010100",
      "weather":"多云转晴"
    }

    但是有几点不同:

    ①JSON中没有变量的概念,所以没有声明变量;

    ②JSON末尾没有分号;

    ③JSON对象中的属性名一定要使用双引号,而JavaScript对象中的属性引号是可有可无的。

    3.数组

    JSON数组采用的是javascript的数组字面量形式.

    //JavaScript数组
    
    var result=[1,true,"today"];
    
    //JSON数组
    
    [1,true,"today"]

    区别:JSON数组没有末尾的分号,也没有声明变量.

    二、JSON序列化

    1.JSON对象

    JavaScript的eval()函数可以用来解析JSON并返回JavaScript对象,不过eval()对JSON结构求值是存在风险的.因此,在ECMAScript5中新增了全局的JSON对象.JSON对象有两个方法:stringify()和parse().

    stringify()用于把JavaScript对象序列化为JSON字符串;

    parse()用于把JSON字符串解析为原生的JavaScript值.

    var weather={
    'city': '北京',
    'cityid': '101010100',
    'temp1': '31℃',
    'temp2': '20℃',
    'weather': '多云转晴',
    'img1': 'd1.gif',
    'img2': 'n0.gif',
    'ptime': '11:00'
    };
    var text=JSON.stringify(weather);
    var json=JSON.parse(text);
    json.weather;//"多云转晴"

    2.JSON.stringify()

    JSON.stringify()方法有三个参数:

    第一个参数是要序列化的JavaScript对象;

    第二个参数是过滤器,可以是一个数组或者函数;

    第三个参数是一个布尔值,表示是否在JSON字符串中保留缩进.

    ①过滤器

    如果过滤器参数是数组,那么stringify()结果中只包含该数组中列出的属性.

    var weather={
    'city': '北京',
    'cityid': '101010100',
    'temp1': '31℃',
    'temp2': '20℃',
    'weather': '多云转晴',
    'img1': 'd1.gif',
    'img2': 'n0.gif',
    'ptime': '11:00'
    };
    var text=JSON.stringify(weather,["city","weather","temp1","temp2"]);
    //结果:"{"city":"北京","weather":"多云转晴","temp1":"31℃","temp2":"20℃"}"

    如果过滤器是函数,传入的函数有两个参数:属性名和属性值.根据属性名来判断如何处理序列化对象中相应的属性.如果函数返回了undefined,那么相应的属性就会被忽略.

    var text1 = JSON.stringify(weather, function (key, value) {
    switch (key) {
    case 'temp1':
    return '最高温度' + value;
    case 'temp2':
    return '最低温度' + value;
    case 'img1':
    case 'img2':
    case 'ptime':
    return undefined;//属性被忽略
    default:
    return value;
    }
    });
    //结果:"{"city":"北京","cityid":"101010100","temp1":"最高温度31℃","temp2":"最低温度20℃","weather":"多云转晴"}"

    ③字符串缩进

    JSON.stringify()第三个参数用来控制结果中的缩进情况.

    如果缩进参数传入的是数值,表示每个json字段缩进的空格数,但是最大缩进空格数不超过10.

    var text2=JSON.stringify(weather,null,5)

    如果缩进参数传入的是字符串,则表示JSON字符串中每个级别都使用该字符串作为缩进字符.不过该字符串也不能超过10个字符长.

    var text3=JSON.stringify(weather,null,"--")

    ④toJSON()方法

    如果JSON.stringify()不能满足某些对象的序列化需求,可以给对象自定义toJSON方法,返回其自身的JSON数据格式。

    var weather={
    'city': '北京',
    'cityid': '101010100',
    'temp1': '31℃',
    'temp2': '20℃',
    'weather': '多云转晴',
      toJSON:function(){
      return this.city+this.weather+",最高温度"+this.temp1+",最低温度"+this.temp2;
      }
    };
    JSON.stringify(weather);//""北京多云转晴,最高温度31℃,最低温度20℃""

    综合以上几种情况,JSON.stringify()序列化对象的顺序如下:

    ①如果对象存在toJSON方法且能返回有效值,则调用该方法;否则,仍然按照默认顺序执行序列化。

    ②如果stringify()存在第二个参数,应用这个过滤器;

    ③对第②步返回的每个值进行序列化;

    ④如果存在第三个参数,执行相应的格式化。

    三、JSON解析

    JSON.parse()用来将JSON字符串解析成JavaScript对象。

    该方法第一个参数要解析的JSON字符串;

    第二个参数是一个函数还原函数。还原函数有两个参数key和value。如果还原函数返回undefined,则表示将该属性从结果中删除;如果返回其它值,则将该值插入到结果当中。在将日期字符串转换为Date对象时,经常用到还原函数.

    var json = {
      'city': '北京',
      'cityid': '101010100',
      'temp1': '19℃',
      'temp2': '32℃',
      'weather': '晴',
      'ptime': new Date()
    };
    var text = JSON.stringify(json);
    JSON.parse(text, function (key, value) {
      switch (key) {
      case 'ptime':
        return new Date(value);//返回日期对象
      case 'cityid':
        return undefined;//删除该属性
      default:
        return value;
      }
    });
  • 相关阅读:
    Chrome 扩展及应用开发
    nslinebreakbywordwrapping or nslinebreakcharwrapping
    动态计算uilabel的高度,
    长度还是靠谱,
    dictionary allkeys
    适配
    Linux 下phpstudy的安装使用补充说明
    mysql使用Navicat 导出和导入数据库
    Mysql命令mysql:连接Mysql数据库
    远程连接阿里云服务器ping不通ip解决方案
  • 原文地址:https://www.cnblogs.com/janes/p/3933397.html
Copyright © 2011-2022 走看看