黑马程序员技术交流社区

标题: ［广州前端］Json最强攻略 [打印本页]

作者: 黑黑黑黑黑黑 时间: 2017-12-21 14:45
标题: ［广州前端］Json最强攻略
本帖最后由黑黑黑黑黑黑于 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])

}
```
嵌套的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 + '</li>';

    }

    html += '</ul>';

    

    $('#divCustomers').html(html); 

});

更多精彩前端资源请看

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2