js怎么把数据变成json对象

JavaScript 数据转 JSON 对象：全面指南与实践**

在 JavaScript 开发中，我们经常需要处理各种类型的数据，并将它们转换为 JSON（JavaScript Object Notation）对象或 JSON 字符串，JSON 因其轻量级、易读和易于解析的特性，成为数据交换的常用格式，本文将详细探讨如何在 JavaScript 中将不同类型的数据转换为 JSON 对象，并涵盖相关的核心方法和注意事项。

理解 JSON 对象与 JSON 字符串

在开始转换之前,首先要明确两个概念：

1. JSON 对象 (JavaScript Object)：这是 JavaScript 中的一种数据类型，本质上是键值对的集合，{ "name": "张三", "age": 30 }，在 JS 中，它通常被称为对象字面量。
2. JSON 字符串 (JSON String)：这是用字符串形式表示的 JSON 数据，它被单引号或双引号包裹，'{"name": "张三", "age": 30}'，JSON 字符串是文本格式，不能直接访问其属性或方法。

我们通常所说的“把数据变成 JSON 对象”，可能包含两种情况：

• 将其他数据类型转换为标准的 JavaScript 对象（其格式符合 JSON 规范）。
• 将数据序列化为JSON 字符串。

核心方法：JSON.stringify() 与 JSON.parse()

JavaScript 提供了 JSON 对象，其中包含两个核心方法用于 JSON 的序列化和反序列化。

JSON.stringify() - 将 JavaScript 对象/值转换为 JSON 字符串

这是将数据转换为 JSON 格式字符串的主要方法，虽然它直接生成的是字符串，但这个字符串的结构就是 JSON 对象的结构，我们可以通过解析这个字符串得到真正的 JSON 对象（在 JS 中就是普通对象）。

语法： JSON.stringify(value[, replacer[, space]])

• value: 必需，要转换的 JavaScript 值（通常是对象或数组）。
• replacer: 可选，用于转换结果的函数或数组。
  • 如果是函数,则每个键值对都会经过该函数处理，返回的值将被序列化。
  • 如果是数组,则只有数组中包含的属性名才会被序列化。
• space: 可选，用于美化输出 JSON 字符串的缩进和空白字符，可以是数字（表示缩空格数，最大10）或字符串（用作缩进字符）。

示例：

const user = {
  name: "李四",
  age: 25,
  isAdmin: false,
  hobbies: ["reading", "music"],
  address: {
    city: "北京",
    street: "长安街"
  }
};
// 基本用法，转换为 JSON 字符串
const jsonString = JSON.stringify(user);
console.log(jsonString);
// 输出: {"name":"李四","age":25,"isAdmin":false,"hobbies":["reading","music"],"address":{"city":"北京","street":"长安街"}}
// 使用 space 美化输出
const prettyJsonString = JSON.stringify(user, null, 2);
console.log(prettyJsonString);
/*
输出:
{
  "name": "李四",
  "age": 25,
  "isAdmin": false,
  "hobbies": [
    "reading",
    "music"
  ],
  "address": {
    "city": "北京",
    "street": "长安街"
  }
}
*/
// 使用 replacer 函数，过滤掉某些属性
const filteredJsonString = JSON.stringify(user, (key, value) => {
  if (key === "age") {
    return undefined; // 不序列化 age 属性
  }
  return value;
});
console.log(filteredJsonString);
// 输出: {"name":"李四","isAdmin":false,"hobbies":["reading","music"],"address":{"city":"北京","street":"长安街"}}

注意：

• JSON.stringify() 会忽略值为 function、undefined 和 Symbol 类型的属性。
• 循环引用的对象会导致 TypeError。

JSON.parse() - 将 JSON 字符串转换为 JavaScript 对象

当我们有一个 JSON 字符串，并希望将其转换为 JavaScript 中可以操作的对象时，使用 JSON.parse()。

语法： JSON.parse(text[, reviver])

• text: 必需，要解析的 JSON 字符串。
• reviver: 可选，一个函数，用于转换解析后的结果，该函数会遍历每个键值对，并返回一个值。

示例：

const jsonString = '{"name":"王五","age":28,"city":"上海"}';
// 将 JSON 字符串转换为 JavaScript 对象
const userObject = JSON.parse(jsonString);
console.log(userObject);
// 输出: { name: '王五', age: 28, city: '上海' }
console.log(userObject.name); // 输出: 王五
// 使用 reviver 函数，对属性值进行转换
const modifiedObject = JSON.parse(jsonString, (key, value) => {
  if (key === "age") {
    return value + 1; // 年龄加一
  }
  return value;
});
console.log(modifiedObject);
// 输出: { name: '王五', age: 29, city: '上海' }

将其他数据类型转换为“JSON 对象”

虽然 JSON.stringify() 主要用于生成字符串，但我们可以利用它来确保我们的 JavaScript 对象符合 JSON 格式，或者通过它来观察数据转换后的结果。

将数组转换为 JSON

数组是 JavaScript 中的一种特殊对象，JSON.stringify() 也能很好地处理它。

const fruits = ["apple", "banana", "orange"];
const fruitsJsonString = JSON.stringify(fruits);
console.log(fruitsJsonString); // 输出: ["apple","banana","orange"]
// 解析后得到的是 JavaScript 数组，也是对象的一种
const parsedFruits = JSON.parse(fruitsJsonString);
console.log(parsedFruits); // 输出: [ 'apple', 'banana', 'orange' ]

将原始类型转换为 JSON

原始类型如 string、number、boolean、null 也可以被 JSON.stringify() 处理。

const num = 123;
const str = "hello";
const bool = true;
const nullVal = null;
console.log(JSON.stringify(num));   // 输出: 123
console.log(JSON.stringify(str));   // 输出: "hello" (注意字符串会被加上双引号)
console.log(JSON.stringify(bool));  // 输出: true
console.log(JSON.stringify(nullVal)); // 输出: null

将 Map、Set 等 ES6 对象转换为 JSON

Map 和 Set 默认不能直接被 JSON.stringify() 序列化，我们需要先将它们转换为普通对象或数组。

示例：Map 转 JSON

const myMap = new Map([['a', 1], ['b', 2]]);
// 方法1：转换为普通对象
const mapToObject = Object.fromEntries(myMap);
const mapJsonString = JSON.stringify(mapToObject);
console.log(mapJsonString); // 输出: {"a":1,"b":2}
// 方法2：转换为数组再序列化
const mapToJsonString = JSON.stringify(Array.from(myMap));
console.log(mapToJsonString); // 输出: [["a",1],["b",2]]

示例：Set 转 JSON

const mySet = new Set([1, 2, 3, 2, 1]);
// 转换为数组再序列化
const setToJsonString = JSON.stringify(Array.from(mySet));
console.log(setToJsonString); // 输出: [1,2,3]

常见问题与注意事项

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

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

2. 函数和 undefined：如前所述，JSON.stringify() 会忽略对象中值为 function 和 undefined 的属性。

3. Symbol 类型：JSON.stringify() 也会忽略 Symbol 类型的属性。

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

   const date = new Date();
   console.log(JSON.stringify(date)); // 输出: "2024-05-21T08:30:00.123Z" (类似格式)

5. JSON 格式严格性：JSON 对象的属性名必须是双引号包裹的字符串，值可以是字符串、数字、布尔值、null、数组或另一个 JSON 对象，单引号包裹的字符串在 JSON 中是不合法的（尽管 JavaScript