js数组如何转换json字符串

JavaScript 数组转换为 JSON 字符串：方法与注意事项**

在 JavaScript 开发中，我们经常需要在数组数据和其他数据格式之间进行转换，尤其是在与后端 API 进行交互或进行数据持久化时，将 JavaScript 数组转换为 JSON（JavaScript Object Notation）字符串是一项非常常见的操作，JSON 是一种轻量级的数据交换格式，易于人阅读和编写，也易于机器解析和生成，本文将详细介绍如何将 JavaScript 数组转换为 JSON 字符串，并探讨相关的注意事项。

核心方法：JSON.stringify()

JavaScript 提供了一个内置的全局对象 JSON，该对象包含一个名为 stringify() 的方法，专门用于将 JavaScript 对象或数组转换为 JSON 字符串。

语法：

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

参数说明：

1. value: 必需参数，要转换的 JavaScript 数组或对象。
2. replacer: 可选参数，用于转换结果的函数或数组，如果是函数，则每个属性都会经过该函数处理；如果是数组，则只有包含在该数组中的属性名才会被转换。
3. space: 可选参数，用于美化输出 JSON 字符串的缩进和空白字符，可以是一个数字（表示缩进的空格数，最大10）或一个字符串（用作缩进字符，如 '\t'）。

示例：基本转换

假设我们有一个简单的 JavaScript 数组：

let fruits = ['apple', 'banana', 'orange'];

使用 JSON.stringify() 将其转换为 JSON 字符串：

let jsonString = JSON.stringify(fruits);
console.log(jsonString);

输出：

["apple","banana","orange"]

可以看到,数组被成功转换为一个 JSON 格式的字符串，注意，JSON 数组的格式与 JavaScript 数组的字面量表示非常相似，但它们是字符串类型。

带有复杂对象的数组转换

数组中不仅可以包含基本数据类型（如字符串、数字、布尔值），还可以包含对象、其他数组等复杂结构。JSON.stringify() 同样可以处理这些情况。

示例：

let users = [
  { id: 1, name: 'Alice', age: 30, hobbies: ['reading', 'hiking'] },
  { id: 2, name: 'Bob', age: 25, hobbies: ['gaming', 'music'] },
  { id: 3, name: 'Charlie', age: 35, hobbies: ['sports', 'cooking'] }
];
let usersJsonString = JSON.stringify(users);
console.log(usersJsonString);

输出：

[
  {"id":1,"name":"Alice","age":30,"hobbies":["reading","hiking"]},
  {"id":2,"name":"Bob","age":25,"hobbies":["gaming","music"]},
  {"id":3,"name":"Charlie","age":35,"hobbies":["sports","cooking"]}
]

使用 replacer 参数进行定制化转换

我们并不需要转换数组中的所有属性,或者需要对某些属性值进行修改，这时就可以使用 replacer 参数。

replacer 作为数组

如果我们只想转换数组中对象的特定属性,可以将这些属性名组成一个数组传递给 replacer。

示例：只转换 name 和 age 属性

let users = [
  { id: 1, name: 'Alice', age: 30, hobbies: ['reading', 'hiking'] },
  { id: 2, name: 'Bob', age: 25, hobbies: ['gaming', 'music'] }
];
let replacerArray = ['name', 'age'];
let usersJsonWithReplacer = JSON.stringify(users, replacerArray);
console.log(usersJsonWithReplacer);

输出：

[
  {"name":"Alice","age":30},
  {"name":"Bob","age":25}
]

replacer 作为函数

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

示例：将年龄大于 30 的用户的年龄设置为 null，并忽略 id 属性

let users = [
  { id: 1, name: 'Alice', age: 30 },
  { id: 2, name: 'Bob', age: 35 },
  { id: 3, name: 'Charlie', age: 25 }
];
let usersJsonWithReplacerFn = JSON.stringify(users, (key, value) => {
  if (key === 'id') {
    return undefined; // 忽略 id 属性
  }
  if (key === 'age' && value > 30) {
    return null; // 年龄大于 30 的设为 null
  }
  return value;
});
console.log(usersJsonWithReplacerFn);

输出：

[
  {"name":"Alice","age":30},
  {"name":"Bob","age":null},
  {"name":"Charlie","age":25}
]

使用 space 参数美化 JSON 字符串

默认情况下,JSON.stringify() 生成的 JSON 字符串是没有缩进和换行的，这虽然节省空间，但可读性较差，对于调试或需要人工查看的场景，可以使用 space 参数来美化输出。

示例：

let data = {
  users: [
    { id: 1, name: 'Alice', hobbies: ['reading'] },
    { id: 2, name: 'Bob', hobbies: ['gaming'] }
  ],
  timestamp: new Date()
};
// 使用数字作为 space (缩进2个空格)
let prettyJsonWithNumber = JSON.stringify(data, null, 2);
console.log('使用数字缩进：');
console.log(prettyJsonWithNumber);
// 使用字符串作为 space (缩进4个空格)
let prettyJsonWithString = JSON.stringify(data, null, 4);
console.log('\n使用字符串缩进：');
console.log(prettyJsonWithString);
// 使用制表符作为 space
let prettyJsonWithTab = JSON.stringify(data, null, '\t');
console.log('\n使用制表符缩进：');
console.log(prettyJsonWithTab);

输出（以 space: 2 为例）：

使用数字缩进：
{
  "users": [
    {
      "id": 1,
      "name": "Alice",
      "hobbies": [
        "reading"
      ]
    },
    {
      "id": 2,
      "name": "Bob",
      "hobbies": [
        "gaming"
      ]
    }
  ],
  "timestamp": "2023-10-27T10:30:00.123Z"
}

注意事项

1. 循环引用：如果数组或对象中存在循环引用（即对象的属性间接或直接地引用了自身），JSON.stringify() 会抛出 TypeError。

   let obj = {};
   obj.a = obj;
   JSON.stringify(obj); // 报错: TypeError: Converting circular structure to JSON...

2. 函数和 Symbol：JSON.stringify() 会忽略对象中的函数和 Symbol 类型的属性，它们不会出现在最终的 JSON 字符串中。

   let data = {
     name: 'Test',
     func: function() { console.log('hello'); },
   };
   console.log(JSON.stringify(data)); // 输出: {"name":"Test"}

3. undefined 值：在对象中，值为 undefined 的属性会被忽略，在数组中，undefined 会被转换为 null。

   let obj = { a: 1, b: undefined, c: null };
   console.log(JSON.stringify(obj)); // 输出: {"a":1,"c":null}
   let arr = [1, undefined, null];
   console.log(JSON.stringify(arr)); // 输出: [1,null,null]

4. 日期对象：日期对象会被转换为 ISO 格式的字符串（同 date.toISOString()）。

   let data = { date: new Date() };
   console.log(JSON.stringify(data)); // 输出类似: {"date":"2023-10-27T10:30:00.123Z"}

5. 非 JSON 兼容值：其他一些 JavaScript 特有的类型（如 Map, Set, WeakMap, WeakSet, RegExp, Error 等）会被转换为 null 或空对象 ，具体取决于实现，如果需要精确转换，需要先将其转换为 JSON 兼容的格式。

将 JavaScript 数组转换为 JSON 字符串是前端开发中的基础且重要的技能。JSON.stringify() 方法提供了强大的功能