在JavaScript中，JavaScript 对象和 JSON 字符串互相转换

Never_Satisfied

284人浏览 · 2025-11-15 17:21:59

Never_Satisfied · 2025-11-15 17:21:59 发布

将 JSON 字符串转换为 JavaScript 对象

JSON.parse 方法用于将 JSON 字符串转换为 JavaScript 对象。它支持一个可选的 reviver 函数，用于在返回对象之前对其进行转换。

示例：基本用法

const jsonString = '{"name": "Alice", "age": 25}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // 输出: Alice
console.log(obj.age); // 输出: 25

使用 reviver 参数

reviver 是一个函数，可对解析后的对象进行自定义处理。例如，将日期字符串转换为 Date 对象。

const jsonString = '{"name": "Alice", "birthDate": "2000-01-01"}';
const obj = JSON.parse(jsonString, (key, value) => {
   if (key === "birthDate") {
       return new Date(value);
   }
   return value;
});
console.log(obj.birthDate instanceof Date); // 输出: true

注意事项

语法错误： 如果 JSON 字符串格式不正确（如多余的逗号），会抛出 SyntaxError。

不支持函数： JSON 不允许包含函数。如果需要，可以将函数存储为字符串并通过 eval 转换，但这通常不推荐。

// 错误示例：多余的逗号会导致解析失败
JSON.parse('{"name": "Alice", "age": 25, }'); // 抛出 SyntaxError

总结

JSON.parse 是解析 JSON 数据的核心工具，适用于从服务器接收数据并将其转换为 JavaScript 对象。通过 reviver 参数，还可以实现更灵活的数据处理。

将 JavaScript 对象转换为 JSON 字符串

在JavaScript中，将对象转换为JSON字符串主要使用 JSON.stringify() 方法。以下是详细用法：

基本用法

const obj = {
  name: "张三",
  age: 25,
  city: "北京"
};

const jsonString = JSON.stringify(obj);
console.log(jsonString);
// 输出: '{"name":"张三","age":25,"city":"北京"}'

高级用法

1. 带缩进格式（美化输出）

const obj = { name: "李四", age: 30, hobbies: ["读书", "运动"] };

// 使用空格缩进
const prettyJson = JSON.stringify(obj, null, 2);
console.log(prettyJson);
// 输出:
// {
//   "name": "李四",
//   "age": 30,
//   "hobbies": [
//     "读书",
//     "运动"
//   ]
// }

// 使用制表符缩进
const tabbedJson = JSON.stringify(obj, null, '\t');

2. 使用替换器函数

const obj = {
  name: "王五",
  age: 28,
  password: "secret123", // 敏感信息，不序列化
  createdAt: new Date()
};

const jsonString = JSON.stringify(obj, (key, value) => {
  if (key === 'password') return undefined; // 过滤密码
  if (value instanceof Date) return value.toISOString(); // 转换日期
  return value;
});

console.log(jsonString);
// 输出: '{"name":"王五","age":28,"createdAt":"2023-10-01T12:00:00.000Z"}'

3. 使用替换器数组（只序列化指定属性）

const obj = {
  name: "赵六",
  age: 35,
  email: "zhao@example.com",
  internalId: "12345"
};

// 只序列化 name 和 age 属性
const jsonString = JSON.stringify(obj, ['name', 'age']);
console.log(jsonString);
// 输出: '{"name":"赵六","age":35}'

处理特殊情况

1. 处理循环引用

const obj = { name: "测试" };
obj.self = obj; // 循环引用

try {
  JSON.stringify(obj);
} catch (error) {
  console.error("循环引用错误:", error.message);
}

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

2. 自定义 toJSON 方法

const person = {
  name: "钱七",
  birthDate: new Date('1990-01-01'),
  toJSON() {
    return {
      name: this.name,
      age: new Date().getFullYear() - this.birthDate.getFullYear(),
      birthYear: this.birthDate.getFullYear()
    };
  }
};

console.log(JSON.stringify(person));
// 输出: '{"name":"钱七","age":33,"birthYear":1990}'

实用工具函数

// 安全的 JSON 序列化，处理错误和循环引用
function safeStringify(obj, space = 2) {
  const seen = new WeakSet();
  
  return JSON.stringify(obj, (key, value) => {
    if (typeof value === "object" && value !== null) {
      if (seen.has(value)) return "[Circular Reference]";
      seen.add(value);
    }
    
    // 处理 undefined、函数等
    if (typeof value === 'function') return "[Function]";
    if (typeof value === 'undefined') return null;
    
    return value;
  }, space);
}

// 使用示例
const complexObj = {
  name: "测试对象",
  fn: function() { console.log('hello'); },
  nested: { data: 'nested' }
};
complexObj.self = complexObj;

console.log(safeStringify(complexObj));