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 相关文章推荐
js不是基础的基础
Dec 24 Javascript
js event事件的传递与冒泡处理
Dec 06 Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
详解实现vue的数据响应式原理
Jan 20 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
php auth_http类库进行身份效验
2009/03/19 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
利用Python演示数型数据结构的教程
2015/04/03 Python
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
python ChainMap的使用和说明详解
2019/06/11 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
什么是Python包的循环导入
2020/09/08 Python
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
工作岗位说明书模板
2014/05/09 职场文书
保护环境倡议书300字
2014/05/19 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
2015入党自传格式范文
2015/06/26 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
Java实现多线程聊天室
2021/06/26 Java/Android
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server