JSON是一种数据格式,它并不从属于JavaScript,很多语言都有JSON的解析器和序列化器。

语法

JSON可以表示三种类型:

  • 简单值:使用与JavaScript相同的语法,可以在JSON中表示字符串、数值、布尔值和null。
  • 对象:表示一组无序的键值对。键值对中的值可以是简单值,也可以是复杂数据类型。
  • 数值:表示一组有序的值的列表,数组的值可以是任意类型。

JSON不支持变量、函数或对象实例,是一种表示结构化数据的格式。

简单值

JSON数据形式:

5    // 数值
"Hello JavaScript" // 字符串
null

对象

与JavaScript不同,JSON中的对象要求给属性加上引号

{
"name": "萧萧弈寒";
"age": 100
} // 属性的值也可以是复杂类型
{
"school": {
"name": "hafo",
"location": "Harbin"
}
}

数组

JSON表示数组:

[100, "萧萧弈寒", true]

JSON数组没有变量和分号。

把数组和对象结合,可以构造复杂的数据集合:

[
{
"title":"Java从入门到放弃",
"authors":[
"张三"
],
edition: 2
},
{
"title":"MySQL从删库到跑路",
"authors":[
"李四"
],
edition: 3
},
{
"title":"Dreamweaver从安装到卸载",
"authors":[
"王五"
],
edition: 4
}
]

解析与序列化

JSON对象

JSON对象有两个方法:

  • stringfy():把JavaScript对象序列化为JSON字符串
  • parse():。把JSON字符串解析为原生JavaScript值

示例:

var book = {
"title":"Java从入门到放弃",
"authors":[
"张三"
],
edition: 2
};
var jsonText = JSON.stringify(book);
alert(jsonText); // {"title":"Java从入门到放弃","authors":["张三"],"edition":2}

上面的例子将一个JavaScript对象序列化为一个JSON字符串。默认情况下,JSON.stringify()不包含任何字符或缩进。

将JSON字符串直接传递个JSON.parse()可以得到相应的JavaScript值。

var newBook = JSON.parse(jsonText);    

book与newBook具有相同的属性,但是彼此是相互独立的。

序列化选项

JSON.stringify()还可以接收两个参数:

  • 第一个参数:过滤器,一个数组或一个函数。
  • 第二个参数:一个选项,表示是否在JSON字符串中保留缩进

过滤结果

如果参数是数组,JSON.stringify()的结果只包含数组中列出的属性。

var book = {
"title":"Java从入门到放弃",
"authors":[
"张三"
],
edition: 2
};
var jsonText = JSON.stringify(book, ["title", "authors"]);
console.log(jsonText); // {"title":"Java从入门到放弃","authors":["张三"]}

如果参数是函数,传入的函数接收两个参数,属性名和属性值,根据属性名可以知道如何处理属性。属性名是字符串,属性值并非键值对的值,键名可以是空字符串。

返回的值是相应键的值,如果函数返回undefined,那么该属性就会被忽略。

var book = {
"title":"Java programming",
"authors":[
"张三",
"李四"
],
edition: 2
};
var jsonText = JSON.stringify(book, function (key, value) {
switch (key) {
case "authors":
return value.join("-"); // 用“-”分割数组
case "edition":
return undefined;
default :
return value;
}
});
console.log(jsonText); // {"title":"Java programming","authors":"张三-李四"}

字符串缩进

JSON.stringify()的第三个参数用于控制结果中的缩进和空白符。如果是数值,表示每格缩进的空格数。

var book = {
"title":"Java programming",
"authors":[
"萧萧弈寒",
],
edition: 2
};
var jsonText = JSON.stringify(book, null, 4);
console.log(jsonText);

如果是字符串,这个字符串将用作JSON字符串的缩进符

var book = {
"title":"Java programming",
"authors":[
"萧萧弈寒",
],
edition: 2
};
var jsonText = JSON.stringify(book, null, "__");
console.log(jsonText);

【显示结果】:

{
__"title": "Java programming",
__"authors": [
____"萧萧弈寒"
__],
__"edition": 2
}

缩进字符串最多只能包含10个字符。

toJSON()方法

JSON.stringify()并不能满足所有对象进行序列化的需求。可以给对象定义toJSON()方法,返回其自身的JSON数据格式。

示例:

var book = {
"title":"Java programming",
"authors":[
"萧萧弈寒",
],
edition: 2,
toJSON: function () {
return "==="+this.title+"===";
}
};
var jsonText = JSON.stringify(book);
console.log(jsonText); // "===Java programming==="

解析选项

JSON.parse()方法也可以接收另一个参数,该参数是一个函数,将在每个键值对上调用。如果返回undefined,表示从结果中删除相应的键,如果返回其他值,则将该值插入到结果中。

var book = {
"title":"Java programming",
"authors":[
"萧萧弈寒",
],
edition: 2,
year: 2017,
releaseDate: new Date(2017, 11, 1)
};
var jsonText = JSON.stringify(book); var newBook = JSON.parse(jsonText, function (key, value) {
if (key == "releaseDate") {
return new Date(value);
} else {
return value;
}
});
console.log(newBook.releaseDate.getFullYear()); // 2017

上面新增了releaseDate属性,该属性保存着一个Date对象。经过序列化后,变成了一个有效的JSON字符串,然后又在newBook中还原成一个Date对象。

作者:萧萧弈寒
本文版权归作者萧萧弈寒和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.

JavaScript:JSON的更多相关文章

  1. JavaScript Json对象和Json对象字符串的关系 jsonObj<->JsonString

    JavaScript Json对象和Json对象字符串的关系 jsonObj<->JsonString 如下示例: 直接写的a1就是一个Json对象,a2 就是一个Json对象字符串; 通 ...

  2. JavaScript JSON timer(计时器) AJAX HTTP请求 同源策略 跨域请求

    JSON 介绍 1. JSON: JavaScript Object Notation 是一种轻量级的数据交换格式. 它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是 ...

  3. JavaScript -- JSON.parse 函数 和 JSON.stringify 函数

    JavaScript -- JSON.parse 函数 和 JSON.stringify 函数 1. JSON.parse 函数: 使用 JSON.parse 可将 JSON 字符串转换成对象. &l ...

  4. 细读 php json数据和JavaScript json数据

    关于JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量级数据格式,占用字符数量极少,特别适合互联网传递: 4.可读性较强 5.容 ...

  5. JavaScript JSON AJAX 同源策略 跨域请求

    网页和Ajax和跨域的关系 1 Ajax使网页可以动态地.异步地的与服务器进行数据交互,可以让网页局部地与服务器进行数据交互 2 Ajax强调的是异步,但是会碰到跨域的问题. 3 而有很多技术可以解决 ...

  6. javascript.json snippets vscode 注释

    vscode vue js里面的注释 javascript.json { // Place your global snippets here. Each snippet is defined und ...

  7. javascript json写法

    javascript json写法 var shuxing = {name:"super",sex:"19",work:"IT"}; 这个k ...

  8. JavaScript JSON 与 AJAX

    JavaScript JSON 与 AJAX JSON 是一种轻量的数据交互格式,与 AJAX 配合完成前端页面与服务端的信息传递,本文介绍 JSON 的使用.原生 AJAX 写法.JSONP 跨域解 ...

  9. javascript json字符串与对象相互转换

    在实际项目中,经常遇到字符格式的问题,记下来以便日后方便查看.用到两个函数:JSON.stringify() 和 JSON.parse(). 使用ajax向后台请求数据,后台给前端返回数据,明明后端脚 ...

  10. Sublime Text插件:HTML+CSS+JAVASCRIPT+JSON快速格式化[转]

    今天在github上乱逛,无意间找到victorporof分享的htmlpretty插件,特做推荐: 先看看他是怎么描述htmlpretty的: This is a Sublime Text 2 an ...

随机推荐

  1. Android 学习第3课,小例子

    package temperature.convert; import java.util.Scanner; public class Converter { public static void m ...

  2. Ubuntu 系统密码相关问题

    第一个问题: Ubuntu 密码失效解决办法 拷贝:http://www.myexception.cn/operating-system/1707766.html ubuntu14.04突然不能登录, ...

  3. ZFS(一):ZFS在Debian GNU/Linux上的安装

    以下内容翻译自https://pthree.org/2012/04/17/install-zfs-on-debian-gnulinux/,并附有原文,由于是第一次翻译,如有任何翻译不恰当之处,欢迎指出 ...

  4. ABBYY有哪些图像处理选项

    ABBYY PDF Transformer+ 这款Ocr图文识别软件提供多种图像处理选项,可提高源图像的质量,便于准确地识别光学字符.我们扫描纸质文档或从图像文件创建 PDF 时,务必选择合适的图像处 ...

  5. Sea.js学习3——Sea.js的CMD 模块定义规范

    在 Sea.js 中,所有 JavaScript 模块都遵循 CMD(Common Module Definition) 模块定义规范.该规范明确了模块的基本书写格式和基本交互规则. 在 CMD 规范 ...

  6. Redis客户端之Spring整合Jedis,ShardedJedisPool集群配置

    Jedis设计 Jedis作为推荐的java语言redis客户端,其抽象封装为三部分: 对象池设计:Pool,JedisPool,GenericObjectPool,BasePoolableObjec ...

  7. bzoj2518: [Shoi2010]滚动的正四面体

    Description 正四面体总共有4个面,每个面都是一个正三角形.现在把它的一个面标记上字母A,如图 3中所示,A标记在底面上: 于是,这个正四面体的滚动过程就可以用一个只包含“L”“R”“B”的 ...

  8. 利用Gson和SharePreference存储结构化数据

    问题的导入 Android互联网产品通常会有很多的结构化数据需要保存,比如对于登录这个流程,通常会保存诸如username.profile_pic.access_token等等之类的数据,这些数据可以 ...

  9. gerrit集成gitweb:Error injecting constructor, java.io.IOException: Permission denied

    使用gerrit账户在centos上安装gerrit,然后集成gitweb,gerrit服务启动失败,查看日志,报错信息如下: [-- ::,] ERROR com.google.gerrit.pgm ...

  10. IT之人生感悟

    从实习到现在,一直在做程序开发,工作了也有1年了吧,日子也就这么浑浑噩噩的过去了,想想将要毕业那会,原本有想考研的打算,最后还是出于各方面考虑不了了之,相比考研族提早步入了社会,既然路是自己选的,那必 ...