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 相关文章推荐
判断页面是关闭还是刷新的js代码
Jan 28 Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
Js获取当前日期时间及格式化代码
Sep 17 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
js中的数组对象排序分析
Dec 11 Javascript
微信小程序实现简单表格
Feb 14 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中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
jquery ajax执行后台方法
2010/03/18 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
实例解析Python中的__new__特殊方法
2016/06/02 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
Python中函数参数调用方式分析
2018/08/09 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
家长会演讲稿范文
2014/01/10 职场文书
女方回门宴答谢词
2014/01/14 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
玄武湖导游词
2015/02/05 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
MySQL 时间类型的选择
2021/06/05 MySQL