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 相关文章推荐
xtree.js 代码
Mar 13 Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
Dec 03 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
微信小程序如何使用云开发
May 17 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 Javascript
js实现飞机大战小游戏
Aug 26 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之第三天
2006/10/09 PHP
php,ajax实现分页
2008/03/27 PHP
PHP session有效期问题
2009/04/26 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
jquery ready()的几种实现方法小结
2010/06/18 Javascript
js 上传图片预览问题
2010/12/06 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
用Python编写简单的微博爬虫
2016/03/04 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
对Python函数设计规范详解
2019/07/19 Python
python实现广度优先搜索过程解析
2019/10/19 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
简历的个人自我评价范文
2014/01/03 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
夏季药店促销方案
2014/08/22 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
资料员岗位职责
2015/02/10 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python