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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 Javascript
jQuery实现的分页插件完整示例
May 26 jQuery
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 启动报错如何解决
2014/01/17 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
windows下安装nodejs及框架express
2015/08/07 NodeJs
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
Python中replace方法实例分析
2014/08/20 Python
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
python中常用的九种预处理方法分享
2016/09/11 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
NumPy 数组使用大全
2019/04/25 Python
numpy 声明空数组详解
2019/12/05 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
python 如何调用 dubbo 接口
2020/09/24 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
毕业生自荐书
2013/12/18 职场文书
网络管理员岗位职责
2014/03/17 职场文书
服装发布会策划方案
2014/05/22 职场文书
美食节目策划方案
2014/05/31 职场文书
兽医医药专业求职信
2014/07/27 职场文书
数学教师个人工作总结
2015/02/06 职场文书
教师年终个人总结
2015/02/11 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
一篇文章弄懂Python中的内建函数
2021/08/07 Python