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 相关文章推荐
JAVASCRIPT 对象的创建与使用
Mar 09 Javascript
jQuery select控制插件
Aug 17 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
js与applet相互调用的方法
Jun 22 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
Node.js 中判断一个文件是否存在
Aug 24 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
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
如何做到多笔资料的同步
2006/10/09 PHP
繁体中文转换为简体中文的PHP函数
2006/10/09 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
Python实现不规则图形填充的思路
2020/02/02 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
Android面试题及答案
2015/09/04 面试题
工商管理专业应届生求职信
2013/11/04 职场文书
安全标准化实施方案
2014/02/20 职场文书
销售团队获奖感言
2014/08/14 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
P站美图推荐——变身女主角特辑
2022/03/20 日漫