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 相关文章推荐
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
JavaScript 对象模型 执行模型
Oct 15 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 Javascript
js实现搜索栏效果
Nov 16 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
php使用百度天气接口示例
2014/04/22 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
实例讲解php数据访问
2016/05/09 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
pandas string转dataframe的方法
2018/04/11 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
python接入支付宝的实例操作
2020/07/20 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
社区学习十八大感想
2014/01/22 职场文书
小学防溺水制度
2014/01/29 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python