Json知识点学习

前言

无论是前端解析后端的数据还是做全栈的技术需要，你都可能多少需要知道些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遍历属性的时候只可以用[ ]的方式

var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
    console.log(myObj[x])
}

嵌套的js对象，可以使用.或者[ ]

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 字符串的区别

json 对象
var str2 = { "name": "asan", "sex": "man" };
json字符串
var str1 = '{ "name": "deyuyi", "sex": "man" }';

json对象中的数组

遍历数组中的值

   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方法针对特殊的键进行处理然后返回），比如时间,其中键名要加引号。

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函数段执行也可以转换为对应的对象类型
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中存储函数。可以用发布模块的方式使用工具函数。

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 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。这种作为跨域常用方案非常常见。

$.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); 
});

前言

概念

语法