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中动态效果小结
Dec 16 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
js获取iframe中的window对象的实现方法
May 20 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
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
用PHP和MySQL保存和输出图片
2006/10/09 PHP
PHP在Web开发领域的优势
2006/10/09 PHP
给php新手谈谈我的学习心得
2007/02/25 PHP
php 动态添加记录
2009/03/10 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
JS常用函数使用指南
2014/11/23 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
安全生产管理责任书
2014/04/16 职场文书
民事上诉状范文
2015/05/22 职场文书
张丽莉观后感
2015/06/16 职场文书
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技