js怎么吧对象变json

JavaScript 将对象转换为 JSON 的方法详解

在 JavaScript 开发中，我们经常需要将对象转换为 JSON 格式，以便于数据传输、存储或与其他系统交互，本文将详细介绍 JavaScript 中将对象转换为 JSON 的各种方法和注意事项。

使用 JSON.stringify() 方法

JavaScript 提供了内置的 JSON.stringify() 方法，这是将对象转换为 JSON 字符串最常用和最直接的方式。

基本用法

const obj = {
  name: "张三",
  age: 30,
  isStudent: false,
  hobbies: ["reading", "swimming"],
  address: {
    city: "北京",
    district: "朝阳区"
  }
};
const jsonString = JSON.stringify(obj);
console.log(jsonString);
// 输出: {"name":"张三","age":30,"isStudent":false,"hobbies":["reading","swimming"],"address":{"city":"北京","district":"朝阳区"}}

参数说明

JSON.stringify() 方法可以接受三个参数：

value: 必需,要转换的对象。
replacer: 可选，用于转换结果的函数或数组。
- 如果是函数,则每个属性都会经过这个函数处理。
- 如果是数组,则只有包含在该数组中的属性名才会被转换。
space: 可选,用于美化输出结果的缩进。

使用 replacer 函数

const jsonString = JSON.stringify(obj, (key, value) => {
  if (key === "age") {
    return undefined; // 不转换 age 属性
  }
  return value;
});
console.log(jsonString);
// 输出: {"name":"张三","isStudent":false,"hobbies":["reading","swimming"],"address":{"city":"北京","district":"朝阳区"}}

使用 replacer 数组

const jsonString = JSON.stringify(obj, ["name", "hobbies"]);
console.log(jsonString);
// 输出: {"name":"张三","hobbies":["reading","swimming"]}

使用 space 美化输出

const jsonString = JSON.stringify(obj, null, 2);
console.log(jsonString);
/* 输出:
{
  "name": "张三",
  "age": 30,
  "isStudent": false,
  "hobbies": [
    "reading",
    "swimming"
  ],
  "address": {
    "city": "北京",
    "district": "朝阳区"
  }
}
*/

处理特殊对象类型

转换循环引用对象

如果对象中存在循环引用，直接使用 JSON.stringify() 会抛出错误。

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

解决方案：可以自定义一个函数来处理循环引用。

function circularStringify(obj, indent = 2) {
  const cache = new Set();
  return JSON.stringify(obj, (key, value) => {
    if (typeof value === 'object' && value !== null) {
      if (cache.has(value)) {
        return '[Circular]';
      }
      cache.add(value);
    }
    return value;
  }, indent);
}
console.log(circularStringify(obj));
// 输出: {"self":"[Circular]"}

转换包含函数、Symbol、undefined 的对象

JSON.stringify() 会忽略以下类型的值：

函数
Symbol
undefined
循环引用

const obj = {
  name: "李四",
  age: 25,
  sayHello: function() { console.log("Hello"); },
  [Symbol("id")]: 123,
  data: undefined
};
console.log(JSON.stringify(obj));
// 输出: {"name":"李四","age":25}

转换 Date 对象

Date 对象会被转换为 ISO 格式的字符串。

const obj = {
  name: "王五",
  birthDate: new Date("1990-01-01")
};
console.log(JSON.stringify(obj));
// 输出: {"name":"王五","birthDate":"1990-01-01T00:00:00.000Z"}

转换 Map、Set、BigInt 等特殊对象

这些对象默认会被转换为空对象。

const obj = {
  map: new Map([["key", "value"]]),
  set: new Set([1, 2, 3]),
  bigInt: BigInt(9007199254740991)
};
console.log(JSON.stringify(obj));
// 输出: {"map":{},"set":{},"bigInt":null}

解决方案：需要自定义转换逻辑。

function specialObjectStringify(obj) {
  return JSON.stringify(obj, (key, value) => {
    if (value instanceof Map) {
      return Object.fromEntries(value);
    }
    if (value instanceof Set) {
      return Array.from(value);
    }
    if (typeof value === 'bigint') {
      return value.toString();
    }
    return value;
  });
}
console.log(specialObjectStringify(obj));
// 输出: {"map":{"key":"value"},"set":[1,2,3],"bigInt":"9007199254740991"}

第三方库的使用

对于复杂对象的转换，可以使用第三方库如 flatted、circular-json 或 lodash 的 _.cloneDeep 方法。

使用 flatted 库

import flatted from 'flatted';
const obj = { a: 1, b: { c: 2 } };
obj.b.self = obj;
console.log(flatted.stringify(obj));
// 输出: {"a":1,"b":{"c":2,"self":"$"}}

使用 circular-json 库

import { stringify } from 'circular-json';
const obj = { a: 1, b: { c: 2 } };
obj.b.self = obj;
console.log(stringify(obj));
// 输出: {"a":1,"b":{"c":2,"self":"[Circular]"}}