博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript处理JSON
阅读量:5926 次
发布时间:2019-06-19

本文共 7621 字,大约阅读时间需要 25 分钟。

一、什么是JSON?  

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于家族的习惯(包括C, , , , JavaScript, , 等)。这些特性使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包,下载地址:

在数据传输流程中,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(',') + '}'; }}
View Code

可以使用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]);}
View Code

四、遍历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);}
View Code

我更倾向于这种写法:

for(var i = 0; i < packJson.length; i++){   alert(packJson[i].name + " " + packJson[i].password);}

五、将两个JSON对象组装到一个里面

//targetJson 目标JSON,packJson 被组装JSONfunction addGroupJson(targetJson, packJson){    if(targetJson && packJson){       for(var p in packJson){           targetJson[p] = packJson[p];       }    }}
View Code

用法如下:

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);        }
View Code

 

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

你可能感兴趣的文章
WinAPI: 钩子回调函数之 MouseProc
查看>>
Windows端口被占用处理方法
查看>>
我的友情链接
查看>>
JavaScript格式化数字显示格式
查看>>
App Store 排名获取。
查看>>
Centos 安装配置 vsftpd
查看>>
linux视频教程之vsftp_B
查看>>
Linux入门之进程管理(4)之进程与文件
查看>>
Shell编程基础
查看>>
qt交叉编译环境搭建方法
查看>>
视频专辑:Hibernate 视频
查看>>
测试你的Python 水平----6
查看>>
prometheus python client
查看>>
jQuery实现等比例缩放大图片让大图片自适应页面布局
查看>>
Briefly unavailable for scheduled maintenance message after doing automatic upgrade
查看>>
VMware vSphere 5.1 群集深入解析(二十六)- 数据存储维护模式&汇总
查看>>
常用的加密算法---数字摘要
查看>>
Eclipse 安装配置总结(WST WTP)(转)
查看>>
Spring学习笔记十二---泛型依赖注入
查看>>
Python正则表达式
查看>>