検索
ホームページウェブフロントエンドjsチュートリアルJSON データ形式と JSON 形式データ フィールド文字列の詳細な例 変換_javascript スキル

JSON (JavaScript Object Notation) は軽量のデータ交換形式です。 JSON は完全に言語に依存しないテキスト形式を使用するため、JSON は理想的なデータ交換言語となります。人間にとっては読み書きが簡単で、機械にとっては解析と生成が簡単です。

インフラストラクチャ

JSON は 2 つの構造から構成されます:

1. 名前と値のペアのコレクション。さまざまな言語では、オブジェクト、レコード、構造体、辞書、ハッシュ テーブル、キー付きリスト、または連想配列として理解されます。

2. 順序付けられた値のリスト。ほとんどの言語では、これは配列として理解されます。

基本的な例

簡単に言うと、JSON は JavaScript オブジェクトで表される一連のデータを文字列に変換します。これにより、関数間で簡単に渡したり、非同期アプリケーションの Web クライアントからサーバー側プログラムに渡したりすることができます。この文字列は少し奇妙に見えますが、JavaScript は簡単に解釈でき、JSON は「名前と値のペア」よりも複雑な構造を表現できます。たとえば、キーと値の単純なリストではなく、配列や複雑なオブジェクトを表現できます。

は、名前と値のペア

を表します。

最も単純な形式では、次の JSON を使用して「名前と値のペア」を表すことができます: { "firstName": "Brett" }
この例は非常に基本的なもので、実際には同等のプレーン テキストの「名前と値のペア」: firstName=Brett

よりも多くのスペースを占有します。

ただし、JSON は、複数の名前と値のペアをつなぎ合わせたときに真価を発揮します。まず、次のような複数の「名前と値のペア」を含むレコードを作成できます:

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" } 

構文的には、これは「名前と値のペア」に比べて大きな利点ではありませんが、この場合、JSON の方が使いやすく、読みやすいです。たとえば、上記の 3 つの値が同じレコードの一部であることが明らかになり、中括弧によって値が何らかの関連性を示します。

は配列

を表します

JSON は読みやすさを向上させるだけでなく、一連の値を表す際の複雑さを軽減します。たとえば、人の名前のリストを表現したいとします。 XML では、多くの開始タグと終了タグが必要です。一般的な名前と値のペア (このシリーズの以前の記事で説明したものなど) を使用する場合は、独自のデータ形式を作成するか、キー名を person1 の形式に変更する必要があります。 -ファーストネーム。
JSON を使用する場合は、複数のレコードを中括弧でグループ化するだけです:

{ "people": [ 
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }, 
{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb"}, 
{ "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" } 
]} 

これを理解するのは難しくありません。この例では、people という変数が 1 つだけあり、その値は 3 つのエントリの配列であり、各エントリは名、姓、電子メール アドレスを含む個人のレコードです。上の例は、括弧を使用してレコードを単一の値に結合する方法を示しています。もちろん、複数の値 (それぞれに複数のレコードが含まれる) は、同じ構文

を使用して表現できます。
{ "programmers": [ 
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }, 
{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb" }, 
{ "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" } 
], 
"authors": [ 
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" }, 
{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" }, 
{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" } 
], 
"musicians": [ 
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" }, 
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" } 
] } 

ここで最も注目すべき点は、複数の値を表すことができ、それぞれの値に複数の値が含まれていることです。ただし、レコード内の実際の名前と値のペアは、異なるメイン エントリ (プログラマ、作成者、ミュージシャン) 間で異なる場合があることにも注意してください。 JSON は完全に動的であるため、JSON 構造の途中でデータの表現方法を変更できます。

JSON 形式のデータを処理するときに従う必要がある事前定義された制約はありません。したがって、同じデータ構造内でデータの表現方法を変更することができ、同じものを異なる方法で表現することもできます。

アプリケーションのフォーマット

JSON 形式をマスターすれば、JavaScript での使用は簡単です。 JSON はネイティブ JavaScript 形式です。つまり、JavaScript での JSON データの処理には特別な API やツールキットは必要ありません。

JSON データを変数に代入する

たとえば、新しい JavaScript 変数を作成し、それに JSON 形式のデータ文字列を直接割り当てることができます。

var people = { "programmers": [ { "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }, 
{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb" }, 
{ "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" } 
], 
"authors": [ 
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" }, 
{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" }, 
{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" } 
], 
"musicians": [ 
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" }, 
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" } 
] } 

これは非常に簡単です。先ほど見たように、データは JSON 形式で含まれています。ただし、データにアクセスする方法がまだ明らかになっていないため、これでは十分ではありません。

データへのアクセス

明らかではないかもしれませんが、上記の長い文字列は実際には単なる配列であり、JavaScript 変数に配置することでこの配列に簡単にアクセスできます。実際、配列要素を表すにはドット表記を使用するだけです。したがって、プログラマ リストの最初のエントリの姓にアクセスするには、JavaScript で次のようなコードを使用するだけです:

people.programmers[0].lastName; 

注意,数组索引是从零开始的。所以,这行代码首先访问 people变量中的数据;然后移动到称为 programmers的条目,再移动到第一个记录([0]);最后,访问 lastName键的值。结果是字符串值 “McLaughlin”。

下面是使用同一变量的几个示例。

people.authors[1].genre // Value is "fantasy" 
people.musicians[3].lastName // Undefined. This refers to the fourth entry, and there isn't one 
people.programmers[2].firstName // Value is "Elliotte" 

利用这样的语法,可以处理任何 JSON 格式的数据,而不需要使用任何额外的 JavaScript 工具包或 API。

修改 JSON 数据

正如可以用点号和括号访问数据,也可以按照同样的方式轻松地修改数据:

people.musicians[1].lastName = "Rachmaninov"; 

在将字符串转换为 JavaScript 对象之后,就可以像这样修改变量中的数据。

转换回字符串

当然,如果不能轻松地将对象转换回本文提到的文本格式,那么所有数据修改都没有太大的价值。在 JavaScript 中这种转换也很简单:

String newJSONtext = people.toJSONString(); 

这样就行了!现在就获得了一个可以在任何地方使用的文本字符串,例如,可以将它用作 Ajax 应用程序中的请求字符串。

更重要的是,可以将任何JavaScript 对象转换为 JSON 文本。并非只能处理原来用 JSON 字符串赋值的变量。为了对名为 myObject的对象进行转换,只需执行相同形式的命令:

String myObjectInJSON = myObject.toJSONString(); 

这就是 JSON 与本系列讨论的其他数据格式之间最大的差异。如果使用 JSON,只需调用一个简单的函数,就可以获得经过格式化的数据,可以直接使用了。对于其他数据格式,需要在原始数据和格式化数据之间进行转换。即使使用 Document Object Model 这样的 API(提供了将自己的数据结构转换为文本的函数),也需要学习这个 API 并使用 API 的对象,而不是使用原生的 JavaScript 对象和语法。

最终结论是,如果要处理大量 JavaScript 对象,那么 JSON 几乎肯定是一个好选择,这样就可以轻松地将数据转换为可以在请求中发送给服务器端程序的格式。

概念比较

JSON和XML的比较

◆可读性

JSON和XML的可读性可谓不相上下,一边是简易的语法,一边是规范的标签形式,很难分出胜负。

◆可扩展性

XML天生有很好的扩展性,JSON当然也有,没有什么是XML能扩展,而JSON却不能。不过JSON在Javascript主场作战,可以存储Javascript复合对象,有着xml不可比拟的优势。

◆编码难度

XML有丰富的编码工具,比如Dom4j、JDom等,JSON也有提供的工具。无工具的情况下,相信熟练的开发人员一样能很快的写出想要的xml文档和JSON字符串,不过,xml文档要多很多结构上的字符。

◆解码难度

XML的解析方式有两种:

一是通过文档模型解析,也就是通过父标签索引出一组标记。例如:xmlData.getElementsByTagName("tagName"),但是这样是要在预先知道文档结构的情况下使用,无法进行通用的封装。

另外一种方法是遍历节点(document 以及 childNodes)。这个可以通过递归来实现,不过解析出来的数据仍旧是形式各异,往往也不能满足预先的要求。

凡是这样可扩展的结构数据解析起来一定都很困难。

JSON也同样如此。如果预先知道JSON结构的情况下,使用JSON进行数据传递简直是太美妙了,可以写出很实用美观可读性强的代码。如果你是纯粹的前台开发人员,一定会非常喜欢JSON。但是如果你是一个应用开发人员,就不是那么喜欢了,毕竟xml才是真正的结构化标记语言,用于进行数据传递。

而如果不知道JSON的结构而去解析JSON的话,那简直是噩梦。费时费力不说,代码也会变得冗余拖沓,得到的结果也不尽人意。但是这样也不影响众多前台开发人员选择JSON。因为json.js中的toJSONString()就可以看到JSON的字符串结构。当然不是使用这个字符串,这样仍旧是噩梦。常用JSON的人看到这个字符串之后,就对JSON的结构很明了了,就更容易的操作JSON。

以上是在Javascript中仅对于数据传递的xml与JSON的解析。在Javascript地盘内,JSON毕竟是主场作战,其优势当然要远远优越于xml。如果JSON中存储Javascript复合对象,而且不知道其结构的话,我相信很多程序员也一样是哭着解析JSON的。

◆实例比较

XML和JSON都使用结构化方法来标记数据,下面来做一个简单的比较。

用XML表示中国部分省市数据如下:

<&#63;xml version="1.0" encoding="utf-8"&#63;> 
<country> 
<name>中国</name> 
<province> 
<name>黑龙江</name> 
<cities>
<city>哈尔滨</city> 
<city>大庆</city> 
</cities> 
</province> 
<province> 
<name>广东</name> 
<cities> 
<city>广州</city> 
<city>深圳</city> 
<city>珠海</city> 
</cities> 
</province> 
</country> 

用JSON表示如下:

{ 
{name:"中国", province:[ { name:"黑龙江", cities:{ city:["哈尔滨","大庆"] }, 
{name:"广东", cities:{ city:["广州","深圳","珠海"] } 
} 

编码的可读性,xml有明显的优势,毕竟人类的语言更贴近这样的说明结构。json读起来更像一个数据块,读起来就比较费解了。不过,我们读起来费解的语言,恰恰是适合机器阅读,所以通过json的索引.province[0].name就能够读取“黑龙江”这个值。

编码的手写难度来说,xml还是舒服一些,好读当然就好写。不过写出来的字符JSON就明显少很多。去掉空白制表以及换行的话,JSON就是密密麻麻的有用数据,而xml却包含很多重复的标记字符。

JSON在线校验工具

前言
JSON格式取代了xml给网络传输带来了很大的便利,但是却没有了xml的一目了然,尤其是json数据很长的时候,我们会陷入繁琐复杂的数据节点查找中。
但是国人的一款在线工具 BeJson 给众多程序员带来了一阵凉风。

功能简介

1. JSON格式化校验
很多人在得到JSON数据后,一时没有办法判断JSON数据格式是否正确,是否少或多符号而导致程序不能解析,这个功能正好能帮助大家来完成JSON格式的校验。

2. JSON视图

想必很多程序员都会遇到当找一个节点的时候,会发现如果直接对着一行行数据无从下手,就算知道哪个位置,还要一个节点一个节点的往下找,万一一不留神又得从头开始找的麻烦事。

有了这个功能,一切JSON数据都会变成视图格式,一目了然,什么对象下有多少数组,一个数组下有多少对象。

这个功能非常实用。不光有视图功能还有格式化、压缩、转义、校验功能。总之很强大。

3. 压缩转义

程序员在写JSON语句测试用例的时候,很多时候为了方便直接写了个JSON字符串做测试,但是又陷入了无止境的双引号转义的麻烦中。这款功能集压缩、转义于一身,让你在写测试用例的时候,如鱼得水。

4. JSON在线编辑器

如果你现在的电脑刚巧没有装你所熟悉的编辑器,如果你想针对拿到的JSON数据的某个节点做数据修改时,这个功能可以满足你的需求。

5. 在线发送JSON数据

大家都知道,JSON用的最多的还是web项目的开发,那你要测试一个接口是否能准确的接受JSON数据,那你就得写一个页面发送JSON字符串,重复的做着这件事。随着这个功能的横空出世,你可以摆脱写测试页面了,因为这个功能可以将指定的JSON数据发送指定的url,方便吧。

6. JSON着色

很多人在写文档时,总希望文档能一目了然,但是面对着白底黑字的JSON数据总是提不起精神没关系,使用这个功能,所有的关键字都会被着色,数据结构一目了然。

7. JSON-XML互转

顾名思义,将JSON格式的数据转化成XML格式、或者XML格式的数据转化成JSON格式,一切都不是问题。

json格式数据域字符串相互转换实例代码

字符串和json格式数据能够进行相互转换,当然这个是有实际需求的,下面是两端进行转换的实例。

一.json格式数据转换成字符串:

var arr=[{id:'id',name:'Spring'},{id:'id2',name:'Jane'}]; 
var str=JSON.stringify(arr); 

要使用JSON.stringify()函数需要实现引用json2.js文件,这个在百度搜索下载即可。
输出结果:"[{id:'id',name:'Spring'},{id:'id2',name:'Jane'}]"

二.String转换为json格式数据:

var str="[{id:'id',name:'Spring'},{id:'id2',name:'Jane'}]"; 
var json=$.parseJSON(str); 

输出结果:[{id:'id',name:'Spring'},{id:'id2',name:'Jane'}]

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptの文字列文字を交換しますJavaScriptの文字列文字を交換しますMar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

カスタムGoogle検索APIセットアップチュートリアルカスタムGoogle検索APIセットアップチュートリアルMar 04, 2025 am 01:06 AM

このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。 驚くほど簡単です!検索をyに制限することができます

例JSONファイルの例例JSONファイルの例Mar 03, 2025 am 12:35 AM

この記事シリーズは、2017年半ばに最新の情報と新鮮な例で書き直されました。 このJSONの例では、JSON形式を使用してファイルに単純な値を保存する方法について説明します。 キー価値ペア表記を使用して、あらゆる種類を保存できます

10 jQuery構文蛍光物10 jQuery構文蛍光物Mar 02, 2025 am 12:32 AM

コードプレゼンテーションを強化する:開発者向けの10個の構文蛍光物 ウェブサイトやブログでコードスニペットを共有することは、開発者にとって一般的な慣行です。 適切な構文ハイライターを選択すると、読みやすさと視覚的な魅力を大幅に改善できます。 t

独自のAjax Webアプリケーションを構築します独自のAjax Webアプリケーションを構築しますMar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか? Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

8見事なjQueryページレイアウトプラグイン8見事なjQueryページレイアウトプラグインMar 06, 2025 am 12:48 AM

楽なWebページレイアウトのためにjQueryを活用する:8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。 この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

&#x27; this&#x27; JavaScriptで?&#x27; this&#x27; JavaScriptで?Mar 04, 2025 am 01:15 AM

コアポイント これは通常、メソッドを「所有」するオブジェクトを指しますが、関数がどのように呼び出されるかに依存します。 現在のオブジェクトがない場合、これはグローバルオブジェクトを指します。 Webブラウザでは、ウィンドウで表されます。 関数を呼び出すと、これはグローバルオブジェクトを維持しますが、オブジェクトコンストラクターまたはそのメソッドを呼び出すとき、これはオブジェクトのインスタンスを指します。 call()、apply()、bind()などのメソッドを使用して、このコンテキストを変更できます。これらのメソッドは、与えられたこの値とパラメーターを使用して関数を呼び出します。 JavaScriptは優れたプログラミング言語です。数年前、この文はそうでした

10 JavaScript&JQuery MVCチュートリアル10 JavaScript&JQuery MVCチュートリアルMar 02, 2025 am 01:16 AM

この記事では、JavaScriptとJQuery Model-View-Controller(MVC)フレームワークに関する10を超えるチュートリアルの厳選された選択を紹介します。これは、新年にWeb開発スキルを向上させるのに最適です。 これらのチュートリアルは、Foundatioのさまざまなトピックをカバーしています

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衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 Mac版

SublimeText3 Mac版

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

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!