JS中的JSON（秒懂如何操作JSON）

目录

一、JSON介绍

1.概念

2.主要特点

3.优点

 4.使用JSON的原因

使用 XML

使用 JSON

 二、JSON语法

三、JSON使用

1.JSON的序列化

2.解析（parse) JSON

3.序列化（Stringify）JSON

四、JSON实例

1.用户信息

2.本地存储

五、JSON应用场景

六、总结

一、JSON介绍

1.概念

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于JavaScript的语法子集，但是独立于编程语言。JSON格式可以用来在网络中传输数据，也可以存储数据。JSON采用键值对的方式表示数据，其中键是字符串，值可以是字符串、数字、布尔值、数组、对象或者null。

2.主要特点

  1. 简洁性（Simplicity）：JSON的语法简洁清晰，易于阅读和编写。它由简单的键值对、数组和值组成，比起XML等其他数据格式更为简洁。

  2. 可读性（Readability）：JSON数据易于理解和解释，它使用了人们熟悉的键值对的形式，而且可以通过缩进来表示数据的层级结构，提高了可读性。

  3. 跨语言兼容性（Language Independence）：JSON是一种独立于编程语言的数据格式，可以被几乎所有编程语言支持。因此，无论是哪种编程语言，都可以轻松地解析和生成JSON格式的数据。

  4. 数据结构（Data Structure）：JSON支持复杂的数据结构，包括对象和数组的嵌套，可以表示各种形式的数据。这种灵活性使得JSON在应用程序之间传输复杂数据时非常有用。

  5. 可扩展性（Extensibility）：JSON格式是可扩展的，可以根据需要定义新的数据类型或数据结构。虽然JSON本身提供了基本的数据类型，但是它可以通过约定来支持更复杂的数据模型。

  6. 网络友好（Network Friendly）：JSON数据通常比XML等其他数据格式更小，因此在网络传输时占用的带宽更少，速度更快，对于移动设备或者网络带宽有限的环境尤其适用。

3.优点

  • 简洁易读：JSON使用简单的文本格式表示数据，易于阅读和编写。
  • 跨平台兼容：JSON是一种通用的数据格式，可以在不同编程语言和平台之间进行数据交换。
  • 易于解析和生成：JSON数据可以轻松地被解析和生成，几乎所有编程语言都有相关的解析器和生成器。
  • 支持复杂数据结构：JSON支持嵌套的对象和数组，可以表示复杂的数据结构。 

 4.使用JSON的原因

对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：

使用 XML
  • 读取 XML 文档
  • 使用 XML DOM 来循环遍历文档
  • 读取值并存储在变量中
使用 JSON
  • 读取 JSON 字符串
  • 用 eval() 处理 JSON 字符串

 二、JSON语法

JSON（JavaScript Object Notation）的语法相对简单，主要由以下几个部分组成：

 对象（Object）：对象是一组无序的键值对（key-value pairs），用花括号 {} 包裹起来。每个键值对之间用逗号 , 分隔。键和值之间使用冒号 : 分隔。键必须是字符串，而值可以是字符串、数字、布尔值、数组、对象或者null。示例：

{
  "name": "John",
  "age": 30,
  "isStudent": false,
  "languages": ["JavaScript", "Python", "Java"],
  "address": {
    "city": "New York",
    "country": "USA"
  },
  "email": null
}

数组（Array）：数组是一组有序的值的集合，用方括号 [] 包裹起来。数组中的每个值之间用逗号 , 分隔。值可以是字符串、数字、布尔值、数组、对象或者null。示例：

["apple", "banana", "orange", 42, true, null]

 值（Value）：值可以是字符串、数字、布尔值、数组、对象或者null。示例：

  • 字符串："Hello, World!"
  • 数字：42
  • 布尔值：true 或 false
  • 数组：[1, 2, 3]
  • 对象：{"key": "value"}
  • null：null

 字符串（String）：字符串是一系列Unicode字符的序列，用双引号 " 包裹起来。示例："Hello, World!"

数字（Number）：数字可以是整数或浮点数的表示，不包含其他格式（如十六进制数、八进制数等）。示例：42 或 3.14

布尔值（Boolean）：布尔值表示真（true）或假（false）的值。示例：true 或 false

空值（null）：表示空值或缺失值。示例：null

JSON的语法规则包括：

  • 键和字符串必须使用双引号 " 包裹。
  • 键值对之间使用冒号 : 分隔。
  • 键值对之间使用逗号 , 分隔。
  • 数组中的元素之间使用逗号 , 分隔。
  • JSON文本必须包含在大括号 {} 或方括号 [] 中。

 JSON是一种轻量级的数据交换格式，易于理解和编写，被广泛用于数据交换和存储。

三、JSON使用

1.JSON的序列化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var obj = {
            name:"why",  
            age : 18,
            friend:{
                name:"kobe"
            }
        }
        console.log(obj.name,obj.age)

        // 1.将obj对象进行序列化
        var objJSONString = JSON.stringify(obj)
        console.log(objJSONString)

        // 2.将对象存储到LocalStorage
        localStorage.setItem("info",objJSONString)

        var item = localStorage.getItem("info")
        console.log(item,typeof item)

        //3.将字符串转回到对象(反序列化)
        var newObj = JSON.parse(item)
        console.log(newObj)
    </script>
</body>
</html>

2.解析（parse) JSON

解析JSON意味着将JSON格式的字符串转换为对应的数据结构，如对象、数组等。在大多数编程语言中，这个过程通常由一个名为parse的函数来完成。例如，在JavaScript中，可以使用JSON.parse()函数来解析JSON字符串，将其转换为相应的JavaScript对象。示例如下：

const jsonString = '{"name": "John", "age": 30}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject); // 输出: { name: 'John', age: 30 }

3.序列化（Stringify）JSON

序列化JSON意味着将数据结构，如对象、数组等，转换为JSON格式的字符串。在大多数编程语言中，这个过程通常由一个名为stringify的函数来完成。例如，在JavaScript中，可以使用JSON.stringify()函数来序列化JavaScript对象为JSON格式的字符串。示例如下：

const jsonObject = { name: 'John', age: 30 };
const jsonString = JSON.stringify(jsonObject);
console.log(jsonString); // 输出: '{"name":"John","age":30}'

四、JSON实例

1.用户信息

创建一个包含一些用户信息的JSON对象，然后将其解析为JavaScript对象，最后将JavaScript对象序列化为JSON字符串。

// 创建一个包含用户信息的JSON对象
const userJSON = `{
  "name": "Alice",
  "age": 25,
  "email": "alice@example.com",
  "address": {
    "city": "New York",
    "zipcode": "10001"
  },
  "hobbies": ["reading", "traveling", "photography"]
}`;

// 解析JSON字符串为JavaScript对象
const userObj = JSON.parse(userJSON);

// 输出解析后的JavaScript对象
console.log(userObj);

// 访问JavaScript对象中的属性
console.log(`Name: ${userObj.name}`);
console.log(`Age: ${userObj.age}`);
console.log(`Email: ${userObj.email}`);
console.log(`City: ${userObj.address.city}`);
console.log(`Zipcode: ${userObj.address.zipcode}`);
console.log("Hobbies:");
userObj.hobbies.forEach(hobby => console.log(`- ${hobby}`));

// 创建一个JavaScript对象
const newUserObj = {
  name: "Bob",
  age: 30,
  email: "bob@example.com",
  address: {
    city: "Los Angeles",
    zipcode: "90001"
  },
  hobbies: ["coding", "playing guitar"]
};

// 序列化JavaScript对象为JSON字符串
const newUserJSON = JSON.stringify(newUserObj);

// 输出序列化后的JSON字符串
console.log(newUserJSON);

我们首先创建了一个包含用户信息的JSON字符串。然后，我们使用JSON.parse()方法将JSON字符串解析为JavaScript对象，并打印该对象的内容。接着，我们访问JavaScript对象中的属性，并演示了如何访问嵌套对象和数组。接下来，我们创建了一个新的JavaScript对象，并使用JSON.stringify()方法将其序列化为JSON字符串。最后，我们打印了序列化后的JSON字符串。

2.本地存储

将数据存储到浏览器的本地存储中，并在需要时检索和更新该数据。

// 检查浏览器是否支持本地存储
if (typeof(Storage) !== "undefined") {
    // 如果支持本地存储

    // 从本地存储中获取用户数据
    let userData = localStorage.getItem("user");

    // 检查是否已经保存了用户数据
    if (userData) {
        // 如果已经保存了用户数据，则解析为JavaScript对象
        userData = JSON.parse(userData);
        console.log("已从本地存储中获取用户数据:", userData);
    } else {
        // 如果没有保存用户数据，则创建一个新的用户对象
        userData = {
            name: "Alice",
            age: 25,
            email: "alice@example.com"
        };
        console.log("未找到本地存储中的用户数据，创建新用户数据:", userData);
    }

    // 更新用户数据
    userData.age = 26;
    console.log("更新后的用户数据:", userData);

    // 将更新后的用户数据保存到本地存储
    localStorage.setItem("user", JSON.stringify(userData));
    console.log("已将更新后的用户数据保存到本地存储");
} else {
    // 如果浏览器不支持本地存储，则输出错误消息
    console.log("抱歉，您的浏览器不支持本地存储功能");
}

我们首先检查浏览器是否支持本地存储。如果支持，则尝试从本地存储中获取名为"user"的数据。如果找到了该数据，则将其解析为JavaScript对象，并输出到控制台。如果没有找到数据，则创建一个新的用户对象，并将其保存到本地存储中。接着，我们更新了用户数据的年龄，并将更新后的数据重新保存到本地存储中。如果浏览器不支持本地存储，则输出相应的错误消息。

五、JSON应用场景

  1. Web开发：JSON在Web开发中被广泛用于客户端与服务器端之间的数据交换。前端通常通过Ajax请求从服务器获取JSON格式的数据，并将其解析后在网页上进行展示或交互。

  2. API通信：许多Web服务通过RESTful API或GraphQL等方式提供数据。这些API通常以JSON格式返回数据，因为JSON易于解析且支持复杂的数据结构，如嵌套对象和数组。

  3. 配置文件：许多应用程序使用JSON格式来存储配置信息，例如软件的偏好设置、插件配置等。JSON的易读性使得用户可以轻松编辑配置文件。

  4. 移动应用开发：JSON常用于移动应用的数据存储和交换，例如在iOS和Android应用中使用JSON格式的数据与服务器通信，或在应用中存储本地数据。

  5. 数据存储：某些小型应用程序或原型可能使用JSON作为数据存储格式，尤其是对于小规模的数据集，它比传统的数据库更加简单和灵活。

  6. 日志记录：有些系统会将日志以JSON格式记录，以便后续分析和处理。JSON的结构化特性使得日志信息更容易被解析和理解。

  7. 配置API响应：API通常会以JSON格式返回请求的响应，包括成功消息、错误消息、数据等。开发人员可以根据API响应中的JSON数据来处理请求结果。

六、总结

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于在不同系统之间进行数据传输和存储。以下是关于JSON的一些重要知识点的总结：

  1. 格式：

    • JSON采用键值对的方式存储数据。
    • 键（key）必须是字符串，值（value）可以是字符串、数字、布尔值、数组、对象或null。
    • 数据以大括号{}包裹表示对象，以中括号[]包裹表示数组。

  2. 特点：

    • 简洁：JSON数据结构简单明了，易于理解和编写。
    • 易读性：JSON数据易于阅读和解析，适合人类阅读和编写。
    • 与语言无关：JSON是一种语言无关的数据格式，几乎所有编程语言都支持JSON的解析和生成。

  3. 用途：

    • 在Web开发中用于客户端与服务器之间的数据传输。
    • API通信的数据格式，常见于RESTful API和GraphQL。
    • 配置文件的存储格式，易于人类编辑和解析。
    • 移动应用开发中的数据存储和交换格式。
    • 日志记录的数据格式，便于后续分析和处理。

  4. 解析与生成：

    • 在JavaScript中，可以使用JSON.parse()将JSON字符串解析为JavaScript对象。
    • 可以使用JSON.stringify()将JavaScript对象转换为JSON字符串。

  5. 示例：

  1. {
    "name": "John",
    "age": 30,
    "isStudent": false,
    "friends": ["Alice", "Bob"],
    "address": {
        "city": "New York",
        "country": "USA"
    },
    "nullValue": null
}

总的来说，JSON作为一种轻量级、简洁、易读的数据交换格式，在各种应用场景中都有着广泛的应用，并且是现代软件开发中不可或缺的一部分。