JavaScript JSON

JavaScript 和 JSON

JSON (JavaScript Object Notation) 是一种轻量级、基于文本的数据格式，用于存储和传输数据。它常用于服务器与 Web 应用程序之间的数据交换，或用于配置文件。

什么是 JSON？

JSON 是 JavaScript Object Notation 的缩写（JavaScript 对象表示法）。
它是一种轻量级的数据交换格式。
JSON 是独立于语言的，尽管其语法源自 JavaScript 对象字面量语法。
它被设计成易于人类阅读，也易于机器解析和生成。

虽然 JSON 的语法是 JavaScript 对象字面量语法的一个子集，但 JSON 本身纯粹是一种字符串格式。用 JSON 格式表示的数据几乎可以被任何编程语言轻松读取和生成。

JSON 示例

这个 JSON 示例定义了一个对象，其中包含一个名为 “employees” 的属性，它是一个包含三个员工对象的数组：

{
    "employees": [
        {
            "firstName": "John",
            "lastName": "Doe",
            "department": "Engineering"
        },
        {
            "firstName": "Anna",
            "lastName": "Smith",
            "department": "Marketing"
        },
        {
            "firstName": "Peter",
            "lastName": "Jones",
            "department": "Sales"
        }
    ]
}

JSON 与 JavaScript 对象

JSON 格式在语法上与 JavaScript 对象字面量非常相似。这种相似性使得 JavaScript 程序可以轻松地将 JSON 数据转换为原生 JavaScript 对象，反之亦然。

JSON.parse(): 一个内置的 JavaScript 函数，用于将 JSON 字符串转换为 JavaScript 对象。
JSON.stringify(): 一个内置的 JavaScript 函数，用于将 JavaScript 对象转换为 JSON 字符串。

JSON 语法规则

数据以名称/值对的形式存在（例如，"name": "value"）。
键（名称）必须是字符串，用双引号括起来。
值可以是字符串（双引号）、数字、布尔值（true 或 false）、数组（方括号 [] 内）或其他 JSON 对象（花括号 {} 内）。
数据之间用逗号分隔。
花括号 {} 用于包含对象。
方括号 [] 用于包含数组。

JSON 数据：名称/值对

JSON 数据以名称/值对的形式编写。一个名称/值对包含一个字段名称（双引号内），后跟一个冒号，再后跟一个值：

“firstName”: “John”

	重要提示：在 JSON 中，键（名称）必须用双引号括起来。在 JavaScript 对象字面量中，如果键是有效的标识符，则键周围的引号通常是可选的。

JSON 对象

JSON 对象写在花括号 {} 内。它们可以包含多个名称/值对：

{“firstName”: “John”, “lastName”: “Doe”}

JSON 数组

JSON 数组写在方括号 [] 内。数组可以包含值的列表，包括 JSON 对象：

“employees”: [ {“firstName”: “John”, “lastName”: “Doe”}, {“firstName”: “Anna”, “lastName”: “Smith”}, {“firstName”: “Peter”, “lastName”: “Jones”} ]

在上面的示例中，与 “employees” 键关联的值是一个数组。该数组包含三个 JSON 对象，每个对象代表一名员工。

将 JSON 转换为 JavaScript 对象

JSON 的一个常见用途是从 Web 服务器 (API) 获取数据并将其显示在网页上。获取的数据通常是 JSON 字符串。

首先，你有一个包含 JSON 格式数据的 JavaScript 字符串：

const jsonString = '{
    "employees": [
        { "firstName":"John" , "lastName":"Doe" },
        { "firstName":"Anna" , "lastName":"Smith" },
        { "firstName":"Peter" , "lastName":"Jones" }
    ]
}';

然后，使用 JavaScript 内置函数 JSON.parse() 将 JSON 字符串转换为 JavaScript 对象：

const data = JSON.parse(jsonString);

最后，你可以在页面中使用新的 JavaScript 对象。例如，显示第二个员工的名字和姓氏：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON Parsing Example</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        const jsonString = '{\n            "employees": [\n                { "firstName":"John" , "lastName":"Doe" },\n                { "firstName":"Anna" , "lastName":"Smith" },\n                { "firstName":"Peter" , "lastName":"Jones" }\n            ]\n        }';

        const data = JSON.parse(jsonString);

        const displayElement = document.getElementById("demo");
        if (displayElement && data.employees && data.employees.length > 1) {
            displayElement.textContent =
                data.employees[1].firstName + " " + data.employees[1].lastName;
        } else {
            // 处理元素或数据未按预期的情况
            console.error("Could not display employee data.");
        }
    </script>
</body>
</html>

有关处理异步数据获取（例如，来自 API）的更深入信息，你可以探索 Fetch API 或像 Axios 这样的库。这些内容将在更高级的 JavaScript 主题中介绍。