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官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
Vue3为什么这么快
Sep 23 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 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 获取目录下的图片并随机显示的代码
2009/12/28 PHP
php cache类代码(php数据缓存类)
2010/04/15 PHP
延长phpmyadmin登录时间的方法
2011/02/06 PHP
php-fpm配置详解
2014/02/12 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
php中file_exists函数使用详解
2015/05/08 PHP
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
基于Vue实现微前端的示例代码
2020/04/24 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
Python如何将字符串转换为日期
2020/07/31 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
化学实验员岗位职责
2013/12/28 职场文书
文明风采获奖感言
2014/02/18 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
2015试用期转正工作总结
2014/12/12 职场文书