一、什么是JSON?
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。易於人閱讀和編寫。同時也易於機器解析和生成。它基於JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一個子集。 JSON采用完全獨立於語言的文本格式,但是也使用了類似於C語言家族的習慣(包括C, C++, C#, Java, JavaScript, Perl, Python等)。這些特性使JSON成為理想的數據交換語言。
JSON構建的結構:
在JSON中,有兩種結構:對象和數組。
1. “名稱/值”對的集合(A collection of name/value pairs)。不同的語言中,它被理解為對象(object),紀錄(record),結構(struct),字典(dictionary),哈希表(hash table),有鍵列表(keyed list),或者關聯數組 (associative array)。
一個對象以“{”開始,“}”結束。每個“key”后跟一“:”,“‘key/value’ 對”之間運用 “,”分隔。
packJson = {"name":"nikita", "password":"1111"}
2. 值的有序列表(An ordered list of values)。在大部分語言中,它被理解為數組(array)。
這些都是常見的數據結構。事實上大部分現代計算機語言都以某種形式支持它們。這使得一種數據格式在同樣基於這些結構的編程語言之間交換成為可能。
packJson = [{"name":"nikita", "password":"1111"}, {"name":"tony", "password":"2222"}];
數組是值的有序集合。一個數組以“[”開始,“]”結束。值之間運用 “,”分隔。
二、JSON對象和JSON字符串的轉換
為了方便地處理JSON數據,JSON提供了json.js包,下載地址:http://www.json.org/json.js
在數據傳輸流程中,json是以文本,即字符串的形式傳遞的,而JS操作的是JSON對象,所以,JSON對象和JSON字符串之間的相互轉換是關鍵。例如:
JSON字符串:
var jsonStr = '{"name":"nikita", "password":"1111"}';
JSON對象:
var jsonObj = {"name":"nikita", "password":"1111"};
1、JSON對象轉換為JSON字符串

function json2str(o){ var arr = []; var fmt = function(s) { if (typeof s == 'object' && s != null) { return json2str(s); //遞歸 } //如果是數字或string return /^(string|number)$/.test(typeof s) ? "'" + s + "'" : s; } if(o.constructor === Array ){//數組 for ( var i in o) { arr.push(fmt(o[i])); } return '[' + arr.join(',') + ']'; } else{//普通JSON對象 for ( var i in o) { arr.push("'" + i + "':" + fmt(o[i])); } return '{' + arr.join(',') + '}'; } }
可以使用toJSONString()或者全局方法JSON.stringify()將JSON對象轉化為JSON字符串。
var last = jsonObj.toJSONString(); //將JSON對象轉化為JSON字符
或者
var last = JSON.stringify(jsonObj); //將JSON對象轉化為JSON字符
注意:
上面的幾個方法中,除了eval()函數是js自帶的之外,其他的幾個方法都來自json.js包。新版本的 JSON 修改了 API,將 JSON.stringify() 和 JSON.parse() 兩個方法都注入到了 Javascript 的內建對象里面,前者變成了 Object.toJSONString(),而后者變成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()方法,則說明您的json包版本太低。
2、JSON字符串轉換為Json對象
var myObject = eval('('+jsonStr+')');
eval是js自帶的函數,不是很安全,可以考慮用json包。
或者
var myObject = jsonStr.parseJSON(); //由JSON字符串轉換為JSON對象
或者
var myObject = JSON.parse(jsonStr); //由JSON字符串轉換為JSON對象
然后,就可以這樣讀取:
Alert(myObject.name);
Alert(myObject.password);
特別注意:如果myObject本來就是一個JSON對象,那么使用eval()函數轉換后(哪怕是多次轉換)還是JSON對象,但是使用parseJSON()函數處理后會有問題(拋出語法異常)。
三、遍歷JSON對象

myJson = {"name":"nikita", "password":"1111"}; for(var p in myJson){//遍歷json對象的每個key/value對,p為key alert(p + " " + myJson[p]); }
四、遍歷JSON數組

packJson = [ {"name":"nikita", "password":"1111"}, {"name":"tony", "password":"2222"} ]; for(var p in packJson){//遍歷json數組時,這么寫p為索引,0,1 alert(packJson[p].name + " " + packJson[p].password); }
我更傾向於這種寫法:
for(var i = 0; i < packJson.length; i++){ alert(packJson[i].name + " " + packJson[i].password); }
五、將兩個JSON對象組裝到一個里面

//targetJson 目標JSON,packJson 被組裝JSON function addGroupJson(targetJson, packJson){ if(targetJson && packJson){ for(var p in packJson){ targetJson[p] = packJson[p]; } } }
用法如下:
var json1 = {"name":"nikita"}; var json2 = {"password":"1111"}; addGroupJson(json1, json2); alert(json2str(json1));
前一部分是簡單的實現如何使用JS寫模板,第二個就是具體的實現了JSON查詢的一個擴展。

/* 定義模板函數 */ var template = function (queryArr) { var count = 0; for (var i = 0; i < queryArr.length; i++) { var e = queryArr[i]; if ($express) { count++; } } return count; } /*模板創建函數 */ var createIntance = function (exp) { var fun = template.toString().replace("$express", exp).toString(); return eval("0," + fun); } var testTodo = function () { var testArr = [ { name: "張三", age: 20 }, { name: "李四", age: 25 }, { name: "王二麻子", age: 28 }, { name: "小張", age: 30 } ]; var func = createIntance("e.age>=25"); alert(func(testArr)); } /****************** JS 實現 JSON查詢 **********************/ // 定義常用的函數 var len = function (s) { return s.length; } var left = function (s, n) { return s.substr(0, n); } var right = function (s, n) { return s.substr(-n); } var index = function (s, find) { return s.indexOf(find) + 1; } // 擴展原型方法 var _proto = Object.prototype; // 緩存,解決快速查找 var _cache = {}; // 擴展運算符 var _alias = [ /@/g, "_e.", /AND/gi, "&&", /OR/gi, "||", /<>/g, "!=", /NOT/gi, "!", /([^=<>])=([^=]|$)/g, '$1==$2' ]; var _rQuote = /""/g; var _rQuoteTemp = /!~/g; // 編譯 var _complite = function (code) { return eval("0," + code); } // 將擴展符號轉換成標准的JS符號 var _interpret = function (exp) { exp = exp.replace(_rQuote,"!~"); var arr = exp.split('"'); var i, n = arr.length; var k = _alias.length; for (var i = 0; i < n; i += 2) { var s = arr[i]; for (var j = 0; j < k; j += 2) { if (index(s, _alias[j]) > -1) { s = s.replace(_alias[j], _alias[j + 1]); } } arr[i] = s; } for (var i = 1; i < n; i += 2) { arr[i] = arr[i].replace(_rQuoteTemp, '\\"'); } return arr.join('"'); } // 定義模函數 var _templ = function (_list) { var _ret = []; var _i = -1; for (var _k in _list) { var _e = _list[_k]; if (_e != _proto[_k]) { if ($C) { _ret[++_i] = _e; } } } return _ret; } .toString(); // 擴展查詢的方法 _proto.Query = function (exp) { if (!exp) { return []; } var fn = _cache[exp]; try { if (!fn) { var code = _interpret(exp); code = _templ.replace("$C", code); fn = _cache[exp] = _complite(code); } return fn(this); } catch (e) { return []; } } var doTest = function () { var heros = [ // 名============攻=====防=======力量====敏捷=====智力==== {name: '冰室女巫', DP: 38, AP: 1.3, Str: 16, Dex: 16, Int: 21 }, { name: '沉默術士', DP: 39, AP: 1.1, Str: 17, Dex: 16, Int: 21 }, { name: '娜迦海妖', DP: 51, AP: 6.0, Str: 21, Dex: 21, Int: 18 }, { name: '賞金獵人', DP: 39, AP: 4.0, Str: 17, Dex: 21, Int: 16 }, { name: '劇毒術士', DP: 45, AP: 3.1, Str: 18, Dex: 22, Int: 15 }, { name: '光之守衛', DP: 38, AP: 1.1, Str: 16, Dex: 15, Int: 22 }, { name: '煉金術士', DP: 49, AP: 0.6, Str: 25, Dex: 11, Int: 25 } //... ]; var match = heros.Query('@Str>20 AND @Dex>20'); ShowResult(match[0]); // 查詢:“士”結尾的 // 結果:沉默術士,劇毒術士,煉金術士 var match = heros.Query('right(@name,1)="士"'); ShowResult(match[0]); } function ShowResult(result) { alert(result.name + " " + result.DP + " " + result.AP + " " + result.Str + " " + result.Dex + " " + result.Int); }