js json格式化

在JavaScript中，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，广泛用于前后端数据传输、配置文件、API响应等场景。JSON的格式简洁、易读，并且与JavaScript的对象语法非常相似，因此在JavaScript中处理JSON数据非常方便。本文将详细介绍如何在JavaScript中对JSON进行格式化，包括JSON.stringify()方法的使用、格式化选项、常见问题及解决方案等。

1. JSON简介

JSON是一种基于文本的数据格式，采用完全独立于语言的文本格式，但也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。JSON格式的数据由键值对组成，键和值之间用冒号分隔，键值对之间用逗号分隔，整个对象用花括号包裹，数组用方括号包裹。

例如，以下是一个简单的JSON对象：

{
  "name": "John",
  "age": 30,
  "isStudent": false,
  "courses": ["Math", "Science", "History"]
}

2. JSON.stringify() 方法

在JavaScript中，JSON.stringify() 方法用于将JavaScript对象或值转换为JSON字符串。这个方法不仅可以进行简单的转换，还可以通过传递参数来控制输出的格式。

2.1 基本用法

const obj = {
  name: "John",
  age: 30,
  isStudent: false,
  courses: ["Math", "Science", "History"]
};

const jsonString = JSON.stringify(obj);
console.log(jsonString);

输出结果：

{"name":"John","age":30,"isStudent":false,"courses":["Math","Science","History"]}

可以看到，默认情况下，JSON.stringify() 输出的JSON字符串是紧凑的，没有换行和缩进。

2.2 格式化输出

为了使得JSON字符串更易读，可以通过传递第三个参数来控制缩进。第三个参数可以是一个数字或字符串，表示缩进的空格数或缩进字符。

const jsonString = JSON.stringify(obj, null, 2);
console.log(jsonString);

输出结果：

{
  "name": "John",
  "age": 30,
  "isStudent": false,
  "courses": [
    "Math",
    "Science",
    "History"
  ]
}

在这个例子中，null 是第二个参数，表示不对数据进行过滤或转换，2 是第三个参数，表示每个缩进级别使用2个空格。

2.3 使用缩进字符

除了使用空格缩进，还可以使用其他字符作为缩进，例如制表符 \t。

const jsonString = JSON.stringify(obj, null, '\t');
console.log(jsonString);

输出结果：

{
    "name": "John",
    "age": 30,
    "isStudent": false,
    "courses": [
        "Math",
        "Science",
        "History"
    ]
}

3. 过滤和转换数据

JSON.stringify() 的第二个参数可以是一个函数或数组，用于过滤或转换数据。

3.1 使用函数过滤数据

const jsonString = JSON.stringify(obj, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
}, 2);
console.log(jsonString);

输出结果：

{
  "name": "JOHN",
  "age": 30,
  "isStudent": false,
  "courses": [
    "MATH",
    "SCIENCE",
    "HISTORY"
  ]
}

在这个例子中，所有的字符串值都被转换为大写。

3.2 使用数组过滤数据

const jsonString = JSON.stringify(obj, ['name', 'courses'], 2);
console.log(jsonString);

输出结果：

{
  "name": "John",
  "courses": [
    "Math",
    "Science",
    "History"
  ]
}

在这个例子中，只有 name 和 courses 两个属性被包含在输出的JSON字符串中。

4. 处理循环引用

当对象中存在循环引用时，JSON.stringify() 会抛出错误。为了避免这种情况，可以在第二个参数中使用函数来处理循环引用。

const obj = { name: "John" };
obj.self = obj;

const jsonString = JSON.stringify(obj, (key, value) => {
  if (key === 'self') {
    return '[Circular]';
  }
  return value;
}, 2);
console.log(jsonString);

输出结果：

{
  "name": "John",
  "self": "[Circular]"
}

5. 处理日期对象

JSON.stringify() 默认会将日期对象转换为字符串。如果需要保留日期对象的格式，可以在第二个参数中使用函数来处理。

const obj = {
  name: "John",
  birthDate: new Date()
};

const jsonString = JSON.stringify(obj, (key, value) => {
  if (value instanceof Date) {
    return value.toISOString();
  }
  return value;
}, 2);
console.log(jsonString);

输出结果：

{
  "name": "John",
  "birthDate": "2023-10-01T12:00:00.000Z"
}

6. 处理undefined和函数

JSON.stringify() 会忽略对象中的 undefined 和函数。如果需要保留这些值，可以在第二个参数中使用函数来处理。

const obj = {
  name: "John",
  age: undefined,
  greet: function() {
    console.log("Hello!");
  }
};

const jsonString = JSON.stringify(obj, (key, value) => {
  if (typeof value === 'function') {
    return value.toString();
  }
  return value;
}, 2);
console.log(jsonString);

输出结果：

{
  "name": "John",
  "age": null,
  "greet": "function() {\n    console.log(\"Hello!\");\n  }"
}

7. 处理BigInt

JSON.stringify() 默认无法处理 BigInt 类型的数据，会抛出错误。可以通过在第二个参数中使用函数来处理。

const obj = {
  name: "John",
  bigNumber: BigInt(12345678901234567890)
};

const jsonString = JSON.stringify(obj, (key, value) => {
  if (typeof value === 'bigint') {
    return value.toString();
  }
  return value;
}, 2);
console.log(jsonString);

输出结果：

{
  "name": "John",
  "bigNumber": "12345678901234567890"
}

8. 使用第三方库进行高级格式化

虽然 JSON.stringify() 提供了基本的格式化功能，但在某些情况下，可能需要更高级的格式化工具。可以使用第三方库如 json-beautify 或 pretty-print-json 来实现更复杂的格式化需求。

const jsonBeautify = require('json-beautify');

const obj = {
  name: "John",
  age: 30,
  isStudent: false,
  courses: ["Math", "Science", "History"]
};

const jsonString = jsonBeautify(obj, null, 2, 100);
console.log(jsonString);

输出结果与 JSON.stringify() 类似，但 json-beautify 提供了更多的自定义选项。

9. 总结

在JavaScript中，JSON.stringify() 是一个非常强大的工具，可以将JavaScript对象转换为JSON字符串，并且通过传递参数可以实现格式化、过滤、转换等功能。通过合理使用 JSON.stringify()，可以使得JSON数据更易读、更符合需求。在处理复杂的数据结构时，还可以结合第三方库来实现更高级的格式化功能。