JSON 入门之 JSON 的语法规则（二）

雨点打透心脏的1/2处 2022-09-23 11:56 129阅读 0赞

**JSON 语法规则**

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

数据在名称/值对中；数据由逗号分隔；花括号保存对象；方括号保存数组。

**JSON 名称/值对**

JSON 数据的书写格式是：名称/值对。

名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：

"firstName" : "John"

这很容易理解，等价于这条 JavaScript 语句：

firstName = "John"

**JSON 值可以是：**

数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true 或 false）、数组（在方括号中）、对象（在花括号中）、null

**JSON 对象**

JSON 对象在花括号中书写：

对象可以包含多个名称/值对：

\{ "firstName":"John" , "lastName":"Doe" \}

这一点也容易理解，与这条 JavaScript 语句等价：

firstName = "John"

lastName = "Doe"

**JSON 数组**

JSON 数组在方括号中书写：

数组可包含多个对象：

"employees": \[

\{ "firstName":"John" , "lastName":"Doe" \},

\{ "firstName":"Anna" , "lastName":"Smith" \},

\{ "firstName":"Peter" , "lastName":"Jones" \}

在上面的例子中，对象 "employees" 是包含三个对象的数组。每个对象代表一条关于某人（有姓和名）的记录。

**JSON 使用 JavaScript 语法**

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

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

var employees = \[

\{ "firstName":"John" , "lastName":"Doe" \},

\{ "firstName":"Anna" , "lastName":"Smith" \},

\{ "firstName":"Peter" , "lastName": "Jones" \}

\];

可以像这样访问 JavaScript 对象数组中的第一项：

employees\[0\].lastName;

返回的内容是：

Doe

可以像这样修改数据：

employees\[0\].firstName = "Jonatan";

JSON 使用

把 JSON 文本转换为 JavaScript 对象

JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。

**创建包含 JSON 语法的 JavaScript 字符串：**

var txt = '\{ "employees" : \[' +

'\{ "firstName":"John" , "lastName":"Doe" \},' +

'\{ "firstName":"Anna" , "lastName":"Smith" \},' +

'\{ "firstName":"Peter" , "lastName":"Jones" \} \]\}';

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

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

**在网页中使用 JavaScript 对象：**

实例

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    <h2>从 JSON 字符串中创建对象</h2>
    <p>
        名: <span id="fname"></span><br>
        姓: <span id="lname"></span><br>
    </p>
    <script>
        var txt = '{"employees":[' +
                '{"firstName":"John","lastName":"Doe" },' +
                '{"firstName":"Anna","lastName":"Smith" },' +
                '{"firstName":"Peter","lastName":"Jones" }]}';
    
        var obj = eval ("(" + txt + ")");
    
        document.getElementById("fname").innerHTML=obj.employees[1].firstName;
        document.getElementById("lname").innerHTML=obj.employees[1].lastName;
    </script>
    </body>
    </html>

页面显示结果

## 从 JSON 字符串中创建对象 ##

名: Anna  
姓: Smith

JSON 解析器

lamp eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。

使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。

在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。

较新的浏览器和最新的 ECMAScript (JavaScript) 标准中均包含了原生的对 JSON 的支持。

**Web 浏览器支持**

Firefox (Mozilla) 3.5、Internet Explorer 8、Chrome、Opera 10、Safari 4

**Web 软件支持**

jQuery、Yahoo UI、Prototype、Dojo、ECMAScript 1.5