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 相关文章推荐
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 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
javascript学习之闭包分析
2010/12/02 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
js+html制作简单验证码
2017/02/16 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
PyQt5实现简单的计算器
2020/05/30 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
大学生毕业自我鉴定范文
2014/02/03 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
风险评估实施方案
2014/03/09 职场文书
诚信考试承诺书
2014/03/27 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
保护地球的宣传语
2015/07/13 职场文书