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 XMLHttpRequest对象全面剖析
Apr 24 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
浅析Vue下的components模板使用及应用
Nov 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 判断常量,变量和函数是否存在
2009/04/26 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
jQuery 解析xml文件
2009/08/09 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
python打开网页和暂停实例
2014/09/30 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
python求质数列表的例子
2019/11/24 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
戴尔英国官网:Dell英国
2017/05/27 全球购物
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
大学生毕业自我鉴定范文
2013/11/03 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
公司慰问信范文
2015/03/23 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
七年级作文之环保作文
2019/10/17 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书