js如何将对象转化成json字符串

JavaScript 对象转 JSON 字符串：全面指南与最佳实践**

在 JavaScript 开发中，我们经常需要在对象和 JSON 字符串之间进行转换，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其易于人阅读和编写，也易于机器解析和生成，而被广泛应用于 Web 前后端数据交互、配置文件等场景，将 JavaScript 对象转换为 JSON 字符串是一个常见且重要的操作，本文将详细介绍如何实现这一转换，包括核心方法、参数选项、注意事项以及实际应用示例。

核心方法：`JSON.stringify()`

JavaScript 提供了一个内置的全局对象 JSON，该对象包含两个核心方法用于 JSON 的序列化和反序列化：

JSON.stringify()：将 JavaScript 对象或值转换为 JSON 字符串。
JSON.parse()：将 JSON 字符串转换回 JavaScript 对象。

要将对象转换为 JSON 字符串，我们主要使用 JSON.stringify() 方法。

语法：

JSON.stringify(value[, replacer[, space]])

参数说明：

value：必需，要转换的 JavaScript 对象或值。
replacer：可选，用于转换结果的函数或数组。
- 如果是函数,则序列化过程中每个键值对都会经过该函数处理，其返回值将作为该键值对的最终值。
- 如果是数组,则只有包含在该数组中的属性名才会被序列化。
space：可选，用于美化输出 JSON 字符串的缩进和空白字符。
- 如果是一个数字,表示每级缩进的空格数（最大 10，超过 10 会自动设为 10）。
- 如果是一个字符串,则该字符串用作缩进（最多使用前 10 个字符）。
- 如果省略或为 null，则输出紧凑的 JSON 字符串（无多余空白）。

基本用法

最简单的用法就是直接传入一个 JavaScript 对象：

const user = {
  name: "张三",
  age: 30,
  isAdmin: false,
  hobbies: ["阅读", "游泳", "编程"],
  address: {
    city: "北京",
    district: "朝阳区"
  }
};
const jsonString = JSON.stringify(user);
console.log(jsonString);
// 输出：
// {"name":"张三","age":30,"isAdmin":false,"hobbies":["阅读","游泳","编程"],"address":{"city":"北京","district":"朝阳区"}}

使用 `replacer` 参数

replacer 参数提供了更精细的控制，可以决定哪些属性被序列化，或者对序列化后的值进行修改。

作为数组使用

指定需要序列化的属性名列表：

const user = {
  name: "张三",
  age: 30,
  isAdmin: false,
  hobbies: ["阅读", "游泳", "编程"]
};
// 只序列化 name 和 age 属性
const jsonStringWithArrayReplacer = JSON.stringify(user, ["name", "age"]);
console.log(jsonStringWithArrayReplacer);
// 输出：
// {"name":"张三","age":30}

作为函数使用

函数接收两个参数：键（key）和值（value），返回值将被用于序列化，如果返回 undefined，则该属性会被排除。

const user = {
  name: "张三",
  age: 30,
  password: "123456" // 敏感信息，不希望出现在 JSON 中
};
// 过滤掉 password 属性，并将 age 转换为字符串
const jsonStringWithFunctionReplacer = JSON.stringify(user, (key, value) => {
  if (key === "password") {
    return undefined; // 不包含 password 属性
  }
  if (key === "age") {
    return value.toString(); // 将 age 转换为字符串
  }
  return value; // 其他属性保持不变
});
console.log(jsonStringWithFunctionReplacer);
// 输出：
// {"name":"张三","age":"30"}

使用 `space` 参数美化输出

在调试或生成可读性较强的配置文件时,可以使用 space 参数来格式化 JSON 字符串。

const user = {
  name: "张三",
  age: 30,
  hobbies: ["阅读", "游泳", "编程"]
};
// 使用数字缩进
const jsonStringWithNumberSpace = JSON.stringify(user, null, 2);
console.log(jsonStringWithNumberSpace);
/*
输出：
{
  "name": "张三",
  "age": 30,
  "hobbies": [
    "阅读",
    "游泳",
    "编程"
  ]
}
*/
// 使用字符串缩进
const jsonStringWithStringSpace = JSON.stringify(user, null, "--");
console.log(jsonStringWithStringSpace);
/*
输出：
{
--"name": "张三",
--"age": 30,
--"hobbies": [
----"阅读",
----"游泳",
----"编程"
--]
}
*/

`JSON.stringify()` 的注意事项与限制

在使用 JSON.stringify() 时，需要注意以下几点，以避免意外行为：

循环引用：如果对象中存在循环引用（即对象的某个属性通过引用链指向了对象本身），JSON.stringify() 会抛出错误 TypeError: Converting circular structure to JSON。
```
const obj = {};
obj.a = obj; // 循环引用
// JSON.stringify(obj); // 抛出错误
```
不可枚举的属性： JSON.stringify() 会忽略对象中不可枚举的属性。

Symbol 类型的属性： JSON.stringify() 会忽略 Symbol 类型的键。

const obj = {
  name: "李四",
};
console.log(JSON.stringify(obj)); // 输出：{"name":"李四"}

函数类型的属性：对象中值为函数的属性会被忽略。

const obj = {
  name: "王五",
  sayHello: function() { console.log("Hello"); }
};
console.log(JSON.stringify(obj)); // 输出：{"name":"王五"}

undefined、Symbol 和函数：在数组中，undefined、Symbol 和函数会被转换为 null，在对象中，这些值的属性会被忽略。

const obj = {
  a: undefined,
  b: Symbol("sym"),
  c: function() {},
  d: [1, undefined, function(){}, Symbol("arrSym")]
};
console.log(JSON.stringify(obj));
// 输出：{"d":[1,null,null,null]}

BigInt 类型： JSON.stringify() 不能直接序列化 BigInt 类型的值，会抛出错误 TypeError: Do not know how to serialize a BigInt。

const obj = { big: BigInt(9007199254740991) };
// JSON.stringify(obj); // 抛出错误
// 解决方案：转换为字符串
const safeObj = { big: obj.big.toString() };
console.log(JSON.stringify(safeObj)); // 输出：{"big":"9007199254740991"}

处理循环引用的替代方案

如果需要处理可能存在循环引用的对象,可以考虑以下方法：

手动解除循环引用：在序列化前，确保对象中没有循环引用。
使用自定义序列化逻辑：遍历对象并构建一个新的不包含循环引用的对象。
使用第三方库：如 flatted、cycle 等库提供了处理循环引用的序列化方法。

使用 flatted：

// 首先安装：npm install flatted
import { parse, stringify } from 'flatted';
const obj = {};
obj.a = obj;
const jsonString = stringify(obj);
console.log(jsonString); // 输出：{"a":"$REF_0"}
const parsedObj = parse(jsonString);
console.log(parsedObj.a === parsedObj); // 输出：true

实际应用场景

数据存储：将对象数据存储到 localStorage 或 sessionStorage 中（它们只能存储字符串）。

const userSettings = { theme: 'dark', notifications: true };
localStorage.setItem('userSettings', JSON.stringify(userSettings));

AJAX 请求：向后端发送数据时，通常需要将 JavaScript 对象转换为 JSON 字符串作为请求体。

const dataToSend = { userId: 1, message: 'Hello Server' };
fetch('/api/message', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(dataToSend),
});

正文