今天這數學實在看不下去

來換換腦子，寫寫前端
今天就寫一個小知識JSON

在很久很久以前，XML是互聯網上傳輸資料的標準
但是大家普遍反映XML太繁瑣
再後來，隨著Web的發展
人們發現JSON作為JavaScript語法的子集使用更方便
於是JSON就成為了標準
現在大家都把JSON當作通訊的資料格式

#JSON基本語法

（JSON：JavaScript Object Notation，JavaScript對象表示法)
JSON語法大體分為三種類型值

簡單型別值：可表示字串、數字、布林值和null
#物件：複雜資料類型，表示無序鍵值對
陣列：複雜資料類型，表示有序值清單

注意JSON不支援undefined、不支援函數

簡單型別值

單獨的基本型別值也可以看做JSON
語法與JavaScript相同
只有一點要注意
在我們JavaScript中字串可以用雙引號表示，也可以用單引號表示
但是JSON中的字串格式必須使用雙引號

對象

由於JSON是JavaScript語法的子集
所以我主要說一下不太一樣的地方
先看一下我們常用的物件字面量聲明格式

var man = {
    name: &#39;payen&#39;,
    sex: &#39;male&#39;,
    age: 19};

登入後複製

我們JavaScript中對象可以給屬性加引號也可以不加
（為了區分普通對象與JSON對象，通常不加引號）
但在JSON中對像要求給屬性加（雙）引號
我們上面的物件在JavaScript中也可以這麼寫，完全等價

var man = {    "name": "payen",    "sex": "male",    "age": 19};

登入後複製

而用JSON表示上面的物件就是

{
    "name": "payen",
    "sex": "male",
    "age": 19}

登入後複製

（JSON中沒有變數的概念，沒有分號）
當然JSON中物件的值也可以是物件
不管多麼複雜的JSON，物件的鍵（屬性）都要加（雙）引號

陣列

雖然在我們JavaScript中，陣列嚴格來說屬於物件
但我們通常都會把它們區別對待
我們通用的宣告陣列字面量的方法

var value = [123, &#39;abc&#39;, true];

登入後複製

JSON也是相同的語法

[123, "abc", true]

登入後複製

再次強調，JSON沒有變數和分號

通常來說，陣列和物件是JSON的最外層形式
透過陣列、物件以及簡單型別值能夠建構各式各樣的JSON數據格式

JSON解析與序列化

JSON之所以流行，更重要的原因
便是它更容易解析為有用的物件

JSON物件

很早之前的JSON解析器用的是JavaScript的eval()
但是它是有風險的，可能會執行惡意程式碼
ES5規範了解析JSON的行為
定義了全域對象JSON
它有兩個方法

stringify()
JavaScript物件–> JSON字串
parse()
JSON字串–> JavaScript物件

最最基本的用法當然就是
我們把要轉換的變數當作參數穿進去
舉個例子（這個範例會一直用）

var man = {    &#39;name&#39;: "payen", <--
    sex: "male", <--
    "age": 19,    "school": {        "name": &#39;HUST&#39;,        "sex": undefined, <--
        "location": function(){} <--
    }
}
var str = JSON.stringify(man);
console.log(str);
console.log(typeof str);

登入後複製

下面我們看看控制台列印

#可以看到JSON.stringify真的回傳了JSON字串
我們無引號還有單引號的屬性在JSON字串中都變成了雙引號
並且屬性值為undefined或函數的屬性被自動忽略了
（原型成員更是被忽略掉）

雖然JSON.stringify()在物件中遇到undefined、function（也包括ES6的symbol）會自動被忽略
但是數組不一樣
數組沒有物件絕情把它們一腳踢開，而是返回null

console.log(JSON.stringify([123, undefined, null, function(){}]));

登入後複製

我們可以用JSON.parse還原為JavaScript物件

console.log(JSON.parse(str));

登入後複製

下面我們來看看這兩個函數更深的用法

stringify序列化

這個方法除了填待序列化物件之外，還可以接受兩個參數
其一是一個過濾器，可以是數組，也可以是函數
其二是可以指定JSON字串的縮排

過濾器

數組過濾器

數組的形式比較簡單，我們可以指定我們想要的物件屬性
還是我們上面的範例

var str = JSON.stringify(man,[&#39;name&#39;,&#39;sex&#39;]);
console.log(str);

登入後複製

#函數過濾器

我們傳入的函數接收連個參數，鍵（屬性名）與值（屬性值）
傳回的值就是對應鍵的值
若函數傳回undefined，屬性會被忽略

var str = JSON.stringify(man, function(key, value){
    if(key == &#39;name&#39;){        return &#39;abc&#39;;
    }    if(key == &#39;sex&#39;){        return;
    }    return value;
});
console.log(str);

登入後複製

注意这里最后一定要写return value; 才能正常显示其他值
如果使用了switch语句就写default: return value;

缩进

空格填充

另一个参数可以填写数字指定缩进的空格数（最大缩进10）

var str = JSON.stringify(man, null, 4);
console.log(str);

登入後複製

字符填充

我们也可以指定缩进字符

var str = JSON.stringify(man, null, "- - ");
console.log(str);

登入後複製

toJSON()方法

可能有些时候stringify不够满足我们的需求
这时我们可以给对象定义toJSON()方法
（但仍然是调用stringify()方法）
返回自身的JSON的数据格式
原生Date对象有默认toJSON()返回日期字符串（同Date中方法toISOString()结果相同）

我们可以给我们的对象添加一个toJSON属性

var man = {    ...,
    toJSON: function(){        return this.school;
    }
}
var str = JSON.stringify(man);
console.log(str);

登入後複製

这里再多说一句
很多同学误认为toJSON()返回的是JSON字符串
其实不是的
toJSON()返回的应该是一个适当的值，然后由JSON.stringify()对其进行序列化
所以toJSON()是返回一个能够被字符串化的安全JSON值
下面我们来看看调用JSON.stringify()发生了什么

序列化对象顺序

如果对象有toJSON()并且能获得有效值，优先调用，否则返回对象本身
若有第二个参数，对上一步返回的对象应用过滤器
对上一步返回的每个值进行相应序列化
若有第三个参数，执行序列化

parse解析

JSON.parse也可以接受另一个参数，它是一个函数
类似于上面序列化中过滤器的过滤函数
它被称作还原函数，同样接受键和值作为参数
首先我现在我们例子中的对象添加一个方法

var man = {    ...,
    releaseDate: new Date(2016,11,11)
}
var str = JSON.stringify(man);
console.log(str);

登入後複製

我们看到，由于Date对象存在toJSON()
序列化之后调用了toJSON()
我们看到了这样的字符串

console.log(JSON.parse(str));

登入後複製

这样的数据不是我们想要的
这样的情况我们怎么处理呢？
答案是使用还原函数

可以这样做

var msg = JSON.parse(str,function(key, value){
    if(key == &#39;releaseDate&#39;){        return new Date(value);
    }else{        return value;
    }
})
console.log(msg.releaseDate.getFullYear(),
            msg.releaseDate.getMonth(),
            msg.releaseDate.getDate());

登入後複製