js如何用json得到多维数组

从 JSON 到多维数组：JavaScript 中的数据转换与处理**

在 JavaScript 开发中，我们经常需要处理来自不同来源的数据，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，因其易于人阅读和编写，同时也易于机器解析和生成，而被广泛应用，很多时候，我们从 API 获取的数据或者存储在配置文件中的数据都是以 JSON 字符串的形式存在的，当我们需要在 JavaScript 中对这些数据进行复杂的操作，尤其是处理嵌套结构时，将其转换为多维数组（即数组的数组，或更深层次的嵌套数组）就显得尤为重要，本文将详细探讨如何使用 JavaScript 将 JSON 数据转换为多维数组,并介绍相关的技巧和注意事项。

JSON 与多维数组的关系

我们需要明确 JSON 和 JavaScript 多维数组在结构上的相似性与差异性。

JSON (JavaScript Object Notation): 它是一种数据格式，可以表示对象（使用花括号）和数组（使用方括号 []），对象由键值对组成，值可以是简单类型（字符串、数字、布尔值、null）也可以是复杂的对象或数组，数组则是一组值的有序集合，这些值同样可以是简单类型或复杂的对象/数组。
JavaScript 多维数组: 这是指数组中的元素仍然是数组，可以形成嵌套的结构，[[1, 2], [3, 4]] 是一个二维数组，[[[1, 2]], [3, 4]] 则是一个三维数组。

关键点：JSON 本身可以非常自然地表示类似多维数组的数据结构，尤其是当 JSON 的顶层或某个层级的值是数组，且数组元素本身也是数组时，我们的任务通常是将 JSON 字符串解析为 JavaScript 对象/数组，然后根据需求提取或重组数据,形成我们所需的多维数组格式。

核心步骤：JSON 字符串到 JavaScript 对象/数组的转换

要从 JSON 得到多维数组，第一步几乎总是将 JSON 字符串解析为 JavaScript 的原生数据类型——对象或数组，这可以通过 JSON.parse() 方法轻松实现。

假设我们有以下 JSON 字符串,它包含了一个嵌套的数组结构：

const jsonString = '{
  "school": "Example High School",
  "classes": [
    {
      "className": "Class A",
      "students": [
        {"id": 1, "name": "Alice", "grades": [90, 85, 92]},
        {"id": 2, "name": "Bob", "grades": [78, 82, 88]}
      ]
    },
    {
      "className": "Class B",
      "students": [
        {"id": 3, "name": "Charlie", "grades": [95, 91, 89]},
        {"id": 4, "name": "David", "grades": [84, 79, 86]}
      ]
    }
  ]
}';

使用 JSON.parse() 将其转换为 JavaScript 对象：

const jsonData = JSON.parse(jsonString);
console.log(jsonData);
// jsonData 是一个 JavaScript 对象，其结构类似于 JSON 定义。

从解析后的 JSON 中提取多维数组

解析后，我们得到了一个 JavaScript 对象 jsonData，我们需要根据具体需求从这个对象中提取数据,构建我们需要的多维数组。

示例 1：提取所有学生的成绩列表（三维数组：班级 -> 学生 -> 成绩）

假设我们想要一个结构如下的三维数组： [ [ [90, 85, 92], [78, 82, 88] ], [ [95, 91, 89], [84, 79, 86] ] ]

这表示每个班级是一个数组,班级内每个学生的成绩是一个数组。

let grades3D = [];
// 遍历 jsonData.classes 数组
for (const classData of jsonData.classes) {
  let classGrades = [];
  // 遍历当前班级的 students 数组
  for (const student of classData.students) {
    // 将每个学生的 grades 数组添加到 classGrades 中
    classGrades.push(student.grades);
  }
  // 将当前班级的成绩数组添加到 grades3D 中
  grades3D.push(classGrades);
}
console.log(grades3D);
/* 输出:
[
  [ [ 90, 85, 92 ], [ 78, 82, 88 ] ],
  [ [ 95, 91, 89 ], [ 84, 79, 86 ] ]
]
*/

使用 Array.prototype.map() 优化：

map 方法可以更简洁地实现类似功能,特别是当我们只需要提取某个特定属性时。

const grades3DMap = jsonData.classes.map(classData => 
  classData.students.map(student => student.grades)
);
console.log(grades3DMap);
// 输出与上面相同

示例 2：提取所有学生的 ID 和姓名（二维数组：学生 -> [id, name]）

假设我们想要一个二维数组，每个子数组包含一个学生的 ID 和姓名：

let studentsInfo2D = [];
for (const classData of jsonData.classes) {
  for (const student of classData.students) {
    studentsInfo2D.push([student.id, student.name]);
  }
}
console.log(studentsInfo2D);
/* 输出:
[
  [ 1, 'Alice' ],
  [ 2, 'Bob' ],
  [ 3, 'Charlie' ],
  [ 4, 'David' ]
]
*/

使用 Array.prototype.flatMap() 和 map() 优化：

flatMap 可以在映射后扁平化一层数组,非常适合这种嵌套遍历的场景。

const studentsInfo2DMap = jsonData.classes.flatMap(classData => 
  classData.students.map(student => [student.id, student.name])
);
console.log(studentsInfo2DMap);
// 输出与上面相同

示例 3：提取班级名称和学生人数（二维数组：[班级名, 人数]）

let classStats2D = jsonData.classes.map(classData => [
  classData.className,
  classData.students.length
]);
console.log(classStats2D);
/* 输出:
[
  [ 'Class A', 2 ],
  [ 'Class B', 2 ]
]
*/

处理复杂 JSON 结构与注意事项

数据校验：在开始转换之前，最好先验证 JSON 数据的结构是否符合预期，可以使用 typeof 操作符检查关键节点的类型，if (Array.isArray(jsonData.classes)) { ... },以避免因数据格式错误导致的运行时错误。
空值与未定义： JSON 中可能缺少某些键或数组为空，需要进行判断,否则可能会在访问属性或方法时抛出错误。
```
const students = classData && classData.students ? classData.students : [];
```
深拷贝与引用： JSON.parse(JSON.stringify(obj)) 是一种常见的深拷贝方法，但直接使用 JSON.parse() 解析得到的数组/对象与原始 JSON 字符串是引用关系，如果你需要修改转换后的多维数组而不希望影响原始 JSON 数据（如果原始数据是可变的），你可能需要考虑进行深拷贝,或者在操作时确保不直接修改原始数据。
循环引用：标准的 JSON 格式不支持循环引用，如果你的数据源可能包含循环引用，JSON.parse() 会抛出错误，这种情况通常需要特殊的序列化/反序列化库来处理。
性能考虑：对于非常大的 JSON 数据，使用 for 循环通常比 map、filter 等高阶函数有更好的性能，因为高阶函数会创建新的数组，但在大多数实际应用场景中，可读性和简洁性更为重要,高阶函数是更好的选择。

从 JSON 数据中获取多维数组是 JavaScript 开发中的常见任务,其核心流程可以概括为：

解析：使用 JSON.parse() 将 JSON 字符串转换为 JavaScript 对象或数组。
提取与重组：根据业务需求，通过遍历（for...of、forEach）、映射（map）、扁平化（flatMap）等数组方法，从解析后的数据中提取所需元素,并按照多维数组的结构进行重组。

理解 JSON 的数据结构以及 JavaScript 数组操作的特性，是高效完成这项任务的关键，通过合理选择遍历和转换方法，我们可以灵活地将各种 JSON 数据源转换为所需的多维数组形式,为后续的数据处理和展示打下坚实的基础。