A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 黑黑黑黑黑黑 于 2017-12-21 15:51 编辑

前言
无论是前端解析后端的数据还是做全栈的技术需要,你都可能多少需要知道些json的技术点,从json的标准格式到json的格式转换与传输,再到中转的处理。本文小编与你一起回顾json的最强知识点攻略。
概念
javascript的对象表示法(javascript object notation).json是用于存储和交换文本信息的语法,类似于xml,但是比xml更小、更快、更易解析。
语法
json语法是js对象表示法的子集。
  • 数据在名称、值对中
  • 数据由逗号分隔
  • 花括号保存对象
  • 方括号保存数组
json的数值包括的值类型
数字(整数或者浮点数),字符串(双引号中),逻辑值,数组,对象,null
var json={"name":"dcd";'obj':{...};"arr":[];......}
json对象
  • 用一对�花括号表示对象,
    { "name":"runoob", "alexa":10000, "site":null }
  • 你可以使用点号(.)来访问对象的值或者[] ,这点与js对象相同。毕竟是js对象表示法的子集。
  • for in遍历属性的时候只可以用【】的方式
    [JavaScript] 纯文本查看 复制代码
    var myObj = { "name":"runoob", "alexa":10000, "site":null };
    for (x in myObj) {
        console.log(myObj[x])
    }
    [backcolor=rgb(255, 255, 255)][font=-apple-system, "]
    嵌套的js对象,可以使用.或者【】
  • [JavaScript] 纯文本查看 复制代码
    let myObj = {
        "name":"runoob",
        "alexa":10000,
        "sites": {
            "site1":"www.runoob.com",
            "site2":"m.runoob.com",
            "site3":"c.runoob.com"
        }
    }
    let  x = myObj.sites.site1;
    // 或者
    x = myObj.sites["site1"];
  • json 对象和 json 字符串的区别
    [JavaScript] 纯文本查看 复制代码
    json 对象
    var str2 = { "name": "asan", "sex": "man" };
    json字符串
    var str1 = '{ "name": "deyuyi", "sex": "man" }';

json对象中的数组
  • 遍历数组中的值
    [JavaScript] 纯文本查看 复制代码
       let myObj = {
          "name": "网站",
          "num": 3,
          "sites": [
            { "name": "Google", "info": ["Android", "Google 搜索", "Google 翻译"] },
            { "name": "Runoob", "info": ["菜鸟教程", "菜鸟工具", "菜鸟微信"] },
            { "name": "Taobao", "info": ["淘宝", "网购"] }
          ]
        }
        for (let p in myObj.sites) {
          console.log(myObj.sites[p])
        }
  • 修改数组的值,你可以使用索引值来修改数组值
    myObj.sites[1] = "Github";
  • 删除,我们可以使用 delete 关键字来删除数组元素,和删除对象属性是一样的
    delete myObj.sites[1];
json对象转换方法(字符串转对象)
  • JSON.parse(text[, reviver])
    我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
    text:必需, 一个有效的 JSON 字符串。
    reviver: 可选,一个转换结果的函数, 将为对象的每个成员调用此函数。
    let str={ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }var obj = JSON.parse(str)
  • json不能存储对象,如果需求需要那么要把对象转为字符串,然后再转换为正常的对象(reviver方法针对特殊的键进行处理 然后返回),比如时间,其中键名要加引号。
    [JavaScript] 纯文本查看 复制代码
    let datestr='{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
    var obj = JSON.parse(datestr,function(key,value){
    if(key=='initDate'){
    return new Date(value);
    }else{
    return value
    }
    })
    console.log(obj)
  • 浏览器支持:主流浏览器都支持 JSON.parse() 函数:
    Firefox 3.5
    Internet Explorer 8
    Chrome
    Opera 10
    Safari 4
  • eval可以将js函数段执行也可以转换为对应的对象类型
    [JavaScript] 纯文本查看 复制代码
    var obj = eval ("(" + txt + ")");

对象转字符串~JSON.stringify()
JSON.stringify(value[, replacer[, space]])
  • 参数说明:
    value:
    必需, 一个有效的 JSON 字符串。
    replacer:
    可选。用于转换结果的函数或数组。
    如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined,则排除成员。根对象的键是一个空字符串:""。
    如果 replacer 是一个数组,则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时,将忽略 replacer 数组。
    space:
    可选,文本添加缩进、空格和换行符,如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格,如果 space 大于 10,则文本缩进 10 个空格。space 有可以使用非数字,如:\t。
  • 使用:转换的时候会把日期类型转换为字符串;转换的时候不支持函数,对于函数需要提前转换为字符串,使用函数对象自带的toString() 方法.不建议json中存储函数。可以用发布模块的方式使用工具函数。
    [JavaScript] 纯文本查看 复制代码
    var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
    var myJSON = JSON.stringify(obj);
    //对象中包含函数的时候
    var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
    obj.alexa = obj.alexa.toString();
    var myJSON = JSON.stringify(obj);
  • 浏览器支持:主流浏览器都支持 JSON.stringify() 函数
    Firefox 3.5
    Internet Explorer 8
    Chrome
    Opera 10
    Safari 4

json的使用
  • 文本转换为json对象 eval()
    var obj = eval ("(" + txt + ")");
  • json解析器
    json可以解释运行任何的js代码,这潜藏着一个安全问题,建议使用json自己的转换方法去执行。
jsonp的使用
jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。这种作为跨域常用方案非常常见。
[JavaScript] 纯文本查看 复制代码
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
    
    var html = '<ul>';
    for(var i = 0; i < data.length; i++)
    {
        html += '<li>' + data[i] + '</li>';
    }
    html += '</ul>';
    
    $('#divCustomers').html(html); 
});




0 个回复

您需要登录后才可以回帖 登录 | 加入黑马