JSON是JavaScript Object Notation的缩写,它是一种数据交换格式。

在JSON出现之前,大家一直用XML来传递数据。因为XML是一种纯文本格式,所以它适合在网络上交换数据。XML本身不算复杂,但是,加上DTD、XSD、XPath、XSLT等一大堆复杂的规范以后,任何正常的软件开发人员碰到XML都会感觉头大了,最后大家发现,即使你努力钻研几个月,也未必搞得清楚XML的规范。

终于,在2002年的一天,道格拉斯·克罗克福特(Douglas Crockford)同学为了拯救深陷水深火热同时又被某几个巨型软件企业长期愚弄的软件工程师,发明了JSON这种超轻量级的数据交换格式。

道格拉斯同学长期担任雅虎的高级架构师,自然钟情于JavaScript。他设计的JSON实际上是JavaScript的一个子集。在JSON中,一共就这么几种数据类型:

  • number:和JavaScript的number完全一致;
  • boolean:就是JavaScript的truefalse
  • string:就是JavaScript的string
  • null:就是JavaScript的null
  • array:就是JavaScript的Array表示方式——[]
  • 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 中JSON的更多相关文章

  1. javascript中 json数据的解析与序列化

    首先明确一下概念: json格式数据本质上就是字符串: js对象:JavaScript 中的几乎所有事务都是对象:字符串.数字.数组.日期.函数,等等. json数据的解析: 就是把后端传来的json ...

  2. javascript中json对象与字符串互转及取值

    一.   json字符串转换为javascript对象,并取值 var answer = '{"id":0}' var value= JSON.parse(answer); //转 ...

  3. 转义字符(\)对JavaScript中JSON.parse的影响概述

    JSON是一个提供了stringify和parse方法的内置对象,前者用于将js对象转化为符合json标准的字符串,后者将符合json标准的字符串转化为js对象,本文为大家介绍下转义字符对JSON.p ...

  4. javascript中json解密

    一直以前都会断断续续会碰到js中的json数据的解析,下面凭着自己的经验,简单的讲解一下在js中的json的几种解析方法.  一.jquery的方式 首先你得先得到数据,一般都是jquery的ajax ...

  5. 转义字符(\)对JavaScript中JSON.parse的影响

    Email:longsu2010 at yeah dot net 按照ECMA262第五版中的解释,JSON是一个提供了stringify和parse方法的内置对象,前者用于将js对象转化为符合jso ...

  6. javascript中json对象json数组json字符串互转及取值

    今天用到了json数组和json对象和json类型字符串之间互转及取值,记录一下: 1.json类型的字符串转换为json对象及取值 var jsonString = '{"bar" ...

  7. javascript中json对象长度

    JSON中无法使用length去获取长度,length只针对数组对象适用: var data={"showdata":{"中国人民大学":{"2013 ...

  8. Javascript中JSON的序列化和反序列化(转)

    parse用于从一个字符串中解析出JSON对象,如: var str = '{"name":"easonjim","age":"2 ...

  9. Javascript中JSON对象的操作以及遍历key/value

    //遍历获取值: function text(){ var json = {"options":"[{/"text/":/"王家湾/&quo ...

随机推荐

  1. bzoj2085 [Poi2010]Hamsters 矩阵快速幂+字符串hash

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=2085 题解 考虑暴力 DP 的做法.令 \(dp[i][j]\) 表示以 \(j\) 为开头的 ...

  2. spring mvc 和spring boot 中注解的使用

    1 spring mvc和spring boot之间的关系 spring boot包含spring mvc.所以,spring mvc的注解在spring boot总都是可以用的吗? spring b ...

  3. Task10.Bert

    Transformer原理 论文地址:Attention Is All You Need:https://arxiv.org/abs/1706.03762 Transformer是一种完全基于Atte ...

  4. Python3解leetcode Min Cost Climbing Stairs

    问题描述: On a staircase, the i-th step has some non-negative cost cost[i]assigned (0 indexed). Once you ...

  5. vue框架搭建--移动端

    由于Vue官方提供了vue-cli手脚架,所以快速构建出个简单的项目框架.在做移动端项目时,因为移动端的特性可能会用到些比较常用的插件,就在这里简单介绍如何使用 这里只介绍怎么在项目中安装引用和简单的 ...

  6. WPF 设置窗体大小为显示器工作区域大小

      最近做的项目遇到一个问题,窗体在1680*1050分辨率下显示,系统字体设置为小字体时,显示没问题,但是调到中等字体时,窗体显示位置出了问题.主窗体为无边框窗体,拖动及放大缩小事件都是自己写的. ...

  7. 20180708-Java基本数据类型

    public class PrimitiveTypeTest{ public static void main(String[] args){ //byte System.out.println(&q ...

  8. (转)Servlet 3.0/3.1 中的异步处理学习

    转:https://www.cnblogs.com/davenkin/p/async-servlet.html 在Servlet 3.0之前,Servlet采用Thread-Per-Request的方 ...

  9. scau 1079 三角形(暴力)

    </pre>1079 三角形</h1></center><p align="center" style="margin-top: ...

  10. HDU6669 Game(思维,贪心)

    HDU6669 Game 维护区间 \([l,r]\) 为完成前 \(i\) 步使用最少步数后可能落在的区间. 初始时区间 \([l,r]\) 为整个坐标轴. 对于第 \(i\) 个任务区间 \([a ...