前端学习之 JavaScript 之 JSON

一．JSON的简介

1.什么是JSON

JSON 英文全称 JavaScript Object Notation

JSON 是一种轻量级的数据交换格式。

JSON是独立的语言 *

JSON 易于理解。

2.json的起源

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

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

道格拉斯同学长期担任雅虎的高级架构师，自然钟情于JavaScript。他设计的JSON实际上是JavaScript的一个子集。

3.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中直接使用这个对象了。

(1)JSON 数字

JSON 数字可以是整型或者浮点型：

{ "age":30 }

(2)JSON 布尔值

JSON 布尔值可以是 true 或者 false：

{ "flag":true }

(3)JSON string

JSON的数据可以是字符串类型

{ "name":"hsz" }

(4)JSON null

JSON 可以设置 null 值：

{ "sex":null }

(5)JSON 数组

JSON 数组在中括号中书写：

数组可包含多个对象：

var JSONArray= { "personinfo":[

{"name":"hsz",}

{"age": 25, }

{"slogan":"学就是了！"}

]

};

(6)JSON 对象

JSON 对象在大括号（{}）中书写：

对象可以包含多个名称/值对：(类似于python的字典)

{ "name":"hsz" , "url":"https://home.cnblogs.com/u/hszstudypy/" }

二．JOSN 对象与JSON 数组介绍

1.JSON对象

(1)对象语法

{ "name":"hsz", "alexa":10000, "site":null }

JSON 对象使用在大括号({})中书写。

对象可以包含多个 key/value（键/值）对。

key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。

key 和 value 中使用冒号(:)分割。

每个 key/value 对使用逗号(,)分割。

(2)访问对象值

你可以使用点号（.）来访问对象的值：

例：

<body>

<p>你可以使用点号（.）来访问 JSON 对象的值：</p>

var myObj, x;

myObj = { "name":"hsz", "alexa":10000, "site":"www.hsz.com" };

x = myObj.site;

document.getElementById("demo").innerHTML = x;

</script>

</body>

(3)嵌套 JSON 对象

例：

<body>

myObj = {

"name":"hsz",

"alexa":10000,

"sites": {

"site1":"www.hsz.com",

"site2":"one.hsz.com",

"site3":"two.hsz.com"

}

document.getElementById("demo").innerHTML += myObj.sites.site2 + "<br>";

// 或者

document.getElementById("demo").innerHTML += myObj.sites["site2"];

</script>

</body>

(4)修改值

你可以使用点号(.)来修改 JSON 对象的值：

<body>

var myObj, i, x = "";

myObj = {

"name":"hsz",

"alexa":10000,

"sites": {

"site1":"www.hsz.com",

"site2":"one.hsz.com",

"site3":"two.hsz.com"

}

document.getElementById("demo").innerHTML += myObj.sites["site2"];

myObj.sites.site1 = "www.google.com";

for (i in myObj.sites) {

x += myObj.sites[i] + "<br>";

}

document.getElementById("demo1").innerHTML = myObj.name;

document.getElementById("demo2").innerHTML = myObj.sites.site1;

</script>

</body>

(5)删除 JSON 对象的属性

我们可以使用 delete 关键字来删除 JSON 对象的属性：

delete myObj.sites.site1;

或

delete myObj.sites["site1"]

例：

<body>

var myObj, i, x = "";

myObj = {

"name":"hsz",

"alexa":10000,

"sites": {

"site1":"www.hsz.com",

"site2":"one.hsz.com",

"site3":"two.hsz.com"

}

delete myObj.sites.site1;

for (i in myObj.sites) {

x += myObj.sites[i] + "<br>";

}

document.getElementById("demo").innerHTML = x;

</script>

(6)JavaScript 创建 JSON 对象

例：

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<h2>JavaScript 创建 JSON 对象</h2>

<p>

网站名称: <span id="jname"></span><br />

网站地址: <span id="jurl"></span><br />

网站 slogan: <span id="jslogan"></span><br />

</p>

var JSONObject= {

"name":"hsz",

"url":"https://home.cnblogs.com/u/hszstudypy/",

"slogan":"学就是了！"

};

document.getElementById("jname").innerHTML=JSONObject.name

document.getElementById("jurl").innerHTML=JSONObject.url

document.getElementById("jslogan").innerHTML=JSONObject.slogan

</script>

</body>

</html>

2.JSON 数组

(1)数组作为 JSON 对象

[ "Google", "baidu", "taobao" ]

JSON 数组在中括号中书写。

JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。

JavaScript 中，数组值可以是以上的 JSON 数据类型，也可以是 JavaScript 的表达式，包括函数，日期，及 undefined。

(2)JSON 对象中的数组

对象属性的值可以是一个数组：

var myObj

myObj = {

"person":"人",

"num":3,

"name":[ "zero", "one", "two" ]

}

我们可以使用索引值来访问数组：

myObj.sites[1]

// 值为one

(3)循环数组

你可以使用 for-in 来访问数组：

例：

<body>

var myObj, i, x = "";

myObj = {

"person":"人",

"num":3,

"name":[ "zero", "one", "two" ]

};

for (i in myObj.name) {

x += myObj.name[i] + "<br>";

}

document.getElementById("demo").innerHTML = x;

</script>

</body>

(4)嵌套 JSON 对象中的数组

JSON 对象中数组可以包含另外一个数组，或者另外一个 JSON 对象：

例：

<body>

var myObj, i, j, x = "";

myObj = {

"name":"个人数据",

"num":3,

"person": [

{ "name":"one", "info":[ 24, "男", "翻译官" ] },

{ "name":"two", "info":[ 20, "女", "学生" ] },

{ "name":"three", "info":[ 25, "男" ] }

]

}

document.getElementById("demo").innerHTML = myObj.person[0].info[2];

</script>

(5)修改数组值

你可以使用索引值来修改数组值：

例：

将（4）中的：

document.getElementById("demo").innerHTML = myObj.person[0].info[2];

改为：

myObj.person[0].info[2] = "软件开发工程师"

document.getElementById("demo").innerHTML = myObj.person[0].info;

(运行后可以知道，职业被修改了)

(6)删除数组元素

我们可以使用 delete 关键字来删除数组元素：

将（4）中的：

document.getElementById("demo").innerHTML = myObj.person[0].info[2];

改为：

delete myObj.person[0].info[1];

document.getElementById("demo").innerHTML = myObj.person[0].info;

(运行后可以知道，性别参数被删除)

三．JSON 序列化与返序列化

1.序列化 JSON.stringify(序列化数据);

JSON 通常用于与服务端交换数据。

在向服务器发送数据时一般是字符串。

我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

例：

var xiaoming = {

name: '小明',

age: 14,

gender: true,

height: 1.65,

grade: null,

'middle-school': '\"W3C\" Middle School',

skills: ['JavaScript', 'Java', 'Python', 'Lisp']

};

var s = JSON.stringify(xiaoming);

console.log(s);

输出结果为：

{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}

注意这个结果的类型是字符串。

2.反序列化 JSON.parse(反序列化数据);

拿到一个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()还可以接收一个函数，用来转换解析出的属性：

例：

var obj = JSON.parse('{"name":"小明","age":14}', function (key, value) {

if (key === 'name') {

return value + '同学';

}

return value;

});

console.log(JSON.stringify(obj)); // {name: '小明同学', age: 14}