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 相关文章推荐
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
js拦截alert对话框另类应用
Jan 16 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
初识Javascript小结
Jul 16 Javascript
node.js实现爬虫教程
Aug 25 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
loading动画特效小结
Jan 22 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
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
PHP分页类集锦
2014/11/18 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
python常用函数详解
2016/09/13 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
Python 移动光标位置的方法
2019/01/20 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
Python序列化pickle模块使用详解
2020/03/05 Python
Python中and和or如何使用
2020/05/28 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
小组名称和口号
2014/06/09 职场文书
管理标语大全
2014/06/24 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
民主生活会发言材料
2014/10/20 职场文书
2014年除四害工作总结
2014/12/06 职场文书
2015年公司新年寄语
2014/12/08 职场文书
单位委托函范文
2015/01/29 职场文书
入党积极分子个人总结
2015/03/02 职场文书