json在js页面怎么用

浅出：JSON在前端JavaScript中的实用指南**

在现代Web开发中,JSON（JavaScript Object Notation，JavaScript对象表示法）无疑是一种轻量级的数据交换格式，它易于人阅读和编写，也易于机器解析和生成，成为了前后端数据交互的“通用语言”，在前端JavaScript页面中，我们究竟如何使用JSON呢？本文将从JSON的基本概念、在JS中的核心操作（序列化与反序列化）以及实际应用场景三个方面进行详细阐述。

JSON是什么？为何如此流行？

JSON是基于JavaScript语言的一个子集,但它是独立于语言的，它采用完全独立于编程语言的文本格式来存储和表示数据，简洁的语法使其成为理想的数据交换语言。

JSON的常见结构有两种：

对象（Object）：用花括号表示，是一组无序的键值对集合，键（key）必须是字符串，且必须用双引号包围；值（value）可以是字符串、数字、布尔值、null、数组，甚至是另一个对象。
- 示例：{"name": "张三", "age": 30, "isStudent": false}
数组（Array）：用方括号 [] 表示，是一组有序的值列表，值可以是任何有效的JSON数据类型。
- 示例：[1, "apple", true, {"city": "北京"}]

JSON之所以流行,是因为：

轻量级：相比XML等格式，JSON更简洁，数据量更小，传输效率更高。
易读易写：结构清晰，接近自然语言，便于开发人员理解和调试。
易于机器解析和生成：几乎所有编程语言都提供了JSON解析和生成的库。
与JavaScript无缝集成：它是JavaScript的子集，在JS中使用非常方便。

在JavaScript页面中操作JSON的核心方法

在JavaScript页面中处理JSON,主要涉及两个核心操作：将JavaScript对象/数组转换为JSON字符串（序列化/JSON化） 和 将JSON字符串解析为JavaScript对象/数组（反序列化/解析JSON）。

JSON.stringify()：将JS对象/数组转换为JSON字符串

当我们需要将JavaScript中的数据（如对象、数组）通过AJAX发送给服务器，或者存储到localStorage等地方时，通常需要先将其转换为JSON字符串。

语法： JSON.stringify(value[, replacer[, space]])

value: 必需，要转换的JavaScript对象或数组。
replacer: 可选，用于转换结果的函数或数组，如果是函数，则每个属性都会经过该函数处理；如果是数组，则只有包含在该数组中的属性名才会被转换。
space: 可选，用于美化输出结果的缩进和空白字符，可以是数字（表示缩空格数，最大10）或字符串（用作缩进字符）。

示例：

const user = {
  name: "李四",
  age: 25,
  hobbies: ["reading", "coding"],
  address: {
    city: "上海",
    district: "浦东"
  }
};
// 基本转换
const jsonString1 = JSON.stringify(user);
console.log(jsonString1);
// 输出: {"name":"李四","age":25,"hobbies":["reading","coding"],"address":{"city":"上海","district":"浦东"}}
// 美化输出（使用2个空格缩进）
const jsonString2 = JSON.stringify(user, null, 2);
console.log(jsonString2);
/* 输出:
{
  "name": "李四",
  "age": 25,
  "hobbies": [
    "reading",
    "coding"
  ],
  "address": {
    "city": "上海",
    "district": "浦东"
  }
}
*/
// 使用replacer函数，只转换特定属性或修改值
const jsonString3 = JSON.stringify(user, (key, value) => {
  if (key === "age") {
    return value + "岁"; // 给年龄加上"岁"字
  }
  if (key === "address") {
    return undefined; // 忽略address属性
  }
  return value;
});
console.log(jsonString3);
// 输出: {"name":"李四","age":"25岁","hobbies":["reading","coding"]}

JSON.parse()：将JSON字符串解析为JS对象/数组

当我们从服务器接收到JSON格式的响应数据,或者从localStorage中读取JSON字符串时，需要使用JSON.parse()将其转换为JavaScript对象或数组，以便在页面中进行操作。

语法： JSON.parse(text[, reviver])

text: 必需，要解析的JSON字符串。
reviver: 可选，一个转换结果的函数，在返回之前，该函数会遍历每个键值对并对值进行处理。

示例：

const jsonString = '{"name":"王五","age":28,"isMarried":false,"courses":["math","physics"]}';
// 基本解析
const parsedObject = JSON.parse(jsonString);
console.log(parsedObject);
// 输出: {name: "王五", age: 28, isMarried: false, courses: Array(2)}
console.log(parsedObject.name); // 输出: 王五
console.log(parsedObject.courses[0]); // 输出: math
// 使用reviver函数，对解析后的值进行处理
const parsedObjectWithReviver = JSON.parse(jsonString, (key, value) => {
  if (key === "age") {
    return value + "岁"; // 给年龄加上"岁"字
  }
  if (typeof value === "string" && value.includes("th")) {
    return value.toUpperCase(); // 将包含"th"的字符串转为大写
  }
  return value;
});
console.log(parsedObjectWithReviver);
// 输出: {name: "王五", age: "28岁", isMarried: false, courses: ["MATH", "PHYSICS"]}

注意事项：

JSON.parse()要解析的字符串必须是合法的JSON格式，否则会抛出SyntaxError异常。
JSON字符串中的键名必须用双引号包围，单引号是不合法的。
JavaScript中的undefined、函数、Symbol以及Date对象等特殊类型，在JSON.stringify()时会被忽略或转换为null；而在JSON.parse()时，无法直接恢复为这些原始JS类型。

JSON在前端页面中的实际应用场景

AJAX/Fetch 数据交互

这是JSON最核心的应用场景,前端通过AJAX（如XMLHttpRequest）或Fetch API从服务器获取数据时，服务器通常会将数据以JSON格式返回，前端收到JSON字符串后，使用JSON.parse()解析为JS对象，再动态渲染到页面上。

// 使用Fetch API获取JSON数据
fetch('https://api.example.com/users')
  .then(response => response.json()) // response.json()内部就是调用了JSON.parse()
  .then(data => {
    console.log(data); // data已经是解析后的JS对象数组
    // 在这里处理数据，例如渲染到页面
    data.forEach(user => {
      console.log(user.name, user.email);
    });
  })
  .catch(error => console.error('Error:', error));

本地存储（localStorage/sessionStorage）

localStorage和sessionStorage只能存储字符串类型的数据，当我们需要存储对象或数组时，可以先用JSON.stringify()将其转换为JSON字符串存储，读取时再用JSON.parse()转换回来。

const userData = { id: 1, username: "testUser", preferences: { theme: "dark" } };
// 存储数据
localStorage.setItem('user', JSON.stringify(userData));
// 读取数据
const storedUserDataString = localStorage.getItem('user');
if (storedUserDataString) {
  const storedUserData = JSON.parse(storedUserDataString);
  console.log(storedUserData.username); // 输出: testUser
  console.log(storedUserData.preferences.theme); // 输出: dark
}

配置文件

在复杂的单页应用中,有时会使用JSON来存储一些静态的配置信息，比如应用标题、API端点、默认设置等，然后在JS中读取这些配置。

数据缓存

对于不经常变化的数据,可以将其转换为JSON字符串存储在变量或sessionStorage中，避免重复请求服务器，提高性能。

JSON作为前后端数据交换的基石,在前端JavaScript开发中扮演着至关重要的角色，JSON.stringify()和JSON.parse()这两个核心方法，是每一位前端开发者的必备技能，通过本文的学习，相信你已经对JSON在JS页面中的使用有了清晰的认识，在实际开发中，多加练习，结合AJAX、本地存储等场景进行实践，你将能够熟练运用JSON来高效地处理和传输数据，理解JSON的结构和特性，

企鹅直播企鹅直播足球直播爱奇艺直播爱奇艺足球直播足球直播足球直播