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实现select添加实现后台权限添加的效果
May 28 Javascript
js图片延迟加载的实现方法及思路
Jul 22 Javascript
javascript定时器完整实例
Feb 10 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 Javascript
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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
php自动获取关键字的方法
2015/01/06 PHP
php获取远程文件大小
2015/10/20 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
图片之间的切换
2006/06/26 Javascript
JS查看对象功能代码
2008/04/25 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
滞留工资返还协议书
2014/10/19 职场文书
2014年内勤工作总结
2014/11/24 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
辩护词范文大全
2015/05/21 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书