JavaScript之json_动力节点Java学院整理


Posted in Javascript onJune 29, 2017

JSON是JavaScript Object Notation的缩写,它是一种数据交换格式。

在JSON出现之前,大家一直用XML来传递数据。因为XML是一种纯文本格式,所以它适合在网络上交换数据。XML本身不算复杂,但是,加上DTD、XSD、XPath、XSLT等一大堆复杂的规范以后,任何正常的软件开发人员碰到XML都会感觉头大了,最后大家发现,即使你努力钻研几个月,也未必搞得清楚XML的规范。

终于,在2002年的一天,道格拉斯·克罗克福特(Douglas Crockford)同学为了拯救深陷水深火热同时又被某几个巨型软件企业长期愚弄的软件工程师,发明了JSON这种超轻量级的数据交换格式。

道格拉斯同学长期担任雅虎的高级架构师,自然钟情于JavaScript。他设计的JSON实际上是JavaScript的一个子集。在JSON中,一共就这么几种数据类型:

  1. number:和JavaScript的number完全一致;
  2. boolean:就是JavaScript的truefalse
  3. string:就是JavaScript的string
  4. null:就是JavaScript的null
  5. array:就是JavaScript的Array表示方式——[]
  6. object:就是JavaScript的{ ... }表示方式。

以及上面的任意组合。

并且,JSON还定死了字符集必须是UTF-8,表示多语言就没有问题了。为了统一解析,JSON的字符串规定必须用双引号"",Object的键也必须用双引号""

由于JSON非常简单,很快就风靡Web世界,并且成为ECMA标准。几乎所有编程语言都有解析JSON的库,而在JavaScript中,我们可以直接使用JSON,因为JavaScript内置了JSON的解析。

把任何JavaScript对象变成JSON,就是把这个对象序列化成一个JSON格式的字符串,这样才能够通过网络传递给其他计算机。

如果我们收到一个JSON格式的字符串,只需要把它反序列化成一个JavaScript对象,就可以在JavaScript中直接使用这个对象了。

序列化

让我们先把小明这个对象序列化成JSON格式的字符串:

var xiaoming = {
  name: '小明',
  age: 14,
  gender: true,
  height: 1.65,
  grade: null,
  'middle-school': '\"W3C\" Middle School',
  skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};

JSON.stringify(xiaoming); // '{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}'

要输出得好看一些,可以加上参数,按缩进输出:

JSON.stringify(xiaoming, null, ' ');

结果:

{
 "name": "小明",
 "age": 14,
 "gender": true,
 "height": 1.65,
 "grade": null,
 "middle-school": "\"W3C\" Middle School",
 "skills": [
  "JavaScript",
  "Java",
  "Python",
  "Lisp"
 ]
}

第二个参数用于控制如何筛选对象的键值,如果我们只想输出指定的属性,可以传入Array:

JSON.stringify(xiaoming, ['name', 'skills'], ' ');

结果:

{
 "name": "小明",
 "skills": [
  "JavaScript",
  "Java",
  "Python",
  "Lisp"
 ]
}

还可以传入一个函数,这样对象的每个键值对都会被函数先处理:

function convert(key, value) {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
}

JSON.stringify(xiaoming, convert, ' ');

上面的代码把所有属性值都变成大写:

{
 "name": "小明",
 "age": 14,
 "gender": true,
 "height": 1.65,
 "grade": null,
 "middle-school": "\"W3C\" MIDDLE SCHOOL",
 "skills": [
  "JAVASCRIPT",
  "JAVA",
  "PYTHON",
  "LISP"
 ]
}

如果我们还想要精确控制如何序列化小明,可以给xiaoming定义一个toJSON()的方法,直接返回JSON应该序列化的数据:

var xiaoming = {
  name: '小明',
  age: 14,
  gender: true,
  height: 1.65,
  grade: null,
  'middle-school': '\"W3C\" Middle School',
  skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
  toJSON: function () {
    return { // 只输出name和age,并且改变了key:
      'Name': this.name,
      'Age': this.age
    };
  }
};

JSON.stringify(xiaoming); // '{"Name":"小明","Age":14}'

反序列化

拿到一个JSON格式的字符串,我们直接用JSON.parse()把它变成一个JavaScript对象:

JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45

JSON.parse()还可以接收一个函数,用来转换解析出的属性:

JSON.parse('{"name":"小明","age":14}', function (key, value) {
  // 把number * 2:
  if (key === 'name') {
    return value + '同学';
  }
  return value;
}); // Object {name: '小明同学', age: 14}

在JavaScript中使用JSON,就是这么简单!

Javascript 相关文章推荐
可以将word转成html的js代码
Apr 11 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
Mar 20 Javascript
VeeValidate在vue项目里表单校验应用案例
May 09 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
JavaScript之RegExp_动力节点Java学院整理
Jun 29 #Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 #Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 #Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 #jQuery
详解vue父子组件间传值(props)
Jun 29 #Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 #Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 #Javascript
You might like
编译问题
2006/10/09 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
PHP批量生成静态HTML的简单原理和方法
2014/04/20 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
python取代netcat过程分析
2018/02/10 Python
创建Django项目图文实例详解
2019/06/06 Python
python 列表推导式使用详解
2019/08/29 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
酒店公关部经理岗位职责
2013/11/24 职场文书
中学生个人自我评价
2014/02/06 职场文书
化妆品店促销方案
2014/02/24 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
2016年教代会开幕词
2016/03/04 职场文书
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python