js怎么使用json

轻松：JavaScript 中如何使用 JSON**

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于 JavaScript 的一个子集，易于人阅读和编写，同时也易于机器解析和生成，在现代 Web 开发中，JSON 已成为前后端数据交换的事实标准，本文将详细介绍 JavaScript 如何使用 JSON，包括 JSON 的基本概念、与 JavaScript 对象的互转、以及实际应用场景。

什么是 JSON？

JSON 是一种文本格式，它采用完全独立于编程语言的格式来存储和表示数据，其结构简单,主要由两种结构组成：

对象（Object）：无序的键值对集合，以包裹，键（key）必须是字符串，值（value）可以是字符串、数字、布尔值、数组、null，甚至是另一个对象或 JSON 数组，键和值之间用分隔，键值对之间用分隔。
- 示例：{"name": "张三", "age": 30, "isStudent": false}
数组（Array）：值的有序列表，以 [] 包裹，数组中的值可以是字符串、数字、布尔值、数组、对象、null 等，值之间用分隔。
- 示例：[1, "apple", true, {"city": "北京"}]

JavaScript 中 JSON 与对象的互转

JavaScript 操作 JSON 的核心在于将 JSON 字符串解析为 JavaScript 对象（或数组），以及将 JavaScript 对象（或数组）序列化为 JSON 字符串。

将 JSON 字符串解析为 JavaScript 对象/数组

使用 JSON.parse() 方法。

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

text: 必需，一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数,将在返回之前对对象的每个成员调用此函数。

示例：

// JSON 字符串
const jsonString = '{"name": "李四", "age": 25, "hobbies": ["reading", "music"]}';
// 解析为 JavaScript 对象
const jsObject = JSON.parse(jsonString);
console.log(jsObject); // 输出: { name: '李四', age: 25, hobbies: [ 'reading', 'music' ] }
console.log(jsObject.name); // 输出: 李四
console.log(jsObject.hobbies[0]); // 输出: reading
// JSON 数组字符串
const jsonArrayString = '[{"id": 1, "task": "学习JS"}, {"id": 2, "task": "写代码"}]';
const jsArray = JSON.parse(jsonArrayString);
console.log(jsArray); // 输出: [ { id: 1, task: '学习JS' }, { id: 2, task: '写代码' } ]
console.log(jsArray[1].task); // 输出: 写代码

注意事项：

JSON.parse() 要求字符串必须是格式正确的 JSON，否则会抛出 SyntaxError。
JSON 中对象的键必须是双引号括起来的字符串，JavaScript 对象的键可以用单引号或双引号（或无引号，如果是合法标识符），但在转换为 JSON 字符串时,键会被强制转为双引号。

将 JavaScript 对象/数组序列化为 JSON 字符串

使用 JSON.stringify() 方法。

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

value: 必需，要转换成 JSON 字符串的 JavaScript 对象、数组、基本值或 null。
replacer: 可选，可以是一个函数或数组,用于控制如何序列化对象。
space: 可选，一个字符串或数字，用于美化输出（缩进）。

示例：

// JavaScript 对象
const jsObject = {
    name: "王五",
    age: 28,
    hobbies: ["traveling", "photography"],
    address: null
};
// 序列化为 JSON 字符串
const jsonString = JSON.stringify(jsObject);
console.log(jsonString); // 输出: {"name":"王五","age":28,"hobbies":["traveling","photography"],"address":null}
// 使用 space 参数美化输出
const prettyJsonString = JSON.stringify(jsObject, null, 2); // 2 表示缩进2个空格
console.log(prettyJsonString);
/* 输出:
{
  "name": "王五",
  "age": 28,
  "hobbies": [
    "traveling",
    "photography"
  ],
  "address": null
}
*/
// 使用 replacer 函数（只序列化指定的属性）
const filteredJsonString = JSON.stringify(jsObject, (key, value) => {
    if (key === "age") {
        return undefined; // 过滤掉 age 属性
    }
    return value;
});
console.log(filteredJsonString); // 输出: {"name":"王五","hobbies":["traveling","photography"],"address":null}

注意事项：

JSON.stringify() 会忽略值为 undefined、函数和 Symbol 的属性。
循环引用的对象会导致 JSON.stringify() 抛出错误。

JavaScript 使用 JSON 的实际场景

从服务器获取 JSON 数据（AJAX/Fetch API） 这是 JSON 最常见的用途之一，后端 API 通常返回 JSON 格式的数据，前端 JavaScript 通过 Fetch API 或 XMLHttpRequest 来获取这些数据，并将其解析为 JavaScript 对象进行处理。

示例（使用 Fetch API）：

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json(); // response.json() 返回一个 Promise，解析响应体为 JSON
    })
    .then(data => {
        console.log(data); // data 是解析后的 JavaScript 对象
        // 在这里处理数据...
    })
    .catch(error => {
        console.error('There was a problem with the fetch operation:', error);
    });

将数据发送到服务器 当需要将前端的数据发送到后端时，通常会将 JavaScript 对象或数组通过 JSON.stringify() 转换为 JSON 字符串,然后在请求体中发送。

示例（使用 Fetch API POST 请求）：

const userData = {
    username: 'testuser',
    email: 'test@example.com',
    password: '123456'
};
fetch('https://api.example.com/register', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json', // 告诉服务器发送的是 JSON 数据
    },
    body: JSON.stringify(userData) // 将对象转换为 JSON 字符串
})
.then(response => response.json())
.then(data => {
    console.log('Success:', data);
})
.catch(error => {
    console.error('Error:', error);
});

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

示例：

const myData = { id: 1, settings: { theme: 'dark', notifications: true } };
// 存储
localStorage.setItem('myAppData', JSON.stringify(myData));
// 读取
const storedDataString = localStorage.getItem('myAppData');
const storedData = JSON.parse(storedDataString);
console.log(storedData.settings.theme); // 输出: dark

配置文件和数据交换 在前端项目中，JSON 常用于存储配置信息（如 API 端点、主题色等）,也可以用于在不同模块或不同系统之间交换结构化数据。

注意事项与最佳实践

JSON vs JavaScript 对象：
- JSON 是一种数据格式，JavaScript 对象是 JS 的一种数据类型。
- JSON 的键必须用双引号，JavaScript 对象的键可以用单引号、双引号或无引号（如果合法）。
- JSON 中不支持函数、undefined、Symbol 作为值，JavaScript 对象支持。
安全性：
- 使用 JSON.parse() 解析来自不可信源的 JSON 字符串时，要小心潜在的恶意代码，虽然 JSON.parse() 本身不会执行代码，但如果解析后的对象被用于不安全的动态代码执行（如 eval()），则可能带来风险，直接解析 JSON 是安全的。
错误处理：
- 在解析 JSON 字符串时，建议使用 try...catch 来捕获可能的 SyntaxError。
```
let parsedData;
try {
    parsedData = JSON.parse(maybeJsonString);
} catch (error) {
```