JSON | 青训营笔记

107 阅读3分钟

JSON青训营笔记\color{pink}JSON | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的第6\color{pink}这是我参与「第四届青训营」笔记创作活动的第6天

JSON是什么\color{pink}JSON是什么

\color{deeppink}❀JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
\color{deeppink}❀JSON 是存储和交换文本信息的语法,类似 XML。
\color{deeppink}❀JSON 比 XML 更小、更快,更易解析。
\color{deeppink}❀JSON 易于人阅读和编写。JSON 具有自我描述性,更易理解。
\color{deeppink}❀C、Python、C++、Java、PHP、Go等编程语言都支持 JSON。
\color{deeppink}❀JSON 是轻量级的文本数据交换格式
\color{deeppink}❀JSON 独立于语言:JSON 使用 Javascript语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态(PHP,JSP,.NET)编程语言都支持JSON。

XML相同之处\color{pink}与 XML 相同之处

  • JSON 是纯文本
  • JSON 具有"自我描述性"(人类可读)
  • JSON 具有层级结构(值中存在值)
  • JSON 可通过 JavaScript 进行解析
  • JSON 数据可使用 AJAX 进行传输

XML不同之处\color{pink}与 XML 不同之处

  • 没有结束标签
  • 更短
  • 读写的速度更快
  • 能够使用内建的 JavaScript eval() 方法进行解析
  • 使用数组
  • 不使用保留字

XML实例\colorbox{coral}{XML实例}

<sites> 
    <site> 
        <name>JSON</name> <url>www.runoob.com</url> 
    </site> 
    <site> 
        <name>google</name> <url>www.google.com</url> 
    </site> 
    <site> 
        <name>微博</name> <url>www.weibo.com</url> 
    </site> 
</sites>

最大的不同是:XML 需要使用 XML 解析器来解析,JSON 可以使用标准的 JavaScript 函数来解析。

JSON语法规则\color{pink}JSON 语法规则

JSON 语法是 JavaScript 对象表示语法的子集。

  • 数据在名称/值对中
  • 数据由逗号 , 分隔
  • 使用斜杆来转义 \ 字符
  • 大括号 {} 保存对象
  • 中括号 [] 保存数组,数组可以包含多个对象

JSON\color{pink}JSON 值

JSON 值可以是:

  • 数字(整数或浮点数)
  • 字符串(在双引号中)
  • 逻辑值(true 或 false)
  • 数组(在中括号中)
  • 对象(在大括号中)
  • null

JSON对象\color{pink}JSON 对象

JSON 对象在大括号 {} 中书写:

{key1 : value1, key2 : value2, ... keyN : valueN }

key 必须是字符串,value 可以是合法的 JSON 数据类型(字符串, 数字, 对象, 数组, 布尔值或 null)。
对象可以包含多个名称/值对:

{ "name":"JSON" , "url":"www.runoob.com" }

这一点也容易理解,与这条 JavaScript 语句等价:

name = "JSON" 
url = "www.runoob.com"

访问对象值\color{pink}访问对象值

你可以使用点号 . 来访问对象的值:

var myObj, x; 
myObj = { "name":"runoob", "alexa":10000, "site":null }; 
x = myObj.name;

你也可以使用中括号([])来访问对象的值:

var myObj, x; 
myObj = { "name":"runoob", "alexa":10000, "site":null }; 
x = myObj["name"];

循环对象\color{pink}循环对象

你可以使用 for-in 来循环对象的属性:

var myObj = { "name":"runoob", "alexa":10000, "site":null }; 
for (x in myObj) { 
    document.getElementById("demo").innerHTML += x + "<br>"; 
}

在 for-in 循环对象的属性时,使用中括号([])来访问属性的值:

var myObj = { "name":"runoob", "alexa":10000, "site":null }; 
for (x in myObj) { 
    document.getElementById("demo").innerHTML += myObj[x] + "<br>"; 
}

JSON数组\color{pink}JSON 数组

JSON 数组在中括号 [] 中书写:

数组可包含多个对象:\colorbox{pink}{数组可包含多个对象:}

[
    { key1 : value1-1 , key2:value1-2 }, 
    { key1 : value2-1 , key2:value2-2 }, 
    { key1 : value3-1 , key2:value3-2 }, 
    ...
    { key1 : valueN-1 , key2:valueN-2 }, 
]
{ 
    "sites": [ 
        { "name":"JSON" , "url":"www.runoob.com" }, 
        { "name":"google" , "url":"www.google.com" }, 
        { "name":"微博" , "url":"www.weibo.com" } 
    ] 
}

在上面的例子中,对象 sites 是包含三个对象的数组。每个对象代表一条关于某个网站(name、url)的记录。

嵌套JSON对象中的数组\color{pink}嵌套 JSON 对象中的数组

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON嵌套数组</title>
</head>
<body>

<p>循环内嵌数组:</p>

<p id="demo"></p>

<script>

var myObj, i, j, x = "";
myObj = {
    "name":"网站",
    "num":3,
    "sites": [
        { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
        { "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] },
        { "name":"Taobao", "info":[ "淘宝", "网购" ] }
    ]
}

for (i in myObj.sites) {
    x += "<h1>" + myObj.sites[i].name + "</h1>";
    for (j in myObj.sites[i].info) {
        x += myObj.sites[i].info[j] + "<br>";
    }
}

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

</script>

</body>
</html>

JSON布尔值\color{pink}JSON 布尔值

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

{ "flag":true }

JSONnull\color{pink}JSON null

JSON 可以设置 null 值:

{ "runoob":null }

JSON使用JavaScript语法\color{pink}JSON 使用 JavaScript 语法

因为 JSON 使用 JavaScript 语法,所以无需额外的软件就能处理 JavaScript 中的 JSON。

通过 JavaScript,您可以创建一个对象数组,并像这样进行赋值:

var sites = [ 
    { "name":"runoob" , "url":"www.runoob.com" }, 
    { "name":"google" , "url":"www.google.com" },
    { "name":"微博" , "url":"www.weibo.com" } 
];

可以像这样访问 JavaScript 对象数组中的第一项(索引从 0 开始):

sites[0].name;

返回的内容是:runoob

可以像这样修改数据:

sites[0].name="JSON";