JSON 使用指南

JSON 数据转换与使用

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在前端开发中，JSON最常见的用途之一是从web服务器获取数据，将其转换为JavaScript对象，然后在网页中使用这些数据。

JSON基于JavaScript编程语言的子集，但独立于语言，许多编程语言都有解析和生成JSON数据的能力。

将JSON文本转换为JavaScript对象

在JavaScript中，可以使用JSON.parse()方法将JSON字符串转换为JavaScript对象：

// JSON字符串
const jsonString = '{"name":"张三","age":30,"city":"北京"}';

// 转换为JavaScript对象
const obj = JSON.parse(jsonString);

// 访问对象属性
console.log(obj.name); // 输出: 张三
console.log(obj.age);  // 输出: 30
console.log(obj.city); // 输出: 北京

JSON实例 - 从字符串创建对象

下面是一个更复杂的JSON示例，包含员工数组：

// 包含JSON语法的JavaScript字符串
const employeesJSON = `{
  "employees": [
    {
      "firstName": "John",
      "lastName": "Doe",
      "department": "技术部",
      "salary": 5000
    },
    {
      "firstName": "Anna",
      "lastName": "Smith",
      "department": "市场部",
      "salary": 4500
    },
    {
      "firstName": "Peter",
      "lastName": "Jones",
      "department": "人力资源",
      "salary": 4800
    }
  ]
}`;

// 转换为JavaScript对象
const company = JSON.parse(employeesJSON);

// 访问数据
console.log(company.employees[0].firstName); // 输出: John
console.log(company.employees[1].department); // 输出: 市场部

在网页中使用这些数据：

实例

<div id="employee-info">
  <h3>员工信息</h3>
  <p>姓名: <span id="fullname"></span></p>
  <p>部门: <span id="dept"></span></p>
  <p>薪资: <span id="salary"></span></p>
</div>

<script>
// 假设我们已经从服务器获取了JSON数据
const employeeData = `{
  "firstName": "Anna",
  "lastName": "Smith",
  "department": "市场部",
  "salary": 4500
}`;

// 解析JSON
const employee = JSON.parse(employeeData);

// 在页面中显示数据
document.getElementById("fullname").textContent =
  employee.firstName + " " + employee.lastName;
document.getElementById("dept").textContent = employee.department;
document.getElementById("salary").textContent = "¥" + employee.salary;
</script>

将JavaScript对象转换为JSON

使用JSON.stringify()方法可以将JavaScript对象转换为JSON字符串：

// JavaScript对象
const person = {
  name: "李四",
  age: 25,
  hobbies: ["阅读", "游泳", "编程"],
  isStudent: true
};

// 转换为JSON字符串
const jsonStr = JSON.stringify(person);
console.log(jsonStr);
// 输出: {"name":"李四","age":25,"hobbies":["阅读","游泳","编程"],"isStudent":true}

还可以使用第二个参数控制字符串化过程，例如只包含特定属性：

// 只包含name和age属性
const filteredJSON = JSON.stringify(person, ["name", "age"]);
console.log(filteredJSON);
// 输出: {"name":"李四","age":25}

JSON解析器与eval()的区别

虽然可以使用JavaScript的eval()函数解析JSON，但这存在严重的安全风险：

安全警告： eval()函数会执行任何传入的JavaScript代码，如果JSON数据中含有恶意脚本，将会被执行，导致安全漏洞。

相比之下，JSON解析器：

只识别有效的JSON文本，不会执行任意代码
在支持原生JSON的浏览器中性能更好
更严格地遵循JSON规范

// 不安全的做法 - 使用eval()
const unsafeData = '{"name":"张三","age":30}';
const obj1 = eval('(' + unsafeData + ')'); // 存在安全风险

// 安全的做法 - 使用JSON.parse()
const obj2 = JSON.parse(unsafeData); // 安全，只解析JSON

JSON在AJAX请求中的应用

JSON常用于AJAX请求中传输数据：

// 使用Fetch API获取JSON数据
fetch('/api/users')
  .then(response => response.json()) // 解析JSON响应
  .then(data => {
    // 使用数据
    console.log(data);
    displayUsers(data);
  })
  .catch(error => console.error('Error:', error));

// 使用jQuery的AJAX方法
$.ajax({
  url: '/api/users',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    // 使用数据
    console.log(data);
    displayUsers(data);
  },
  error: function(error) {
    console.error('Error:', error);
  }
});

浏览器和框架支持

现代浏览器和主流JavaScript框架都对JSON提供了良好支持：

Web 浏览器支持	Web 框架/库支持
Firefox (Mozilla) 3.5+ Internet Explorer 8+ Chrome 所有版本 Opera 10+ Safari 4+ Edge 所有版本	jQuery React Vue.js Angular Node.js Express.js

对于旧版浏览器，可以使用Douglas Crockford的JSON库：

https://github.com/douglascrockford/JSON-js

JSON使用最佳实践

始终验证来自外部源的JSON数据
使用try...catch处理JSON解析错误
避免在JSON中存储敏感信息
使用适当的缩进和格式提高可读性
在传输大量数据时考虑使用压缩

// 安全的JSON解析方式
function safeJSONParse(jsonString) {
  try {
    return JSON.parse(jsonString);
  } catch (error) {
    console.error('JSON解析错误:', error);
    return null; // 或返回默认值
  }
}

const data = safeJSONParse(malformedJSON);
if (data) {
  // 处理数据
}

JSON教程