JavaScript 中JSON
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的
true或false; - 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的更多相关文章
- javascript中 json数据的解析与序列化
首先明确一下概念: json格式数据本质上就是字符串: js对象:JavaScript 中的几乎所有事务都是对象:字符串.数字.数组.日期.函数,等等. json数据的解析: 就是把后端传来的json ...
- javascript中json对象与字符串互转及取值
一. json字符串转换为javascript对象,并取值 var answer = '{"id":0}' var value= JSON.parse(answer); //转 ...
- 转义字符(\)对JavaScript中JSON.parse的影响概述
JSON是一个提供了stringify和parse方法的内置对象,前者用于将js对象转化为符合json标准的字符串,后者将符合json标准的字符串转化为js对象,本文为大家介绍下转义字符对JSON.p ...
- javascript中json解密
一直以前都会断断续续会碰到js中的json数据的解析,下面凭着自己的经验,简单的讲解一下在js中的json的几种解析方法. 一.jquery的方式 首先你得先得到数据,一般都是jquery的ajax ...
- 转义字符(\)对JavaScript中JSON.parse的影响
Email:longsu2010 at yeah dot net 按照ECMA262第五版中的解释,JSON是一个提供了stringify和parse方法的内置对象,前者用于将js对象转化为符合jso ...
- javascript中json对象json数组json字符串互转及取值
今天用到了json数组和json对象和json类型字符串之间互转及取值,记录一下: 1.json类型的字符串转换为json对象及取值 var jsonString = '{"bar" ...
- javascript中json对象长度
JSON中无法使用length去获取长度,length只针对数组对象适用: var data={"showdata":{"中国人民大学":{"2013 ...
- Javascript中JSON的序列化和反序列化(转)
parse用于从一个字符串中解析出JSON对象,如: var str = '{"name":"easonjim","age":"2 ...
- Javascript中JSON对象的操作以及遍历key/value
//遍历获取值: function text(){ var json = {"options":"[{/"text/":/"王家湾/&quo ...
随机推荐
- hdu 5212 : Code【莫比乌斯】
题目链接 题给代码可以转化为下面的公式 然后用F[n]记录公约数为n的(a[i],a[j])对数,用f[n]记录最大公约数为n的(a[i],a[j])对数 之后枚举最大公约数d 至于求F[n],可以先 ...
- 简单的使用redis
心不慌手不抖我们跟着大哥走 https://blog.csdn.net/zhangcongyi420/article/details/82686702
- php str_word_count()函数 语法
php str_word_count()函数 语法 作用:计算字符串中的单词数.大理石平规格 语法:str_word_count(string,return,char) 参数: 参数 描述 strin ...
- Python_002(基础知识)
1.格式化输出 %s:字符串的占位符,可以放置任何内容(数字) 代码展示:%去除法 admin_input1 = input("请输入用户名:") pass_input = inp ...
- C# Label换行解决方法
一.label太短,无法完成显示所要显示信息长度,要换行,解决方法如下: (1) string aa =(长串) ; string cc= aa.Substring(0,10);//取前10个字符 s ...
- vue定义自定义事件方法、事件传值及事件对象
1.自定义事件 例如v-on:click="run" 或者 @click="run" <template> <div id="app ...
- 【前端技术】一篇文章搞掂:uni-app
语法 //列表遍历,遍历数组,第一个参数为数组中元素,可以给第二个参数作为索引值 <view v-for="(item, itemIndex) in card" :key=& ...
- 使用iScroll时input复选框不能选中解决方法
http://blog.csdn.net/xw505501936/article/details/51886018
- 前端工具-调试压缩后的JS(Source Map的使用)
使用 Source Map 可以在 FF 的调试器. Chrome 的 Sources 和 VSCode 中给压缩前的文件下断点,也可以方便定位错误发生的位置(定位到压缩前的文件). 何为 Sourc ...
- 140、spring webflux 高并发的spring组件
最近公司可谓是风云变幻,年前说要拆开卖,后来说要整体卖,表示像我这种渣渣,始终逃脱不掉被卖的命运 下面进入正题 spring webflux 是spring 支持的高并发web框架,将每个http请求 ...