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 相关文章推荐
IE无法设置短域名下Cookie
Sep 23 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
JsChart组件使用详解
Mar 04 Javascript
js中实例与对象的区别讲解
Jan 21 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 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
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
python 实现归并排序算法
2012/06/05 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
Python 多进程和数据传递的理解
2017/10/09 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
canvas使用注意点总结
2013/07/19 HTML / CSS
旅游管理专业大学生职业规划书
2014/02/27 职场文书
我的中国梦口号
2014/06/16 职场文书
工作所在部门证明
2014/09/21 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
2015年春节标语口号
2014/12/09 职场文书
小学优秀班主任材料
2014/12/17 职场文书
员工辞职信范文大全
2015/05/12 职场文书
个人欠条范本
2015/07/03 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书