検索

軽量データ形式 - JSON

Feb 28, 2017 pm 03:09 PM

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

心を変えてフロントエンドを書いてみましょう
今日は 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: '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 がどれほど複雑であっても、オブジェクトのキー (属性) を追加する必要があります (二重) 引用符

配列

ただし、JavaScript では配列は厳密にオブジェクトに属します

が、通常は別の方法で扱います
配列リテラルを宣言する一般的な方法

var value = [123, 'abc', 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());

这样我们就可以使用得到的时间数据了

小结

没想到写了这么多
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)!


声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Python vs. JavaScript:パフォーマンスと効率の考慮事項Python vs. JavaScript:パフォーマンスと効率の考慮事項Apr 30, 2025 am 12:08 AM

PythonとJavaScriptのパフォーマンスと効率の違いは、主に以下に反映されています。1)解釈された言語として、Pythonはゆっくりと実行されますが、開発効率が高く、迅速なプロトタイプ開発に適しています。 2)JavaScriptはブラウザ内の単一のスレッドに限定されていますが、マルチスレッドおよび非同期I/Oを使用してnode.jsのパフォーマンスを改善でき、両方とも実際のプロジェクトで利点があります。

JavaScriptの起源:その実装言語の調査JavaScriptの起源:その実装言語の調査Apr 29, 2025 am 12:51 AM

JavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。

舞台裏:JavaScriptをパワーする言語は何ですか?舞台裏:JavaScriptをパワーする言語は何ですか?Apr 28, 2025 am 12:01 AM

JavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1)解析段階で抽象的構文ツリー(AST)を生成します。 2)ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3)実行段階でコンパイルされたコードを実行します。

PythonとJavaScriptの未来:傾向と予測PythonとJavaScriptの未来:傾向と予測Apr 27, 2025 am 12:21 AM

PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

Python vs. JavaScript:開発環境とツールPython vs. JavaScript:開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1)Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2)JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScriptはCで書かれていますか?証拠を調べるJavaScriptはCで書かれていますか?証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1)C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2)V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3)JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割:WebをインタラクティブでダイナミックにするJavaScriptの役割:WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1)ページを更新せずにコンテンツを変更できます。2)Domapiを介してWebページを操作する、3)アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4)ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript:接続が説明しましたCおよびJavaScript:接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1)CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2)ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。