javascript中json怎么转换

JavaScript中JSON转换全攻略：从JSON字符串到对象及反之**

在JavaScript开发中，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其简洁和易于读写而被广泛应用，前后端数据交互、API通信等场景都离不开JSON，而JavaScript本身对JSON有着良好的支持，提供了内置的方法来进行JSON字符串与JavaScript对象（或数组）之间的相互转换,本文将详细介绍这两种核心转换方法及其相关注意事项。

JSON字符串转换为JavaScript对象/数组

当我们从服务器获取数据或读取本地存储的JSON格式数据时，这些数据通常是以字符串的形式存在的，我们需要将其转换为JavaScript对象或数组,才能在代码中进行操作和访问。

核心方法：JSON.parse()

JSON.parse() 方法用于将一个JSON字符串解析成对应的JavaScript值（对象或数组）。

语法：

JSON.parse(text[, reviver])

• text: 必需,一个有效的JSON字符串。
• reviver: 可选，一个转换结果的函数，对象的每个成员都会经过此函数处理,处理后再返回最终结果。

示例：

1. JSON对象字符串转JS对象

   const jsonString = '{"name": "张三", "age": 30, "isStudent": false, "courses": ["数学", "英语"]}';
   const jsObject = JSON.parse(jsonString);
   console.log(jsObject);
   // 输出: { name: '张三', age: 30, isStudent: false, courses: [ '数学', '英语' ] }
   console.log(jsObject.name); // 输出: 张三
   console.log(jsObject.courses[0]); // 输出: 数学

2. JSON数组字符串转JS数组

   const jsonArrayString = '[{"id": 1, "task": "学习JS"}, {"id": 2, "task": "写代码"}]';
   const jsArray = JSON.parse(jsonArrayString);
   console.log(jsArray);
   // 输出: [ { id: 1, task: '学习JS' }, { id: 2, task: '写代码' } ]
   console.log(jsArray[0].task); // 输出: 学习JS

3. 使用reviver函数

   const jsonStringWithDate = '{"name": "李四", "loginTime": "2023-10-27T10:00:00Z"}';
   const jsObjectWithDate = JSON.parse(jsonStringWithDate, (key, value) => {
     if (key === 'loginTime') {
       return new Date(value); // 将日期字符串转换为Date对象
     }
     return value;
   });
   console.log(jsObjectWithDate.loginTime instanceof Date); // 输出: true
   console.log(jsObjectWithDate.loginTime); // 输出: 2023-10-27T10:00:00.000Z (Date对象)

注意事项：

• 语法错误：如果传入的字符串不是有效的JSON格式，JSON.parse() 会抛出 SyntaxError 异常，在实际开发中，建议使用 try...catch 进行错误处理。

  const invalidJsonString = "{name: '王五', age: 25}"; // 属性名必须双引号
  try {
    JSON.parse(invalidJsonString);
  } catch (error) {
    console.error("JSON解析错误:", error.message);
  }

• 安全性：避免使用 eval() 函数来解析JSON字符串，因为它会执行字符串中的任意代码，存在严重的安全风险。JSON.parse() 是专门为解析JSON设计的,更安全。

JavaScript对象/数组转换为JSON字符串

当我们需要将JavaScript中的对象或数组数据发送到服务器，或者将其存储到本地存储（如localStorage）时,通常需要将其转换为JSON字符串。

核心方法：JSON.stringify()

JSON.stringify() 方法用于将一个JavaScript值（对象或数组）转换为一个JSON字符串。

语法：

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

• value: 必需，要转换的JavaScript值（通常是对象或数组）。
• replacer: 可选，可以是一个函数或数组，用于控制如何转换结果。
  • 如果是函数，则每个属性都会经过此函数处理,返回的值将替换原来的值。
  • 如果是数组,则只有包含在该数组中的属性名才会被转换。
• space: 可选，一个字符串或数字，用于美化输出JSON字符串的格式（缩进）。

示例：

1. JS对象转JSON字符串

   const jsObject = {
     name: "赵六",
     age: 28,
     isStudent: true,
     courses: ["物理", "化学"],
     address: {
       city: "北京",
       district: "海淀区"
     }
   };
   const jsonString = JSON.stringify(jsObject);
   console.log(jsonString);
   // 输出: {"name":"赵六","age":28,"isStudent":true,"courses":["物理","化学"],"address":{"city":"北京","district":"海淀区"}}

2. 使用replacer函数（过滤数据）

   const jsObjectForFilter = { name: "钱七", age: 35, password: "123456" };
   // 只转换name属性
   const jsonStringWithReplacerFunction = JSON.stringify(jsObjectForFilter, (key, value) => {
     if (key === 'password') {
       return undefined; // 过滤掉password属性
     }
     return value;
   });
   console.log(jsonStringWithReplacerFunction);
   // 输出: {"name":"钱七","age":35}

3. 使用replacer数组（指定属性）

   const jsObjectForArray = { name: "孙八", age: 40, email: "sunba@example.com", phone: "13800138000" };
   // 只转换name和email属性
   const jsonStringWithReplacerArray = JSON.stringify(jsObjectForArray, ['name', 'email']);
   console.log(jsonStringWithReplacerArray);
   // 输出: {"name":"孙八","email":"sunba@example.com"}

4. 使用space美化输出

   const jsObjectForPretty = { name: "周九", details: { hobby: "reading", sport: "basketball" } };
   // 使用数字（表示缩空格数，最大10）或字符串（表示缩进用的字符串，如"\t"或"  "）
   const prettyJsonString = JSON.stringify(jsObjectForPretty, null, 2);
   console.log(prettyJsonString);
   /* 输出:
   {
     "name": "周九",
     "details": {
       "hobby": "reading",
       "sport": "basketball"
     }
   }
   */

注意事项：

• 循环引用：如果JavaScript对象中存在循环引用（对象的某个属性引用了对象本身），JSON.stringify() 会抛出 TypeError 错误。

  const objWithCircularRef = {};
  objWithCircularRef.self = objWithCircularRef;
  try {
    JSON.stringify(objWithCircularRef);
  } catch (error) {
    console.error("JSON序列化错误:", error.message);
  }

• 忽略特定值：在转换过程中，以下类型的值会被自动忽略（不会出现在JSON字符串中）：

  • undefined
  • 函数（function）
  • Symbol 类型的值
  • 包含 undefined、函数或 Symbol 的对象属性也会被忽略。

• 原型链上的属性：JSON.stringify() 不会包含对象原型链上的属性。

在JavaScript中处理JSON数据转换,核心就是记住两个方法：

1. JSON.parse(string)：将JSON字符串解析为JavaScript对象/数组，适用于从外部源（API、文件、存储）接收JSON数据。
2. JSON.stringify(object)：将JavaScript对象/数组序列化为JSON字符串,适用于向外部源发送数据或存储JSON数据。

理解这两个方法的用法、参数以及注意事项，能够帮助你在日常开发中更灵活、更安全地处理JSON数据，确保前后端数据交互的顺畅进行，记得在实际使用 JSON.parse() 时进行错误捕获,避免因格式问题导致程序中断。