關於JSON的那些事兒

時間  2019-11-16
標籤 關於 json 那些 事兒 欄目 JavaScript 简体版
原文   原文鏈接

JSON的那些事兒javascript

 

曾經有一段時間，XML是互聯網上傳輸結構化數據的事實標準，其突出特色是服務器與服務器間的通訊。可是業內很多人認爲XML過於繁瑣、冗長，後面爲了解決這個問題也出現了一些方案，可是因爲其結構很嚴格，這些問題仍是不能從根本上獲得解決。隨着Web的不斷髮展，慢慢的出現了一種輕量級的數據格式——JSON，它的出現受到不少編程人員的喜好，這篇文章主要講關於JSON的那些事。java

　　（注：這邊文章主要討論的是javascript中的JSON操做，故不少東西只是針對Javascript來講）jquery

【JSON的歷史】正則表達式

　　JSON的全稱：JavaScript Object Notation，翻譯過來的意思是Javascript對象表示法。它基於JavaScript Programming Language,Standard ECMA-262 3rd Edition - December 1999的一個子集，做爲一種輕量級的數據交換格式，JSON早在2000年前就已經在使用了。2006年Douglas Crockford把JSON提交給IETF後，JSON開始做爲Javascript的一個嚴格的子集，它用Javascript中的一些模式來表示結構化數據。而在Javascript中，JSON無疑是更好的讀寫結構化數據的方式。編程

【JSON的特色】json

　　一、JSON是一種輕量級的數據交換格式（不是一種編程語言）；數組

　　二、JSON是存儲和交換文本信息的語法，相似於XML，採用鍵值對的方式來組織，從而易於閱讀和編寫，同時也易於機器解析和生成；瀏覽器

　　三、JSON採用與編程語言無關的文本格式，可是也使用了類C語言（包括C，C++，C#，Java，JavaScript，Perl，Python等）的習慣，這些特性使JSON成爲理想的數據交換格式（獨立於語言，不少編程語言都能解析JSON，只要按JSON的規則就好了）；服務器

　　四、JSON能夠用Javascript內建的方法直接進行解析，從而轉換成Javascript也很是方便數據結構

【JSON的優勢】

　　一、基於純文本，跨平臺傳遞極其簡單；

　　二、Javascript原生支持，後臺語言幾乎所有支持；

　　三、輕量級數據格式，佔用 字符數量極少，特別適合互聯網傳遞；

　　四、可讀性較強，雖然比不上XML那麼一目瞭然，但在合理的依次縮進以後仍是很容易識別的；

　　五、容易編寫和解析，固然前提是你要知道數據結構。

【JSON的語法】

　　JSON的語法能夠表示如下三種類型的值：

　　　　*對象：與Javascript相似（後面會有詳細介紹）。

　　　　*數組：與Javascript相似（後面會有詳細介紹）。

　　　　*簡單值：使用與Javascript相同的語法，能夠在JSON中表示字符串、數值、布爾值和null，可是JSON不支持undefined。

　　[對象]

　　　　規則：對象是一個無序的「‘名稱/值’對」集合。一個對象以「{」（左括號）開始，「}」（右括號）結束。每一個「名稱」後跟一個「:」（冒號）；「‘名稱/值’ 對」之間使用「,」（逗號）分隔。

　　　　圖像表示，如圖：

　　　　示例：{"name":"foodoir","age":21}

　　　　與Javascript的比較：

　　　　　　在Javascript中的寫法（對象的面向字面量寫法）：var obj = {"name":"foodoir","age":21};或是var obj = {name:"foodoir",age:21};

　　　　與Javascript的區別：

　　　　　　一、JSON中沒有變量聲明（JSON中沒有變量這個概念）；

　　　　　　二、JSON中沒有末尾的分號；

　　　　　　三、JSON的屬性上面要加雙引號，而Javascript中可加可不加；

　　　　注意事項：

　　　　　　一、同一個對象中絕對不該該出現兩個同名屬性（父對象和子對象中的屬性能夠同名）！

　　　　　　二、屬性的值能夠是簡單的值，也能夠是複雜的值（好比說在對象中嵌入對象）！

　　　　　　三、最後一個屬性的後面不該有逗號，不然會報錯！

　　　　　　四、複雜的值能夠是數字、字符串、布爾值、對象、數組和null（沒有undefined和函數）

　　　　代碼示例：

{
    "name": 'foodoir',
    "age": 21,
    "school":{
    	"name":"XXX College",
    	"location":"Hunan"
    }
    //屬性的值能夠是複雜的類型
}
//雖說有兩個name，可是它們分別在不一樣的對象中

/*比較最後多一個逗號的效果*/
{
    "name": 'foodoir',
    "age": 21, //注意，這裏多了一個逗號
}
//在JSON中直接致使語法錯誤

var obj = {
    "name": 'foodoir',
    "age": 21, //注意，這裏多了一個逗號
};
//在標準瀏覽器、IE8+ 中，都能正常的執行，但在IE六、7中，卻會報錯

 　　　　

　　[數組]

　　　　規則：數組是值（value）的有序集合。一個數組以「[」（左中括號）開始，「]」（右中括號）結束。值之間使用「,」（逗號）分隔。

　　　　圖像表示，如圖：

　　　　示例：["foodoir",21,true]

　　　　與Javascript的比較：

　　　　　　在Javascript中的寫法（數組的面向字面量寫法）：var arr = ["foodoir",21,true];

　　　　與Javascript的區別：

　　　　　　JSON中的數組和Javascript中的數組基本一致

　　　　注意事項：

　　　　　　一、數組能夠和對象結合起來，構成更復雜的數據集合

　　　　　　二、在JSON中最後一個屬性的後面不該有逗號，不然會報錯！

　　　　　　三、數組中間能夠是數字、字符串、布爾值、對象、數組和null（沒有undefined和函數）

 　　　 代碼示例：

[
	{
		"title":"HTML",
		"authors":{
			"foodoir.H"
			},
		"year":2001
	}
	{
		"title":"CSS",
		"authors":{
			"foodoir.C"
			},
		"year":2002
	}
	{
		"title":"JAVASCRIPT",
		"authors":{
			"foodoir.J"
			},
		"year":2003
	}
]
//多個數組和對象的結合，造成了更復雜的數據集合


['sheep', 'cat', 'dog',]//多了一個逗號
//在JSON中直接致使語法錯誤
var animal = ['sheep', 'cat', 'dog',];//一樣多了一個逗號
//在瀏覽器中不會報錯，可是，確會有個很嚴重的問題。IE六、七、8中會認爲animal.length等於4，其中的元素爲 'sheep', 'cat', 'dog', undefined

 

　　[簡單值]

　　　　規則：值（value）能夠是雙引號括起來的字符串（string）、數值(number)、布爾值（true/false）、 null、對象（object）或者數組（array），只能是這七種類型。這些結構能夠嵌套。

　　　　圖像表示，如圖：

　　　　示例："foodoir" 25 true false null {"name":"foodoir"} [1,2,3]

　　　　與Javascript的比較：

　　　　　　與Javascript中的寫法基本一致

　　　　與Javascript的區別：

　　　　　　（略……）

　　　　注意事項：

　　　　　　一、JSON不支持Javascript中特殊的值undefined

　　　　　　二、JSON也不支持Javascript中的function

　　對於簡單值中間的字符串（string）和數值(number)有必要拿出來單獨提一提。

 

　　[字符串]

　　　　規則：字符串（string）是由雙引號包圍的任意數量Unicode字符的集合，使用反斜線轉義。一個字符（character）即一個單獨的字符串（character string）。

　　　　圖像表示，如圖：

　　　　示例：{"string":"true \" false"}

　　　　與Javascript的比較：

　　　　　　在Javascript中的正則表達式（RegExp）比較類似

　　　　注意事項：

　　　　　　一、英文雙引號括起來，不能用單引號，也不能沒有；

　　　　　　二、字符串中不能單獨出現雙引號（」） 和右斜槓（「\」）；

　　　　　　三、若是要打雙引號或右斜槓，須要使用「右斜槓+字符」的形式，例如 \」 和 \\其它轉移字符也是如此

　　　　　　四、支持任何UNICODE字符。

　　　　在這裏，推薦一個比較好用的檢驗JSON格式的網址：http://www.json.cn

　　　　咱們能夠在線檢驗咱們的JSON，而且在右邊區域會有相應的錯誤的提示。這樣更方便咱們對於JSON的使用。

　　[數字]

　　　　規則：數值（number）也與C或者Java的數值很是類似。除去不曾使用的八進制與十六進制格式。除去一些編碼細節。

　　　　圖像表示，如圖：

　　　　示例：1 2.01 -200 3e4 3e-4

　　　　與Javascript的比較：

　　　　　　JSON中不支持八進制和十六進制格式，而在Javascript中能很好的支持。

　　　　注意事項：

　　　　　　八進制和十六進制

　　　　一樣，咱們也能夠用以前的工具來檢測咱們的JSON代碼。

 

 

 

 到這裏，JSON的基本語法都講的差很少了，後面咱們將繼續介紹字符串和對象間的轉化、JSON和XML的轉換、Ajax和JSON、以及GeoJSON和TopoJSON。

--------------------------------------------------分界線--------------------------------------------------------------------

 若是你想了解更多關於JSON的，請繼續往下看

 

【字符串和對象間的轉換】

 

[ 解析 ]

 

　　將符合 JSON 語法規則的字符串轉換成對象的過程叫作解析

　　不一樣的編程語言都提供瞭解析 JSON 字符串的方法，在這裏主要講解 JavaScript 中的解析方法。主要有三種：

　　　　- 使用 eval()

　　　　- 使用 JSON.parse()

　　　　- 使用第三方庫，例如 JQuery 等

　　下面咱們來依次介紹這三種方法：

1、eval()的使用

　　a) 在Javascript中，eval() 函數的參數是一個字符串，其做用是直接執行其中的 JavaScript 代碼

　　b) eval() 可以解析 JSON 字符串（從這裏也能夠看得出，JSON 和 JavaScript 是高度嵌合的）

　　示例以下：

/*Javascript*/
var str = "console.log('hello world')";
eval(str);//hello world
//從這裏能夠看出，eval函數會直接對裏面的代碼執行操做

/*JSON*/
var str = '{"name": "foodoir", "age": 21}';
var result = eval ("(" + str + ")");
console.log(result);//Object age : 21 name : "foodoir"

var str = '{"name": "console.log('foodoir')", "age": 21}';
var result = eval ("(" + str + ")");
console.log(result);// Uncaught SyntaxError: Unexpected identifier
//從這裏能夠看出，eval函數會直接對裏面的代碼執行操做

　　注意：

　　　　一、eval() 雖然可以解析 JSON 字符串，可是如今已經不多直接使用 eval() 來解析了，若是您的瀏覽器版本真的是很舊，可能才須要這個方法。此外，eval() 是一個相對危險的函數，由於字符串中可能含有未知因素。

　　　　二、注意 eval() 的參數，在字符串兩旁加了括號，這是必須的，不然會報錯（緣由：由於 JSON 字符串是被大括號（「{}」）包圍的，直接放到 eval() 會被當成語句塊）

2、JSON.parse()的使用　

　　a) JSON.parse() 能夠有第二個參數，是一個函數。此函數有兩個參數：name 和 value，分別表明名稱和值。當傳入一個 JSON 字符串後，JSON 的每一組名稱/值對都要調用此函數。該函數有返回值，返回值將賦值給當前的名稱（name）。

　　b) 利用第二個參數，能夠在解析 JSON 字符串的同時對數據進行一些處理

 

　　示例以下：

var str = '{"name": "foodoir", "age": 21}';
var obj = JSON.parse(str, fun);
function fun(name, value){	
	if( name == "age" )
		value = 14;
	return value;
}
console.log(obj);//Object {name: "foodoir", age: 14}

 

 　　注意：

　　　　一、如今絕大多數瀏覽器都以支持 JSON.parse()，是推薦使用的方式；

　　　　二、若是輸入了不符合規範的字符串，會報錯（建議配合以前的在線測試工具一塊兒使用）

 　補充：

　　　　爲了區別JSON.stringify()接收的替換（過濾）函數，在這裏出現了一種還原函數（接收兩個參數，一個鍵和一個值，而且返回一個值）。若是還原函數返回undefined，則表示要從結果中刪除相應的鍵；若是返回其餘值，則將該值插入到結果中。代碼示例以下：

var book = {
		"title":"HTML",
		"authors":[
			"foodoir.H"
			],
		year:2001,
		releaseDate:new Date(2016,9,22)//先爲book對象增長一個releaseDate屬性，該屬性保存着Date對象
};

var jsonText = JSON.stringify(book);//通過序列化後變成有效的JSON字符串

var bookCopy = JSON.parse(jsonText,function(key,value){//在bookCopy中將JSON字符串解析爲Date對象
	if(key == "releaseDate"){
		return new Date(value);
	}else{
		return value;
	}
});
//結果就是bookCopy.releaseDate屬性中保存了一個Date對象，而後後面才能基於Date對象調用getFullYear方法
alert(bookCopy.releaseDate.getFullYear());

 　　綜合練習：

var json = '{"staff":[{"name":"foodoir","age":21},{"name":"jake","age":22},{"name":"rooce","age":23}]}';
var jsonobj = eval('('+json+')');
alert(jsonobj.staff[0].name);//foodoir

var jsondata = '{"staff":[{"name":"foodoir","age":21},{"name":"jake","age":22},{"name":"rooce","age":23}]}';
var jsonobj = JSON.parse(jsondata);
alert(jsonobj.staff[0].name);//foodoir

var json = '{"staff":[{"name":"foodoir","age":alert(123)},{"name":"jake","age":22},{"name":"rooce","age":23}]}';
var jsonobj = eval('('+json+')');
alert(jsonobj.staff[0].name);//先是123		後是foodoir
//eval不會管json裏面是否合法，而且會執行裏面的方法

var jsondata = '{"staff":[{"name":"foodoir","age":alert(123)},{"name":"jake","age":22},{"name":"rooce","age":23}]}';
var jsonobj = JSON.parse(jsondata);
alert(jsonobj.staff[0].name);//報錯

3、第三方庫，例如 JQuery

　　　　在這裏不作介紹，後面會有專門的博文關於jquery處理JSON的介紹。

 

[ 序列化 ]

 

　　序列化，指將 JavaScript 值轉化爲 JSON 字符串的過程。

　　JSON.stringify() 可以將 JavaScript 值轉換成 JSON 字符串。JSON.stringify() 生成的字符串能夠用 JSON.parse() 再還原成 JavaScript 值。

　　表示方法：

　　　　JSON.stringify(value[, replacer[, space]])

　　參數的含義:

　　　　value：必選參數。被變換的 JavaScript 值，通常是對象或數組。

　　　　replacer：能夠省略。有兩種選擇：函數或數組。

　　　　　　  - 若是是函數，則每一組名稱/值對都會調用此函數，該函數返回一個值，做爲名稱的值變換到結果字符串中，若是返回 undefined，則該成員被忽略。

　　　　　　  - 若是是數組，則只有數組中存在名稱纔可以被轉換，且轉換後順序與數組中的值保持一致。

　　　　space：能夠省略。這是爲了排版、方便閱讀而存在的。能夠在 JSON 字符串中添加空白或製表符等。

　　代碼示例：

var obj = {
	name:"foodoir",
	age:21,
	t:true,
	f:false,
	n:null,
	u:undefined,
	f:function(){
		return 1;
	},
	arr:[function(){}]
};
console.log(obj);

var jsonstr = JSON.stringify(obj);
console.log(jsonstr);

 

　　結果顯示：

　　當傳入的參數不一樣時，所控制的結果也會不一樣，下面咱們介紹兩種在不一樣參數的狀況下結果存在的變化。

　　1、 過濾結果

　　　　若是過濾器參數是數組，那麼JSON.stringify()的結果中將只包含數組中列出的屬性；若是第二個參數是函數，行爲會稍有不一樣，下面咱們直接看下面的例子：

var book = {
		"title":"Javascript",
		"authors":[
			"foodoir JavaScript"
			],
		edition:3,
		year:2001
};

var jsonText1 = JSON.stringify(book,["title","edition"]);
console.log(jsonText1);//{"title":"Javascript","edition":3}
//結果分析：數組中只包含兩個字符串："title"和"edition"，故在結果中序列化的對象中的屬性是對應的

var jsonText2 = JSON.stringify(book,function(key,value){
	switch(key){
		case "authors":
			return value.join(",");//返回值將數組鏈接爲字符串
		case "year":
			return 5000;//返回值爲5000
		case "edition":
			return undefined;//返回值爲undefined，直接跳過
		default:
			return value;//
	}
});
console.log(jsonText2);//{"title":"Javascript","authors":"foodoir JavaScript","year":5000}
//結果分析：在這裏，函數過濾器根據傳入的鍵來決定結果，好比鍵爲"year"，其返回值爲5000

 

 

 

　　2、 字符串縮進

　　　　JSON.stringify()方法的第三個參數用於控制結果中的縮進和空白符。若是這個參數是一個數值，那它表示的是每一個級別縮進的空格數，固然，咱們還能夠製表符或者短劃線來控制縮進。咱們直接看下面的例子：

var book = {
		"title":"Javascript",
		"authors":[
			"foodoir JavaScript"
			],
		edition:3,
		year:2001
};

var jsonText1 = JSON.stringify(book,null,4);
console.log(jsonText1);

var jsonText2 = JSON.stringify(book,null,"------");
console.log(jsonText2);

 

 　　結果顯示：

　　注意：縮進字符最長不能超過10個字符長，若是字符長度超過了10個，結果中只出現前10個字符。　

[擴充]

　　在這裏，咱們還要介紹一種方法：toJSON()方法

　　　　有時候，咱們並不能知足JSON.stringify()方法對某些對象進行自定義化的需求，這時咱們能夠給對象定義toJSON()方法，返回其自身的JSON數據格式。代碼示例以下：

var book = {
		"title":"Javascript",
		"authors":[
			"foodoir JavaScript"
			],
		edition:3,
		year:2001,
		toJSON:function(){
			return this.title;
		}
};

var jsonText1 = JSON.stringify(book,null,4);
console.log(jsonText1);//Javascript

var jsonText2 = JSON.stringify(book,null,"------");
console.log(jsonText2);//Javascript

 　　　　這兩種方法返回的都是Javascript，其緣由在於：toJSON方法返回的是圖書的書名（this.title=》book.title）。還可讓toJSON方法返回任何值，它都能正常工做。從而toJSON方法能夠做爲函數過濾器的補充。假設把一個對象傳入JSON.stringify()，序列化該對象的順序以下：

　　一、若是存在toJSON方法並且能經過它取到有效值，則調用該方法；不然，返回對象自己；

　　二、若是提供了第二個參數，應該用這個函數過濾器。傳入函數過濾器的值是第1步返回的值；

　　三、對第2步返回的每一個值進行相應的序列化；

　　四、若是提供了第三個參數，執行相應的格式化。

 

【JSON和XML的轉換】

 　　儘管JSON和XML中有不少類似之處，可是它們之間想要轉化是很是複雜的，這時候咱們就須要框架和組件來幫忙了。在對JSON和XML進行轉換以前，咱們須要在網上下載這三個資源。一個須要在jquery官網下載一個穩定的jquery版本，而後須要在前面介紹的www.json.cn裏面下載兩個文件jquery.json2xml.js 和 jquery.xml2json.js （右側點擊JSON組件，查找後即可下載）。有了工具後，兩者間的轉化將會變得很簡單。（關於XML咱們這裏不作專門的介紹，能夠本身在網上查閱相關資料）

　　XML 字符串轉換成 JSON 對象
　　　　關鍵代碼：$.xml2json(str);

　　　　須要注意的是：咱們能夠用前面的方法對咱們的結果進行操做。
　　JSON 對象轉換成 XML 字符串
　　　　關鍵代碼：$.json2xml(obj);

　　示例代碼以下：

<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.xml2json.js"></script>
<script src="jquery.json2xml.js"></script> 
<script type="text/javascript">
var str = "<root>" +
		  "<name>Gfoodoir</name>" +
		  "<age>21</age>" +
		  "<friends>HTML</friends>" +
		  "<friends>CSS</friends>" +
		  "<friends>JAVASCRIPT</friends>" +
		  "</root>";

console.log(str);//輸出的結果爲字符串

var obj = $.xml2json(str);
console.log(obj);//輸出的是Javascript對象

var jsonstr = JSON.stringify(obj);
console.log(jsonstr);//輸出的是JSON字符串

var person = {
	name: "foodoir",
	age: 21,
	mother: {
		name: "HTML",
		age: 22
	},
	a: function(){
		return 1;
	},
	b: null,
	c: undefined
};

var xmlstr = $.json2xml(person);
console.log(xmlstr);//輸出的是XML格式

</script>

 　　控臺輸出結果：

【Ajax和JSON】

 JSON 文件被放置在服務器端，客戶端請求該文件用得最多的是 Ajax，可以實現異步請求。

　　1. Ajax 是什麼
　　　　AJAX，全稱 Asynchronous JavaScript and XML，即「異步的 JavaScript 和 XML」，通常寫做 Ajax。
　　　　Ajax 可以與服務器交換少許數據，從而異步地更新部分網頁。
　　　　異步,指的是當 Ajax 執行交換數據的操做時，其餘的操做仍然能夠執行。
　　　　一個最多見的應用是：打開百度或谷歌首頁，當輸入文字後，搜索欄下方會顯示出幾個建議的搜索詞。這正是 Ajax 的應用。

　　2. 建立和使用 Ajax
　　　　建立 Ajax 對象要考慮瀏覽器的版本問題，主要分爲兩大類：IE7+/Chrome/Firefox/… 和 IE6/IE5.。
　　　　function CreateXHR(){
   　　　　 if (window.XMLHttpRequest)
   　　　　 {
    　　　　    //對瀏覽器 IE7+, Firefox, Chrome, Opera, Safari
     　　　　   return new XMLHttpRequest();
   　　　　 }
   　　　　 else
  　　　　  {
   　　　　     //對瀏覽器 IE6, IE5
       　　　　 return new ActiveXObject("Microsoft.XMLHTTP");
   　　　　 }
　　　　}

　　　　而後，只要用以下方式建立便可。
　　　　var xmlhttp;
　　　　xmlhttp = CreateXHR();
　　　　服務器端有一個文件 test.json，請求並輸出。
　　　　xmlhttp.open("GET","test.json",true);
　　　　xmlhttp.send();
　　　　xmlhttp.onreadystatechange = function(){
　　　　    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
　　　　        var jsonstr = xmlhttp.responseText;
　　　　        console.log(jsonstr);
 　　　　   }
　　　　}

　　其中，xmlhttp.readyState 存有 XMLHttpRequest 的狀態，有五個值：

　　　　0: 請求未初始化
　　　　1: 服務器鏈接已創建
　　　　2: 請求已接收
　　　　3: 請求處理中
　　　　4: 請求已完成，且響應已就緒

　　xmlhttp.status 的值爲請求結果，200 表示「OK」，404 表示未找到頁面。
　　獲取來自服務器的響應，可以使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性，前者是以字符串形式，後者是以 XML 形式。

　　完整代碼以下：

/*HTML代碼*/
<script>
var xmlhttp;
xmlhttp = CreateXHR();
xmlhttp.open("GET","test.xml",true);
xmlhttp.send();
xmlhttp.onreadystatechange = function(){
	if( xmlhttp.readyState == 4 && xmlhttp.status == 200 ){
		var xmlroot = xmlhttp.responseXML;
		console.log(xmlroot);
		var friends = xmlroot.getElementsByTagName("friends");
		console.log(friends);
	}
}

function CreateXHR(){
	if(window.XMLHttpRequest){
		// IE7++, Chrome, Firefox, ..
		return new XMLHttpRequest();
	}else{
		// IE6, IE5
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
}
</script>


/*JSON文件中的代碼*/
{
	"name": "foodoir",
	"age": 21,
	"friends": ["HTML", "CSS", "Javascript"]
}


/*XML文件中的代碼*/
<root>
	<name>foodoir</name>
	<age>21</age>
	<friends>HTML</friends>
	<friends>CSS</friends>
	<friends>javascript</friends>
</root>

 　　在同一個文件夾中以下命名：

　　控制檯結果爲：

　　由於這篇文章主要講JSON，咱們對於AJAX就不作詳細介紹了。

 

【GeoJSON和TopoJSON】

 

 　　GeoJSON 和 TopoJSON 是符合 JSON 語法規則的兩種數據格式，用於表示地理信息。

1. GeoJSON

　　GeoJSON 是用於描述地理空間信息的數據格式。GeoJSON 不是一種新的格式，其語法規範是符合 JSON 格式的，只不過對其名稱進行了規範，專門用於表示地理信息。

　　GeoJSON 的最外層是一個單獨的對象（object）。這個對象可表示：

　　　　- 幾何體（Geometry）。
　　　　- 特徵（Feature）。
　　　　- 特徵集合（FeatureCollection）。

　　最外層的 GeoJSON 裏可能包含有不少子對象，每個 GeoJSON 對象都有一個 type 屬性，表示對象的類型，type 的值必須是下面之一。

　　　　- Point：點。
　　　　- MultiPoint：多點。
　　　　- LineString：線。
　　　　- MultiLineString：多線。
　　　　- Polygon：面。
　　　　- MultiPolygon：多面。
　　　　- GeometryCollection：幾何體集合。
　　　　- Feature：特徵。
　　　　- FeatureCollection：特徵集合。

　　下面舉幾個例子。

　　點對象：
　　　　{
　　　　"type": "Point",
　　　　"coordinates": [ 111.6, 29.65 ]
　　　　}

　　線對象：
　　　　　　{
　　　　　　"type": "LineString",
　　　　　　"coordinates": [[111, 29 ], [112, 26 ]]
　　　　　　}

　　面對象：
　　　　{
　　　　"type": "Polygon",
　　　　"coordinates":[[ [30, 0], [31, 0], [31, 5], [30, 5], [30, 0] ]]
　　　　}


由以上格式能夠發現，每個對象都有一個成員變量 coordinates。若是 type 的值爲 Point、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon 之一，則該對象必須有變量 coordinates。
若是 type 的值爲 GeometryCollection（幾何體集合），那麼該對象必須有變量 geometries，其值是一個數組，數組的每一項都是一個 GeoJSON 的幾何對象。例如：
　　　　　　{
  　　　　　　  "type": "GeometryCollection",
 　　　　　　   "geometries": [
   　　　　　　     {
    　　　　　　        "type": "Point",
   　　　　　　         "coordinates": [100, 40]
      　　　　　　  },
      　　　　　　  {
         　　　　　　   "type": "LineString",
     　　　　　　       "coordinates": [ [100, 30], [100, 35] ]
    　　　　　　    }
 　　　　　　   ]
　　　　　　}

若是 type 的值爲 Feature（特徵），那麼此特徵對象必須包含有變量 geometry，表示幾何體，geometry 的值必須是幾何體對象。此特徵對象還包含有一個 properties，表示特性，properties 的值能夠是任意 JSON 對象或 null。例如：
　　　　　　{
   　　　　　　 "type": "Feature",
  　　　　　　  "properties": {
  　　　　       "name": "常德"
   　　　　　　 },
 　　　　　　   "geometry": {
   　　　　　　     "type": "Point",
  　　　　　　      "coordinates": [ 111.6, 29.65 ]
 　　　　　　   }
　　　　　　}

若是 type 的值爲 FeatureCollection（特徵集合），則該對象必須有一個名稱爲 features 的成員。features 的值是一個數組，數組的每一項都是一個特徵對象。


2. TopoJSON

　　TopoJSON 是 GeoJSON 按拓撲學編碼後的擴展形式，是由 D3 的做者 Mike Bostock 制定的。相比 GeoJSON 直接使用 Polygon、Point 之類的幾何體來表示圖形的方法，TopoJSON 中的每個幾何體都是經過將共享邊（被稱爲arcs）整合後組成的。

　　TopoJSON 消除了冗餘，文件大小縮小了 80%，由於：
　　　　　　邊界線只記錄一次（例如廣西和廣東的交界線只記錄一次）。
　　　　　　地理座標使用整數，不使用浮點數。
　　這裏咱們就再也不驗證，本身去試驗就好。

3. 在線工具
　　在線生成 GeoJSON：http://geojson.io/
　　簡化、轉換 GeoJSON 和 TopoJSON：http://mapshaper.org/

 到這裏，關於JSON就介紹的差很少了，後面咱們來介紹JSON的遍歷方法

　　在JSON中，咱們通常使用for/in來遍歷JSON中的值，代碼以下：

var json = {
	"a":12,
	"b":21
}
for(var il in json){
	console.log(il);//a,b
	console.log(json[il]);//12,21
}

 　　根據鍵值對（"name":"value"）的形式，咱們很快便能分析出結果。

 分析了JSON的衆多特色，發現它和Javascript中的數據類型有不少類似的地方，可是從一開始咱們就說了JSON是一種數據交換格式，那麼咱們該如何判斷Javascript數據類型和JSON呢？參考代碼（這裏不作解釋，相信聰明的你看完了這篇文章了必定會懂）：

var parseType = function(obj) {
	var type = typeof obj;
	if("object" === type) {
		if(obj) {
			if(obj instanceof Array) {
				return "array";
			}
			if(obj instanceof Object) {
				return type;
			}
			var native_obj = Object.prototype.toString.call(obj);
			if("[object Window]" === native_obj) {
				return "object";
			}
			if("[object Array]" === native_obj || "number" === typeof obj.length && "undefined" !== typeof obj.splice && "undefined" !== typeof obj.propertyIsEnumerable && !obj.propertyIsEnumerable("splice")) {
				return "array";
			}
			if("[object Function]" === native_obj || "undefined" !== typeof obj.call && "undefined" !== typeof obj.propertyIsEnumerable && !obj.propertyIsEnumerable("call")) {
				return "function";
			}
		} else {
			return "null";
		}
	} else if("function" === type && "undefined" === typeof obj.call) {
		return "object";
	}
	return type;
};

 

做者的話：原本是在學習AJAX時關於JSON有一些疑問，後面在網上和書上查找相關方面的資料，感受不是很完整，後面乾脆本身將所看到的和理解的東西整理出來。其中有部分圖片是來源於網上。看書的話請參考《Javascript高級程序設計（第3版）》中的第20章（P562-P570），另外，其中有什麼錯誤但願看到的親們幫我指出來，謝謝！同時也歡迎你們一塊兒交流~~~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程