js如何将集合转换为json字符串

JavaScript 将集合转换为 JSON 字符串的完整指南

在 JavaScript 开发中，经常需要将集合（如数组、Map、Set 等）转换为 JSON 字符串以便于数据传输或存储，本文将详细介绍如何使用 JavaScript 将不同类型的集合转换为 JSON 字符符串，包括内置方法和自定义处理技巧。

使用 JSON.stringify() 方法

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

转换数组

数组是 JavaScript 中最常见的集合类型，可以直接使用 JSON.stringify()：

const array = [1, 2, 3, { name: 'John', age: 30 }];
const jsonString = JSON.stringify(array);
console.log(jsonString);
// 输出: [1,2,3,{"name":"John","age":30}]

转换普通对象

虽然严格来说对象不是集合,但也可以使用相同方法：

const obj = { a: 1, b: 2, c: [3, 4, 5] };
const jsonString = JSON.stringify(obj);
console.log(jsonString);
// 输出: {"a":1,"b":2,"c":[3,4,5]}

处理特殊集合类型

转换 Set

Set 是 ES6 引入的新集合类型，不能直接序列化，需要先转换为数组：

const set = new Set([1, 2, 3, 4, 5]);
const jsonString = JSON.stringify([...set]);
console.log(jsonString);
// 输出: [1,2,3,4,5]

转换 Map

Map 同样需要先转换为数组或对象：

const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
// 方法1：转换为数组
const jsonString1 = JSON.stringify([...map]);
console.log(jsonString1);
// 输出: [["a",1],["b",2],["c",3]]
// 方法2：转换为对象
const objFromMap = Object.fromEntries(map);
const jsonString2 = JSON.stringify(objFromMap);
console.log(jsonString2);
// 输出: {"a":1,"b":2,"c":3}

转换 NodeList 或 HTMLCollection

DOM 集合需要先转换为数组：

const divs = document.getElementsByTagName('div');
const jsonString = JSON.stringify([...divs]);

高级转换选项

JSON.stringify() 还接受两个可选参数：replacer 和 space。

使用 replacer 函数过滤或转换值

const user = {
  name: 'John',
  age: 30,
  password: '12345'
};
// 过滤掉敏感信息
const jsonString = JSON.stringify(user, (key, value) => {
  if (key === 'password') {
    return undefined;
  }
  return value;
});
console.log(jsonString);
// 输出: {"name":"John","age":30}

使用 space 参数美化输出

const data = { a: 1, b: [2, 3, 4], c: { d: 5 } };
const prettyJson = JSON.stringify(data, null, 2);
console.log(prettyJson);
/*
输出:
{
  "a": 1,
  "b": [
    2,
    3,
    4
  ],
  "c": {
    "d": 5
  }
}
*/

处理循环引用

当对象包含循环引用时,JSON.stringify() 会抛出错误：

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

解决方案是自定义序列化函数：

function circularStringify(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;
  });
}
console.log(circularStringify(obj)); // 输出: {"self":"[Circular]"}

自定义集合类的序列化

如果创建了自定义集合类,可以添加 toJSON() 方法来自定义序列化行为：

class CustomCollection {
  constructor() {
    this.items = [];
  }
  add(item) {
    this.items.push(item);
  }
  toJSON() {
    return {
      type: 'CustomCollection',
      data: this.items
    };
  }
}
const collection = new CustomCollection();
collection.add(1);
collection.add(2);
collection.add(3);
console.log(JSON.stringify(collection));
// 输出: {"type":"CustomCollection","data":[1,2,3]}

将 JavaScript 集合转换为 JSON 字符串是日常开发中的常见任务，主要方法包括：

1. 使用 JSON.stringify() 直接转换数组和普通对象
2. 对于特殊集合（Set、Map、DOM 集合等），先转换为数组或对象
3. 使用 replacer 函数和 space 参数实现高级控制
4. 处理循环引用和自定义序列化逻辑

这些技巧可以让你在各种场景下灵活地将集合数据转换为 JSON 格式，满足数据传输、存储和 API 交互的需求。