JS中JSON使用

1. 数据序列化和反序列化

技术应用: 用于将 JavaScript 对象转换为 JSON 字符串或将 JSON 字符串转换为 JavaScript 对象。

应用场景: 在存储数据到本地存储、发送数据到服务器或从服务器接收数据时。

示例代码:

// 对象转为 JSON 字符串
const obj = { name: 'Alice', age: 25 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // {"name":"Alice","age":25}

// JSON 字符串转为对象
const parsedObj = JSON.parse(jsonString);
console.log(parsedObj); // { name: 'Alice', age: 25 }

2. 数据传输

技术应用: 用于通过 HTTP 请求发送和接收数据，尤其是在 RESTful API 中。

应用场景: 传输数据到服务器或从服务器获取数据。

示例代码:

// 发送 JSON 数据到服务器
const data = { username: 'user', password: 'pass' };

fetch('https://example.com/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => console.log(data));

3. 存储数据

技术应用: 在浏览器的 localStorage 或 sessionStorage 中存储数据。

应用场景: 存储用户设置、购物车数据等在客户端。

示例代码:

// 存储数据
const userSettings = { theme: 'dark', fontSize: '16px' };
localStorage.setItem('settings', JSON.stringify(userSettings));

// 读取数据
const storedSettings = JSON.parse(localStorage.getItem('settings'));
console.log(storedSettings); // { theme: 'dark', fontSize: '16px' }

4. 处理复杂数据结构

技术应用: 在 JavaScript 中处理嵌套的对象和数组数据结构。

应用场景: 解析和操作复杂的数据结构，如从 API 获取的响应数据。

示例代码:

const jsonResponse = '{"user": {"id": 1, "name": "Bob"}, "posts": [{"id": 101, "title": "Post 1"}]}';
const data = JSON.parse(jsonResponse);

console.log(data.user.name); // Bob
console.log(data.posts[0].title); // Post 1

5. 数据格式化

技术应用: 用于将对象格式化为可读性更高的 JSON 字符串。

应用场景: 生成可供调试和日志记录的格式化 JSON 数据。

示例代码:

const obj = { name: 'Charlie', age: 30, hobbies: ['reading', 'traveling'] };
const prettyJson = JSON.stringify(obj, null, 2);
console.log(prettyJson);
/*
{
  "name": "Charlie",
  "age": 30,
  "hobbies": [
    "reading",
    "traveling"
  ]
}
*/

这些应用展示了 JSON 在 JavaScript 中的广泛用途，尤其是在数据交换和存储方面。