今日はこの数学に本当に耐えられません

心を変えてフロントエンドを書いてみましょう
今日は JSON について少し知識を書いてみましょう

昔、インターネット上でデータを送信するための標準は XML でした
しかし、一般に、XML は煩雑すぎると誰もが考えています
その後、Web の発展に伴い、人々は JSON が JavaScript 構文のサブセットとして使用するのがより便利であることに気付きました
それで、JSON が標準になりました
今では、誰もがデータ形式として JSON を使用しています通信

JSON基本構文

(JSON: JavaScript Object Notation、JavaScript Object Notation)

JSON構文は大きく3種類の値に分かれます

単純な型の値: 文字列、数値、ブール値を表現可能値と null
オブジェクト: 順序のないキーと値のペアを表す複合データ型
配列: 順序付きの値のリストを表す複合データ型

JSON が行うことに注意してください未定義はサポートされず、関数もサポートされません

単純型の値

個別の基本型値は JSON としても表示できます

構文は JavaScript と同じです
注意すべき点が 1 つだけあります
JavaScript では、文字列は二重引用符または一重引用符で表現できます
ただし、JSON の文字列形式では二重引用符を使用する必要があります

オブジェクト

JSON は JavaScript 構文

のサブセットであるため、主に違いについて説明します
まず、見てみましょう一般的に使用されるオブジェクトリテラル宣言形式です

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

ログイン後にコピー

私たちの JavaScript オブジェクトは、属性に引用符を追加することも、追加しないこともできます

(通常のオブジェクトと JSON オブジェクトを区別するために、通常は引用符は追加されません)
しかし、JSON では、オブジェクトは (double) を必要とします属性の引用符
上記のオブジェクトは JavaScript で次のように記述することもできます。これは完全に同等です

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

ログイン後にコピー

JSON を使用します上記のオブジェクトが

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

ログイン後にコピー

であることを示します (JSON には変数の概念がなく、セミコロンもありません)

Ofもちろん、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 を定義します
2 つのメソッドがあります

stringify()
JavaScriptオブジェクト –> JSON 文字列
parse()
JSON 文字列 –> JavaScript オブジェクト

最も基本的な使い方はもちろんです

変換する変数をパラメータとして渡します
例 (この例は常にused)

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 文字列内では二重引用符になっています
そして属性値は次のとおりです未定義または関数の属性は自動的に無視されます
(プロトタイプのメンバーも無視されます)

ただし、JSON.stringify() はオブジェクト内の未定義と関数 (ES6 シンボルを含む) を自動的に無視します

しかし、配列は異なります
配列にはオブジェクトがありませんそして彼らは容赦なく扱われるでしょうそれを蹴飛ばしますが、nullを返します

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

ログイン後にコピー

JSON.parseを使用してJavaScriptオブジェクトに復元できます

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

ログイン後にコピー

これら2つのより深い使い方を見てみましょう関数

stringify シリアル化

シリアル化するオブジェクトを入力することに加えて、このメソッドは 2 つのパラメーターも受け入れることができます

1 つ目はフィルターであり、配列または関数にすることができます
2 つ目は JSON 文字列のインデントです指定できます

フィルター

配列フィルター

配列の形式は比較的単純です。必要なオブジェクト属性を指定できます

引き続き上記の例です

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

ログイン後にコピー

関数フィルター

渡す関数。キー (属性名) と値 (属性値) の 2 つのパラメーターを受け取ります

返される値は、対応するキーの値です
関数が未定義を返した場合、属性は無視されます

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());

ログイン後にコピー