轻松: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) { 
 - 在解析 JSON 字符串时,建议使用 
 



		
		
		
		
还没有评论,来说两句吧...