JSON 对象

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。虽然 JSON 是独立于语言的，但它使用了 JavaScript 的语法子集，因此在 JavaScript 中处理 JSON 数据非常方便。JSON 对象提供了在 JSON 字符串和 JavaScript 对象之间进行转换的方法。

什么是 JSON？

JSON 是一种基于文本的开放标准格式，用于表示结构化数据。它易于人阅读和编写，也易于机器解析和生成。JSON 通常用于在服务器和 Web 应用之间传输数据。

JSON 语法

JSON 的语法是从 JavaScript 对象表示法衍生而来的，但 JSON 的格式更加严格：

{
  "name": "张三",
  "age": 25,
  "isStudent": false,
  "hobbies": ["阅读", "游泳", "编程"],
  "address": {
    "city": "北京",
    "district": "朝阳区"
  },
  "phone": null
}

JSON 与 JavaScript 对象的区别

虽然 JSON 看起来很像 JavaScript 对象字面量，但它们有一些重要区别：

特性	JavaScript 对象	JSON
键名	可以不加引号	必须用双引号
字符串值	单引号或双引号都可以	必须用双引号
函数	可以包含函数	不能包含函数
注释	可以有注释	不能有注释
undefined	可以包含 undefined	不能包含 undefined

JSON 对象方法

JSON.stringify()

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

let obj = {
  name: "张三",
  age: 25,
  isStudent: false
};

let jsonString = JSON.stringify(obj);
console.log(jsonString); 
// {"name":"张三","age":25,"isStudent":false}

// 格式化输出
let formattedJson = JSON.stringify(obj, null, 2);
console.log(formattedJson);
// {
//   "name": "张三",
//   "age": 25,
//   "isStudent": false
// }

使用替换函数

let obj = {
  name: "张三",
  age: 25,
  password: "secret123"
};

// 替换函数，过滤敏感信息
let jsonString = JSON.stringify(obj, (key, value) => {
  if (key === "password") {
    return undefined; // 排除密码字段
  }
  return value;
});

console.log(jsonString); 
// {"name":"张三","age":25}

使用替换数组

let obj = {
  name: "张三",
  age: 25,
  password: "secret123"
};

// 只包含指定的属性
let jsonString = JSON.stringify(obj, ["name", "age"]);
console.log(jsonString); 
// {"name":"张三","age":25}

格式化参数

let obj = {
  name: "张三",
  age: 25,
  hobbies: ["阅读", "游泳"]
};

// 使用制表符缩进
let json1 = JSON.stringify(obj, null, "\t");
console.log(json1);

// 使用空格缩进
let json2 = JSON.stringify(obj, null, 2);
console.log(json2);

// 使用自定义字符串缩进
let json3 = JSON.stringify(obj, null, "----");
console.log(json3);

JSON.parse()

JSON.parse() 方法将 JSON 字符串转换为 JavaScript 对象：

let jsonString = '{"name":"张三","age":25,"isStudent":false}';

let obj = JSON.parse(jsonString);
console.log(obj.name);  // "张三"
console.log(obj.age);   // 25
console.log(obj.isStudent); // false

使用 reviver 函数

let jsonString = '{"name":"张三","birthDate":"1998-05-15","age":25}';

let obj = JSON.parse(jsonString, (key, value) => {
  if (key === "birthDate") {
    return new Date(value); // 将字符串转换为 Date 对象
  }
  return value;
});

console.log(obj.birthDate instanceof Date); // true

处理复杂数据结构

数组

let arr = [1, 2, 3, "字符串", true, null];

let jsonArray = JSON.stringify(arr);
console.log(jsonArray); // [1,2,3,"字符串",true,null]

let parsedArr = JSON.parse(jsonArray);
console.log(parsedArr); // [1, 2, 3, "字符串", true, null]

嵌套对象

let complexObj = {
  user: {
    name: "张三",
    contact: {
      email: "zhangsan@example.com",
      phone: "13800138000"
    }
  },
  orders: [
    { id: 1, product: "笔记本电脑", price: 5999 },
    { id: 2, product: "手机", price: 3999 }
  ]
};

let jsonString = JSON.stringify(complexObj, null, 2);
console.log(jsonString);

let parsedObj = JSON.parse(jsonString);
console.log(parsedObj.user.contact.email); // "zhangsan@example.com"

实际应用示例

本地存储

// 存储对象到 localStorage
let userData = {
  username: "zhangsan",
  preferences: {
    theme: "dark",
    language: "zh-CN"
  }
};

localStorage.setItem("userData", JSON.stringify(userData));

// 从 localStorage 读取对象
let storedData = JSON.parse(localStorage.getItem("userData"));
console.log(storedData.username); // "zhangsan"

AJAX 请求

// 发送 JSON 数据
function sendUserData(userData) {
  return fetch('/api/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(userData)
  })
  .then(response => response.json())
  .then(data => {
    console.log('用户创建成功:', data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });
}

let newUser = {
  name: "李四",
  email: "lisi@example.com",
  age: 30
};

sendUserData(newUser);

配置文件处理

// 模拟配置文件内容
let configString = `
{
  "appName": "我的应用",
  "version": "1.0.0",
  "features": {
    "darkMode": true,
    "notifications": false
  },
  "supportedLanguages": ["zh-CN", "en-US"]
}
`;

try {
  let config = JSON.parse(configString);
  console.log("应用配置加载成功:", config.appName);
  
  // 使用配置
  if (config.features.darkMode) {
    document.body.classList.add("dark-mode");
  }
} catch (error) {
  console.error("配置文件解析失败:", error.message);
}

错误处理

JSON 解析可能出错，需要适当的错误处理：

function safeJsonParse(jsonString, defaultValue = null) {
  try {
    return JSON.parse(jsonString);
  } catch (error) {
    console.error("JSON 解析错误:", error.message);
    return defaultValue;
  }
}

// 测试有效的 JSON
let validJson = '{"name":"张三","age":25}';
console.log(safeJsonParse(validJson)); // {name: "张三", age: 25}

// 测试无效的 JSON
let invalidJson = '{"name":"张三",age:25}'; // 缺少引号
console.log(safeJsonParse(invalidJson, {})); // {}

// 测试空字符串
console.log(safeJsonParse("", "默认值")); // "默认值"

注意事项和最佳实践

1. 循环引用

// 错误示例：包含循环引用的对象
let obj = { name: "张三" };
obj.self = obj; // 循环引用

// JSON.stringify(obj); // TypeError: Converting circular structure to JSON

// 解决方案：使用自定义替换函数
function getCircularReplacer() {
  const seen = new WeakSet();
  return (key, value) => {
    if (typeof value === "object" && value !== null) {
      if (seen.has(value)) {
        return "[Circular]";
      }
      seen.add(value);
    }
    return value;
  };
}

let jsonString = JSON.stringify(obj, getCircularReplacer());
console.log(jsonString); // {"name":"张三","self":"[Circular]"}

2. 特殊数据类型

let obj = {
  date: new Date(),
  func: function() { return "hello"; },
  undef: undefined,
  sym: Symbol("id"),
  nan: NaN,
  inf: Infinity
};

let jsonString = JSON.stringify(obj);
console.log(jsonString); 
// {"date":"2023-10-25T10:00:00.000Z","nan":null,"inf":null}
// 注意：函数、undefined、Symbol 被忽略，NaN 和 Infinity 转换为 null

3. 性能考虑

// 对于大型对象，考虑分批处理
function processLargeJson(largeObject) {
  // 分批序列化大型数组
  if (Array.isArray(largeObject) && largeObject.length > 10000) {
    let chunks = [];
    for (let i = 0; i < largeObject.length; i += 1000) {
      let chunk = largeObject.slice(i, i + 1000);
      chunks.push(JSON.stringify(chunk));
    }
    return "[" + chunks.join(",") + "]";
  }
  
  return JSON.stringify(largeObject);
}

JSON 是现代 Web 开发中数据交换的标准格式，掌握 JSON 对象的使用对于处理 API 数据、本地存储和配置文件等任务至关重要。