ホームページ > 記事 > ウェブフロントエンド > 軽量データ形式 - JSON
今日はこの数学に本当に耐えられません
心を変えてフロントエンドを書いてみましょう
今日は JSON について少し知識を書いてみましょう
昔、インターネット上でデータを送信するための標準は XML でした
しかし、一般に、XML は煩雑すぎると誰もが考えています
その後、Web の発展に伴い、人々は JSON が JavaScript 構文のサブセットとして使用するのがより便利であることに気付きました
それで、JSON が標準になりました
今では、誰もがデータ形式として JSON を使用しています通信
JSON構文は大きく3種類の値に分かれます
構文は JavaScript と同じです
注意すべき点が 1 つだけあります
JavaScript では、文字列は二重引用符または一重引用符で表現できます
ただし、JSON の文字列形式では二重引用符を使用する必要があります
のサブセットであるため、主に違いについて説明します
まず、見てみましょう一般的に使用されるオブジェクト リテラル宣言形式です
var man = { name: 'payen', sex: 'male', 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 がどれほど複雑であっても、オブジェクトのキー (属性) を追加する必要があります (二重) 引用符
が、通常は別の方法で扱います
配列リテラルを宣言する一般的な方法
var value = [123, 'abc', true];JSON も同じ構文です
[123, "abc", true]もう一度強調しますが、JSON には変数とセミコロンがありません
配列、オブジェクト、単純な型の値を通じてさまざまな JSON データ形式を構築できます
、有用なオブジェクトに解析するのが簡単であることです
しかし危険です、悪意のあるコードが実行される可能性があります
ES5 は JSON を解析する動作を標準化します
グローバル オブジェクト JSON を定義します
2 つのメソッドがあります
JavaScriptオブジェクト –> JSON 文字列
JSON 文字列 –> JavaScript オブジェクト
変換する変数をパラメータとして渡します
例 (この例は常にused)
var man = { 'name': "payen", <-- sex: "male", <-- "age": 19, "school": { "name": 'HUST', "sex": undefined, <-- "location": function(){} <-- } } var str = JSON.stringify(man); console.log(str); console.log(typeof str);コンソールの出力を見てみましょう
引用符で囲まれていない属性と一重引用符で囲まれた属性は、JSON 文字列内では二重引用符になっています
そして属性値は次のとおりです未定義または関数の属性は自動的に無視されます
(プロトタイプのメンバーも無視されます)
しかし、配列は異なります
配列にはオブジェクトがありませんそして彼らは容赦なく扱われるでしょう それを蹴飛ばしますが、nullを返します
console.log(JSON.stringify([123, undefined, null, function(){}]));
console.log(JSON.parse(str));これら2つのより深い使い方を見てみましょう関数stringify シリアル化
1 つ目はフィルターであり、配列または関数にすることができます
2 つ目は JSON 文字列のインデントです指定できます
引き続き上記の例です
var str = JSON.stringify(man,['name','sex']); console.log(str);関数フィルター渡す関数。キー (属性名) と値 (属性値) の 2 つのパラメーターを受け取ります
返される値は、対応するキーの値です
関数が未定義を返した場合、属性は無視されます
var str = JSON.stringify(man, function(key, value){ if(key == 'name'){ return 'abc'; } if(key == 'sex'){ 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);
可能有些时候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()并且能获得有效值,优先调用,否则返回对象本身
若有第二个参数,对上一步返回的对象应用过滤器
对上一步返回的每个值进行相应序列化
若有第三个参数,执行序列化
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 == 'releaseDate'){ return new Date(value); }else{ return value; } }) console.log(msg.releaseDate.getFullYear(), msg.releaseDate.getMonth(), msg.releaseDate.getDate());
这样我们就可以使用得到的时间数据了
没想到写了这么多
JSON其实很简单
就是一个轻量级的数据格式
可以简化表示复杂数据结构的工作量
主要要掌握ES5的全局对象JSON中的两个方法JSON.stringify()和JSON.parse()
总结几个要记住的重点
JSON.stringify()
用于把JavaScript对象转换为JSON字符串
可填写额外两个参数-筛选数组/替换函数和指定缩进
对象遇到undefined、function、symbol(ES6)会忽略
数组遇到undefined、function、symbol(ES6)会返回null
JSON.parse()
用于把JSON字符串转换为JavaScript对象
可填写额外一个参数-还原函数
以上就是轻量级数据格式——JSON的内容,更多相关内容请关注PHP中文网(www.php.cn)!