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 相关文章推荐
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 Javascript
vue组件添加事件@click.native操作
Oct 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
PHP和XSS跨站攻击的防范
2007/04/17 PHP
PHP 单引号与双引号的区别
2009/11/24 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
Python实现全局变量的两个解决方法
2014/07/03 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
海量信息软件测试笔试题
2015/08/08 面试题
品质主管的岗位职责
2013/12/04 职场文书
学徒工职责
2014/03/06 职场文书
工作决心书
2014/03/11 职场文书
洗发水广告词
2014/03/13 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
求职简历自我评价范文
2015/03/10 职场文书
盲山观后感
2015/06/11 职场文书
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA