写博客，记录生活——JSON的学习

最新推荐文章于 2025-08-04 19:14:12 发布

原创最新推荐文章于 2025-08-04 19:14:12 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#json #javascript

首先要了解什么是JSON？

JSON：JavaScript 对象表示法（JavaScript Object Notation）。

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式，类似 XML。

JSON 比 XML 更小、更快，更易解析。
notation
英 [nəʊˈteɪʃn] 美 [noʊˈteɪʃn]
符号;(数学、科学和音乐中的)记号;谱号

和xml一样：
JSON 是纯文本
JSON 具有“自我描述性”（人类可读）

JSON是一种取代XML的数据结构，和xml相比，它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度。

提示：XML也是一种传输数据的结构。
提示：JSON小巧的原因是它可以用更少的代码来表示相同的信息，传输起来也就自然更快。
提示：自我描述性表示我们人类读得懂的。

下面了解一下JSON的结构

JSON就是一串字符串只不过元素会使用特定的符号标注。（主要的一共有四种符号）

{} 双括号表示对象

[] 中括号表示数组

“” 双引号内是属性或值

：冒号表示后者是前者的值(这个值可以是字符串、数字、也可以是另一个数组或对象)

所以 {“name”: “Michael”} 可以理解为是一个包含name为Michael的对象

而[{“name”: “Michael”},{“name”: “Jerry”}]就表示包含两个对象的数组

JSON 与 JS 对象的关系

很多人搞不清楚 JSON 和 JS 对象的关系。其实，可以这么理解：
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
就比如说：

1 var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的 
1 var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串

// json在JavaScript中的实例

var txt = '{ "sites" : [' +
'{ "name":"百度" , "url":"www.baidu.com" },' +
'{ "name":"google" , "url":"www.djznrobot.com" },' +
'{ "name":"微博" , "url":"www.djznrobot.com" } ]}';

var obj = eval ("(" + txt + ")");

document.getElementById("name").innerHTML=obj.sites[0].name
document.getElementById("url").innerHTML=obj.sites[0].url

由于 JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。

eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：

或者理解成这是eval本身的问题。由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行

自己尝试小练习

下面展示一些 内联代码片。

//练习代码

{
    "teacher":[{
        "chinese":"小李"
    },{
        "english":"小陈"
    },{
        "math":"老张"
    },{
        "chemistry":[{
            "name":"小郭"
        },{
            "phone_number":"86xxxxxx"
        },{
            "address":"beijing"
        }]
    }],
    "student":[
        {"number":40},
        {"rate":"1:2"},
        {"average_age":17},
        {"average_score":91}
    ]
}