json2.js 入门教程之使用方法与实例分析


Posted in Javascript onSeptember 14, 2017

json2.js主要功能是做什么的?

json2.js提供了json的序列化和反序列化方法,可以将一个json对象转换成json字符串,也可以将一个json字符串转换成一个json对象。

json2.js在浏览器不支持json.parse的内置方法时,最有效。json2.js会创建一个内部的全局变量,提供json对象与字符串之间的转换。

由于eval已经不提倡使用了,并存在一定的危险,建议使用内置parse json的方法,或者直接使用json2.js。

json2.js的源码地址:

下面是其他网友的补充

需要加载json2.js

这是个人在最近使用json时做的总结,拿出来给没接触过的小弟们晒晒,适用与没接触过json的人员,其中json2。js请到json官网下载。

<script> 
//直接声明json数据结构 
var myJSONObject = {"bindings": [ 
    {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"}, 
    {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"}, 
    {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"} 
  ] 
};
 
//声明字符串,可对比一下json文本与我们正常文本的区别
 
var normalstring='[{persons:[{name:"jordan",sex:"m",age:"40"}, {name:"bryant",sex:"m",age:"28"}, {name:"McGrady",sex:"m",age:"27"} ]}]';
var jsontext='[{"persons":[{"name":"jordan","sex":"m","age":"40"}, {"name":"bryant","sex":"m","age":"28"}, {"name":"McGrady","sex":"m","age":"27"} ]}]';
 
//调用eval函数转换为json对象,
 
var myE = eval(normalstring);
document.writeln(myE '<br><br>');
 
//将json对象转换为字符串
var text = JSON.stringify(myE);
//对比转换后的json文本与声明的文本区别
document.writeln('转换后的json文本:' text '<br><br>声明的json格式文本' jsontext '<br><br>声明的普通格式文本' normalstring '<br><br>');
 
//当安全比较重要的时候使用JSON解析就好一些。JSON解析只会识别JSON文本并且它更安全,下面调用json的parse函数对文本数据转换生成json数据结构
 
var myData = JSON.parse(jsontext);
document.writeln(myData '<br><br>');
 
//下面是对json对象的增删查改操作
//声明json对象
 
var jsonObj2={persons:[{name:"jordan",sex:"m",age:"40"}, {name:"bryant",sex:"m",age:"28"}, {name:"McGrady",sex:"m",age:"27"} ]};
var persons=jsonObj2.persons;
var str="";
var person={name:"yaoMing",sex:"m",age:"26"};
//以下为json对象的操作,去掉注释可以查看操作结果
//jsonObj2.persons.push(person);//数组最后加一条记录
//jsonObj2.persons.pop();//删除最后一项
//jsonObj2.persons.shift();//删除第一项
jsonObj2.persons.unshift(person);//数组最前面加一条记录 只要适合Javascript的方法都是可以用在JSON对象的数组中的!所以还有另外的方法splice( )进行crud操作! //删除
//jsonObj2.persons.splice(0,2);//开始位置,删除个数
//替换不删除
var self={name:"tom",sex:"m",age:"24"};
var brother={name:"Mike",sex:"m",age:"29"};
jsonObj2.persons.splice(1,0,self,brother,self);//开始位置,删除个数,插入对象
//替换并删除
//jsonObj2.persons.splice(0,1,self,brother);//开始位置,删除个数,插入对象
for(var i=0;i<persons.length;i ){ var cur_person=persons[i]; str =cur_person.name "'sex is " cur_person.sex " and age is " cur_person.age "<br><br>"; }
document.writeln(str);
//转换为json文本
var myjsonobj = JSON.stringify(jsonObj2);
document.writeln(myjsonobj);
</script>

 3、增强功能:

比如说,我们的数据非常复杂,还有类似头像,昵称,个人签名之类的信息。
可是我保存在本地,只需要用户名,和性别,肿么破呢?
也许你会说 so easy, 遍历数据重新提取下即可。
例如:

data = [
  {name: , sex:, age: },
  {name: , sex:, age: },
  {name: , sex:, age: }
]; ( i=, new_data=[]; i<data.length; i++) {
  new_data.push({
    name: data[i].name,
    sex: data[i].sex
  });
} str_json = .stringify(new_data);
console.log(str_json);
var data = [
  {name: "王尼玛", sex:1, age: 30},
  {name: "王尼美", sex:0, age: 20},
  {name: "王大锤", sex:1, age: 30}
];
for (var i=0, new_data=[]; i<data.length; i++) {
  new_data.push({
    name: data[i].name,
    sex: data[i].sex
  });
}
var str_json = JSON.stringify(new_data);
console.log(str_json);

确实分分钟搞定。

其实我们只需要用 stringify 第二个参数即可简单处理这种问题。

data = [
  {name: , sex:, age: },
  {name: , sex:, age: },
  {name: , sex:, age: }
]; str_json = .stringify(data, [, ]);
console.log(str_json);
var data = [
  {name: "王尼玛", sex:1, age: 30},
  {name: "王尼美", sex:0, age: 20},
  {name: "王大锤", sex:1, age: 30}
];
var str_json = JSON.stringify(data, ["name", "sex"]);
console.log(str_json);

第二个参数只要传入需要的keys数组,就非常轻松的就完成这种处理了。

当然如果我们要更纠结的处理,比如要把 1,0 修改为男女,那么第二个参数可以用回调函数来处理。

data = [
  {name: , sex:, age: },
  {name: , sex:, age: },
  {name: , sex:, age: }
]; str_json = .stringify(data, 
   (k === ) {     [, ][v];
  }   v;
});
console.log(str_json);
var data = [
  {name: "王尼玛", sex:1, age: 30},
  {name: "王尼美", sex:0, age: 20},
  {name: "王大锤", sex:1, age: 30}
];
var str_json = JSON.stringify(data, function (k, v) {
  if (k === "sex") {
    return ["女", "男"][v];
  }
  return v;
});
console.log(str_json);

第二个参数如此强悍,为我们省去了不少麻烦。

Javascript 相关文章推荐
最短的IE判断代码
Mar 13 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
浅谈React 服务器端渲染的使用
May 08 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 #Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 #Javascript
VsCode插件整理(小结)
Sep 14 #Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 #Javascript
vue 计时器组件的实现代码
Sep 14 #Javascript
详解tween.js的使用教程
Sep 14 #Javascript
JS库之wow.js使用方法
Sep 14 #Javascript
You might like
用JQuery 实现的自定义对话框
2007/03/24 Javascript
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
JavaScript 变量命名规则
2009/09/23 Javascript
javascript中的array数组使用技巧
2010/01/31 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
面包屑导航详解
2017/12/07 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
文明村创建实施方案
2014/03/27 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
教师党员个人总结
2015/02/10 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
第一节英语课开场白
2015/06/01 职场文书
看雷锋电影观后感
2015/06/10 职场文书
父母教会我观后感
2015/06/17 职场文书
银行求职信怎么写
2019/06/20 职场文书