前端学习之 JavaScript 之 JSON

时间 2019-12-09

标签前端学习 javascript json 栏目 JavaScript 繁體版

原文原文链接

一．JSON的简介

1.什么是JSON

JSON 英文全称 JavaScript Object Notationhtml

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

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}

前端学习 之 JavaScript 之 JSON

一．JSON的简介

1.什么是JSON

2.json的起源

3.json的数据类型及表示

(1)JSON 数字

(2)JSON 布尔值

(3)JSON string

(4)JSON null

(5)JSON 数组

(6)JSON 对象

二．JOSN 对象 与JSON 数组介绍

1.JSON对象

(1)对象语法

(2)访问对象值

(3)嵌套 JSON 对象

(4)修改值

(5)删除 JSON 对象的属性

(6)JavaScript 建立 JSON 对象

2.JSON 数组

(1)数组做为 JSON 对象

(2)JSON 对象中的数组

(3)循环数组

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

(5)修改数组值

(6)删除数组元素

三．JSON 序列化与返序列化

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

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

前端学习之 JavaScript 之 JSON

二．JOSN 对象与JSON 数组介绍