js中怎么转json字符串

JavaScript 中将对象/值转换为 JSON 字符串的全面指南

在 JavaScript 开发中，我们经常需要将 JavaScript 对象或值转换为 JSON（JavaScript Object Notation）字符串，这种转换通常用于数据交换，例如将数据发送到服务器（AJAX 请求）或存储在本地存储（localStorage/sessionStorage）中，JavaScript 提供了内置的方法来轻松实现这一转换，最常用的是 JSON.stringify() 方法，本文将详细介绍 JSON.stringify() 的用法、参数、注意事项，并提供一些实际示例。

核心方法：JSON.stringify()

JSON.stringify() 是 JavaScript 中将 JavaScript 对象或值序列化为 JSON 字符串的标准方法，它接受一个对象作为参数，并返回一个对应的 JSON 格式字符串。

基本语法

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

value: 要转换的 JavaScript 值，通常是对象或数组。
replacer (可选): 可以是一个函数或一个数组，用于控制如何转换过程。
space (可选): 一个用于美化输出 JSON 字符串的缩进空白字符。

简单示例

让我们从一个简单的 JavaScript 对象开始：

const user = {
  name: "张三",
  age: 30,
  isAdmin: false,
  hobbies: ["阅读", "游泳", "编程"],
  address: {
    city: "北京",
    street: "长安街"
  }
};
const jsonString = JSON.stringify(user);
console.log(jsonString);

输出结果：

{"name":"张三","age":30,"isAdmin":false,"hobbies":["阅读","游泳","编程"],"address":{"city":"北京","street":"长安街"}}

可以看到,JSON.stringify() 将 JavaScript 对象转换了一个 JSON 格式的字符串，注意：

JSON 字符串中的属性名必须使用双引号。
函数、undefined、Symbol 类型的值在序列化时会被忽略。
循环引用的对象会导致 JSON.stringify() 抛出错误。

使用 replacer 参数

replacer 参数允许你定制序列化的过程。

replacer 作为数组

replacer 是一个数组，则只有数组中存在的属性名才会被序列化到最终的 JSON 字符串中。

const user = {
  name: "李四",
  age: 25,
  email: "lisi@example.com",
  phone: "13800138000"
};
// 只序列化 name 和 email 属性
const jsonStringWithArrayReplacer = JSON.stringify(user, ["name", "email"]);
console.log(jsonStringWithArrayReplacer);

输出结果：

{"name":"李四","email":"lisi@example.com"}

replacer 作为函数

replacer 是一个函数，则该函数会被序列化过程中遇到的每个键值对调用，该函数接收两个参数：键（key）和值（value），函数返回的值将被序列化到 JSON 字符串中，如果返回 undefined，则该属性会被忽略。

const product = {
  id: 101,
  name: "笔记本电脑",
  price: 5999,
  discount: 0.1
};
// 将价格乘以 (1 - 折扣)，并隐藏 discount 属性
const jsonStringWithFunctionReplacer = JSON.stringify(product, (key, value) => {
  if (key === "price") {
    return value * (1 - product.discount);
  }
  if (key === "discount") {
    return undefined; // 忽略 discount 属性
  }
  return value;
});
console.log(jsonStringWithFunctionReplacer);

输出结果：

{"id":101,"name":"笔记本电脑","price":5399.1}

使用 space 参数美化 JSON 字符串

space 参数可以使输出的 JSON 字符串更具可读性，方便调试和展示，它可以是一个数字或一个字符串。

space 是数字：表示缩进的空格数，最大为 10，如果小于 1，则没有缩进。
space 是字符串：则该字符串（或其前 10 个字符）将用作缩进。

const user = {
  name: "王五",
  age: 28,
  skills: ["JavaScript", "Python", "React"]
};
// 使用数字缩进
const jsonStringWithSpaceNumber = JSON.stringify(user, null, 2);
console.log("使用数字缩进 (2 个空格):");
console.log(jsonStringWithSpaceNumber);
// 使用字符串缩进
const jsonStringWithSpaceString = JSON.stringify(user, null, "--");
console.log("\n使用字符串缩进 (--):");
console.log(jsonStringWithSpaceString);

输出结果：

使用数字缩进 (2 个空格):
{
  "name": "王五",
  "age": 28,
  "skills": [
    "JavaScript",
    "Python",
    "React"
  ]
}
使用字符串缩进 (--):
{
--"name": "王五",
--"age": 28,
--"skills": [
----"JavaScript",
----"Python",
----"React"
--]
}

注意事项

循环引用：如果一个对象引用了自身（直接或间接），JSON.stringify() 会抛出 TypeError。

const obj = {};
obj.self = obj;
// JSON.stringify(obj); // 抛出错误: "TypeError: Converting circular structure to JSON"

不可枚举的属性：JSON.stringify() 只会序列化对象自身可枚举的属性，忽略继承的属性和不可枚举的属性。

特殊值的处理：

undefined、函数、Symbol 值：在序列化过程中会被忽略（如果在对象中）或转换为 null（如果在数组中）。
NaN、Infinity 和 Infinity：会被转换为 null。

const specialValues = {
  name: "测试",
  value1: undefined,
  value2: function() { console.log("hello"); },
  value3: Symbol("sym"),
  value4: NaN,
  value5: Infinity,
  arr: [undefined, function(){}, Symbol("sym2"), NaN, Infinity]
};
console.log(JSON.stringify(specialValues));

输出结果：

{"name":"测试","arr":[null,null,null,null,null]}

JSON.stringify() 是 JavaScript 中将对象或值转换为 JSON 字符串的核心方法，通过其可选的 replacer 和 space 参数，我们可以灵活地控制序列化的内容和输出格式，满足不同的开发需求，如数据过滤、格式化输出等，在实际开发中，理解其工作原理和注意事项，能够帮助我们更高效地处理数据序列化任务，避免潜在的错误。

希望本文能帮助你全面 JavaScript 中将对象转换为 JSON 字符串的方法！

欧易欧易欧易欧易下载欧易app 欧易下载欧易app