JavaScript处理JSON

向右看齐 2021-12-22 08:51 269阅读 0赞

**一、什么是JSON？**

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于[C语言][C]家族的习惯（包括C, [C++][C 1], [C\#][C 2], [Java][], JavaScript, [Perl][], [Python][]等）。这些特性使JSON成为理想的数据交换语言。

## JSON构建的结构： ##

在JSON中，有两种结构：**对象和数组**。

**1. “名称/值”对的集合**（A collection of name/value pairs）。不同的语言中，它被理解为对象（object），纪录（record），结构（struct），[字典][Link 1]（dictionary），[哈希表][Link 2]（hash table），有键列表（keyed list），或者关联[数组][Link 3] （associative array）。

一个对象以“\{”开始，“\}”结束。每个“key”后跟一“:”，“‘key/value’ 对”之间运用 “,”分隔。

packJson = \{"name":"nikita", "password":"1111"\}

**2. 值的有序列表**（An ordered list of values）。在大部分语言中，它被理解为数组（array）。  
　　这些都是常见的[数据结构][Link 4]。事实上大部分现代[计算机][Link 5]语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的[编程][Link 6]语言之间交换成为可能。

packJson = \[\{"name":"nikita", "password":"1111"\}, \{"name":"tony", "password":"2222"\}\];

数组是值的有序集合。一个数组以“\[”开始，“\]”结束。值之间运用 “,”分隔。

**二、****JSON****对象和****JSON****字符串的转换**

*为了方便地处理JSON数据，JSON提供了json.js包，下载地址：[http://www.json.org/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字符串**

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

可以使用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****对象**

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

myJson = {"name":"nikita", "password":"1111"};
    for(var p in myJson){
         //遍历json对象的每个key/value对,p为key
       alert(p + " " + myJson[p]);
    }

**四、遍历****JSON****数组**

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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对象组装到一个里面**

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

//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查询方法][JS _Json]**

前一部分是简单的实现如何使用JS写模板，第二个就是具体的实现了JSON查询的一个扩展。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

/* 定义模板函数 */
            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);
            }

转载于:https://www.cnblogs.com/JoannaQ/p/3190879.html

[C]: http://baike.baidu.com/view/1219.htm
[C 1]: http://baike.baidu.com/view/824.htm
[C 2]: http://baike.baidu.com/view/6590.htm
[Java]: http://baike.baidu.com/view/29.htm
[Perl]: http://baike.baidu.com/view/46614.htm
[Python]: http://baike.baidu.com/view/21087.htm
[Link 1]: http://baike.baidu.com/view/6983.htm
[Link 2]: http://baike.baidu.com/view/329976.htm
[Link 3]: http://baike.baidu.com/view/209670.htm
[Link 4]: http://baike.baidu.com/view/9900.htm
[Link 5]: http://baike.baidu.com/view/3314.htm
[Link 6]: http://baike.baidu.com/view/3281.htm
[http_www.json.org_json.js]: http://www.json.org/json.js
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211220/b0d987d08200486bb0cc6e08b07af990.png
[JS _Json]: http://www.cnblogs.com/heardawn/archive/2013/04/12/Js_Json.html