JavaScript数据转换：将二维数组重构为结构化对象数组

本教程详细介绍了如何使用javascript将常见的二维数组（如从电子表格获取的数据）转换为更易于处理的结构化对象数组。通过`array.prototype.reduce()`方法，我们将学习如何提取特定索引的数据并将其映射到具名属性，同时将一系列相关数据聚合为子数组，从而提升数据可读性和应用处理效率。

在现代Web开发中，我们经常需要处理来自不同源的数据，例如数据库查询结果、API响应或是从电子表格（如Google Sheets或Excel）导出的数据。这些数据通常以二维数组的形式呈现，其中每个内层数组代表一行记录，数组中的每个元素代表一个字段。然而，对于应用程序的进一步处理和展示，将这种扁平的二维数组结构转换为更具语义化和易于访问的对象数组通常是更优的选择。对象数组允许我们通过具名属性而非数字索引来访问数据，极大地提高了代码的可读性和可维护性。

数据转换需求

假设我们从Google Sheets获取到以下格式的二维数组数据，它包含了人员的基本信息和他们所学的科目：

[
  [ 'Teresa', 'lname', 44, 'hindi', 'math', 'sci' ],
  [ 'Conn', 'de', 55, 'hindi', 'math', 'che' ],
  [ 'Caterina', 'ddd', 33, 'math', 'hindi', 'bio' ],
  [ 'Papagena', 'dd', 42, 'math', 'hindi', 'geo' ],
  [ 'Fabien', 'des', 33, 'hindi', 'eng', '' ]
]

我们的目标是将其转换为以下结构的对象数组，其中每个对象代表一个人，包含name、lastName、age属性，并且所有科目被聚合到一个名为subjects的数组中：

[
  {name:'Teresa', lastName:'lname', age: 44, subjects:['hindi', 'math', 'sci' ]},
  {name:'Conn', lastName:'de', age:55, subjects:['hindi', 'math', 'che' ]},
  {name:'Caterina', lastName:'ddd', age:33, subjects:['math', 'hindi', 'bio' ]},
  {name:'Papagena', lastName:'dd', age:42, subjects:['math', 'hindi', 'geo' ]},
  {name:'Fabien', lastName:'des', age:33, subjects:['hindi', 'eng', '' ]}
]

使用 Array.prototype.reduce() 进行转换

JavaScript的Array.prototype.reduce()方法是处理此类数据转换任务的强大工具。它对数组中的每个元素执行一个由您提供的reducer函数，将其结果汇总为单个返回值。在这个场景中，我们将利用它来遍历原始的二维数组，并为每个内层数组生成一个新的对象，最终累积成一个对象数组。

立即学习“Java免费学习笔记（深入）”；

以下是实现此转换的详细步骤和代码示例：

拾贝

一键同步微信读书所有笔记和划线，并在新标签页回顾

186

查看详情

1. 初始化累加器 (Accumulator): reduce方法需要一个初始值作为其累加器。对于我们的目标，这个初始值应该是一个空数组 []，它将用来收集最终生成的对象。

2. 定义 reducer 函数: reducer函数接收两个主要参数：acc（累加器）和 cur（当前正在处理的数组元素）。

   • acc: 在每次迭代中，它将是已经构建好的对象数组。
   • cur: 在每次迭代中，它将是原始二维数组中的一个内层数组（例如 ['Teresa', 'lname', 44, 'hindi', 'math', 'sci']）。

3. 在 reducer 中构建对象:

   • 在每次迭代中，创建一个新的空对象 obj。
   • 根据原始数据中的索引，将值赋给新对象的具名属性。例如，cur[0] 对应 name，cur[1] 对应 lastName，cur[2] 对应 age。
   • 对于科目列表，它们从索引 3 开始。我们可以使用 Array.prototype.slice() 方法从 cur 数组中提取这些元素，形成一个新的数组，并将其赋值给 obj.subjects 属性。cur.slice(3) 将返回从索引 3 到数组末尾的所有元素组成的数组。
   • 将构建好的 obj 推入累加器 acc 中。
   • 返回更新后的 acc。

示例代码

const rawData = [
  ["Teresa", "lname", 44, "hindi", "math", "sci"],
  ["Conn", "de", 55, "hindi", "math", "che"],
  ["Caterina", "ddd", 33, "math", "hindi", "bio"],
  ["Papagena", "dd", 42, "math", "hindi", "geo"],
  ["Fabien", "des", 33, "hindi", "eng", ""]
];

const transformedData = rawData.reduce((accumulator, currentRow) => {
  const personObject = {};
  // 映射前三个元素到具名属性
  personObject.name = currentRow[0];
  personObject.lastName = currentRow[1];
  personObject.age = currentRow[2];

  // 使用 slice 提取剩余元素作为 subjects 数组
  personObject.subjects = currentRow.slice(3);

  // 将新创建的对象添加到累加器数组中
  accumulator.push(personObject);

  // 返回更新后的累加器
  return accumulator;
}, []); // 初始累加器为一个空数组

console.log(transformedData);
/*
输出结果:
[
  { name: 'Teresa', lastName: 'lname', age: 44, subjects: [ 'hindi', 'math', 'sci' ] },
  { name: 'Conn', lastName: 'de', age: 55, subjects: [ 'hindi', 'math', 'che' ] },
  { name: 'Caterina', lastName: 'ddd', age: 33, subjects: [ 'math', 'hindi', 'bio' ] },
  { name: 'Papagena', lastName: 'dd', age: 42, subjects: [ 'math', 'hindi', 'geo' ] },
  { name: 'Fabien', lastName: 'des', age: 33, subjects: [ 'hindi', 'eng', '' ] }
]
*/

注意事项与最佳实践

1. 数据一致性: 确保原始二维数组中每行的数据结构（即每个字段的顺序和类型）是一致的。如果数据不规则，例如某些行缺少字段，则需要额外的错误处理或默认值逻辑。
2. 可读性与维护性: 尽管直接使用索引 (currentRow[0]) 简单直接，但如果数据列数很多或列的含义不明确，代码的可读性会下降。对于更复杂的场景，可以考虑使用一个映射数组或对象来定义列名和对应的索引，以提高代码的清晰度。
3. 性能: 对于大型数据集，reduce 方法通常是高效的。然而，如果数据量极其庞大，并且需要进行复杂的计算，可以考虑Web Workers来避免阻塞主线程。
4. 空值处理: 在本例中，如果subjects数组中存在空字符串（如Fabien的最后一个科目），slice()方法会原样保留。如果需要过滤掉这些空值，可以在personObject.subjects = currentRow.slice(3);之后再添加一步过滤操作，例如 personObject.subjects = currentRow.slice(3).filter(s => s !== '');。

总结

通过本教程，我们学习了如何利用JavaScript的Array.prototype.reduce()方法将扁平的二维数组数据转换为结构化的对象数组。这种转换是数据处理中的常见需求，它能显著提高数据的可读性、可访问性以及在应用程序中的处理效率。掌握这种数据重塑技术，将使您能够更灵活、高效地处理来自各种源的数据。

以上就是JavaScript数据转换：将二维数组重构为结构化对象数组的详细内容，更多请关注php中文网其它相关文章！