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 相关文章推荐
javascript编程起步(第五课)
Feb 27 Javascript
JavaScript入门教程(11) js事件处理
Jan 31 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
vue实现井字棋游戏
Sep 29 Javascript
JavaScript文档对象模型DOM
Nov 20 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 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
node.js中的fs.chmod方法使用说明
2014/12/18 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
详解Nodejs之npm&package.json
2017/06/15 NodeJs
vue 中filter的多种用法
2018/04/26 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
Python入门篇之对象类型
2014/10/17 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
TensorFlow Session会话控制&Variable变量详解
2018/07/30 Python
python实现机器学习之元线性回归
2018/09/06 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
Python和Go语言的区别总结
2019/02/20 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
大学生就业推荐信范文
2013/11/29 职场文书
初中科学教学反思
2014/01/21 职场文书
英语国培研修感言
2014/02/13 职场文书
环境建设实施方案
2014/03/14 职场文书
协议书与合同的区别
2014/04/18 职场文书
合作协议书模板2014
2014/09/26 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
Redis RDB技术底层原理详解
2021/09/04 Redis