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. alert(1) to win 4

    function escape(s) { var url = 'javascript:console.log(' + JSON.stringify(s) + ')'; console.log(url) ...

  2. P2254 [NOI2005]瑰丽华尔兹

    链接P2254 [NOI2005]瑰丽华尔兹 首先有个很朴素的\(dp\),设\(f_{i,j,k}\)表示\(k\)时刻地点\(i,j\)的最长长度. 然后这样不能优化,考虑利用一段连续时间是同一个 ...

  3. Flask中的中间件

    flask也有和Django类似的中间件,不同的是使用三个装饰器来实现的. .berore_request在请求进入视图之前 @app.before_request def be1 bef be2 b ...

  4. PyTorch 手动提取 Layers

    Model NeuralNet( (l0): Linear(in_features=6, out_features=256, bias=True) (relu): ReLU() (bn0): Batc ...

  5. RMQ Direct

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11792398.html RMQ Direct Project Directory Maven Depe ...

  6. 对promise的研究1

    通过看阮一峰老师的文章写出来的特此注明 1.Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大.它由社区最早提出和实现,ES6 将其 ...

  7. PHP截取字符串函数,根据dede修改而来

    dede中,有一个函数function cn_substr_utf8($str, $length, $start=0) 但测试时,并不如我所想的一样,可能是因为个人使用习惯吧.比如,字符串为数字或字母 ...

  8. Angular:ViewProviders和Providers的区别

    在Angular中使用依赖注入(DI)的时候,我们一般会使用providers.其实要做同样的事我们还有另外一个选择:viewProviders. viewProviders允许我们定义只对组件的vi ...

  9. c#image与byte数组的转换

    // image to byte[] Image photo = new Bitmap(selectPictureFile); System.IO.MemoryStream ms = new Syst ...

  10. [CF1056E]Check Transcription

    题目:Check Transcription 传送门:http://codeforces.com/contest/1056/problem/E 分析: 1)显然有个$O( \frac{t}{max(c ...