JavaScript中处理表格数据：将扁平数组行转换为结构化对象记录

本教程详细介绍了如何在javascript中将从google sheets或excel等表格数据源获取的扁平数组（数组的数组）转换为更具语义化和易于操作的结构化对象数组。我们将利用array.prototype.reduce()方法，通过索引映射和数组切片技术，高效地将每一行数据转换为包含明确属性的对象，包括处理多值字段（如科目列表），从而提升数据处理的灵活性和代码可读性。

在现代Web开发中，我们经常需要处理来自各种外部数据源（如数据库查询结果、CSV文件、Google Sheets或Excel导出）的数据。这些数据通常以表格形式呈现，在JavaScript中，最常见的表示方式是“数组的数组”，即每个内部数组代表表格中的一行记录，而数组中的元素则对应于该行中的各个字段值。然而，这种扁平结构在进行数据操作或展示时，往往不如具有明确键值对的“对象数组”来得直观和方便。

理解数据结构转换

为了更好地管理和操作数据，我们需要将原始的扁平数组结构转换为更具语义化的对象数组。

原始数据格式

假设我们从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', '' ]
]

在这个结构中，每个内部数组代表一个人的记录。例如，['Teresa', 'lname', 44, 'hindi', 'math', 'sci'] 表示一个人的信息，其中：

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

• Teresa 可能是名字
• lname 可能是姓氏
• 44 可能是年龄
• 'hindi', 'math', 'sci' 可能是该人学习的科目

这种格式虽然紧凑，但要理解每个元素的含义，需要依赖其在数组中的索引位置，缺乏自解释性。

LobeHub

LobeChat brings you the best user experience of ChatGPT, OLLaMA, Gemini, Claude

302

查看详情

目标数据格式

我们的目标是将上述数据转换为以下对象数组形式：

[
  {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', '' ]}
]

这种对象数组的优势在于：

• 每个记录是一个对象，属性名（如 name, lastName, age, subjects）清晰地表达了数据的含义。
• subjects 属性是一个数组，能够很好地表示多值字段，保持了原始数据的结构完整性。
• 通过属性名访问数据比通过索引访问更具可读性和健壮性。

转换方法：使用 Array.prototype.reduce()

JavaScript的Array.prototype.reduce()方法是处理这种数据转换任务的强大工具。它对数组中的每个元素执行一个由您提供的reducer函数，将其结果汇总为单个返回值。

实现步骤

1. 初始化累加器： reduce 方法需要一个初始值，对于将数组转换为另一个数组的场景，通常是一个空数组 []。
2. 遍历每个内部数组： reducer 函数会依次接收原始数组中的每个内部数组（即每一行数据）。
3. 创建新对象： 在每次迭代中，创建一个新的空对象，用于存储当前行的数据。
4. 映射基本属性： 根据原始数据中元素的索引，将它们映射到新对象的特定属性上（例如，currentRow[0] 映射到 name，currentRow[1] 映射到 lastName，currentRow[2] 映射到 age）。
5. 处理多值属性： 对于像 subjects 这样由多个原始数组元素组成的属性，可以使用 Array.prototype.slice() 方法从当前内部数组中截取相应的部分，形成一个新的数组作为该属性的值。
6. 添加到累加器： 将构建好的对象添加到累加器数组中。

示例代码

以下是实现上述转换的JavaScript代码：

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 structuredData = rawData.reduce((accumulator, currentRow) => {
  const record = {}; // 为当前行创建一个新对象

  // 映射基本属性
  record.name = currentRow[0];
  record.lastName = currentRow[1];
  record.age = currentRow[2];

  // 使用 slice() 提取科目列表，从索引3开始到数组末尾
  record.subjects = currentRow.slice(3);

  accumulator.push(record); // 将构建好的对象添加到结果数组
  return accumulator; // 返回更新后的累加器
}, []); // 初始累加器为一个空数组

console.log(structuredData);
/*
输出结果:
[
  { 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', '' ] }
]
*/

代码解析

• rawData.reduce(...): 对 rawData 数组调用 reduce 方法。
• (accumulator, currentRow) => { ... }: 这是 reducer 函数。
  • accumulator: 存储 reduce 过程中的累积结果。在每次迭代中，它会是前一次迭代返回的值。
  • currentRow: rawData 数组中的当前元素，即一个内部数组（例如 ['Teresa', 'lname', 44, 'hindi', 'math', 'sci']）。
• const record = {};: 为当前行数据创建一个新的空对象 record。
• record.name = currentRow[0];: 将 currentRow 的第一个元素（索引为0）赋值给 record 对象的 name 属性。
• record.lastName = currentRow[1];: 将 currentRow 的第二个元素赋值给 record 对象的 lastName 属性。
• record.age = currentRow[2];: 将 currentRow 的第三个元素赋值给 record 对象的 age 属性。
• record.subjects = currentRow.slice(3);: 这是处理多值字段的关键。slice(3) 会从 currentRow 的索引3开始，截取到数组末尾的所有元素，并返回一个新数组。这个新数组被赋值给 record 对象的 subjects 属性。
• accumulator.push(record);: 将构建好的 record 对象添加到 accumulator 数组中。
• return accumulator;: reducer 函数必须返回累加器，以便在下一次迭代中使用。
• []: 这是 reduce 方法的第二个参数，表示 accumulator 的初始值。在这里，我们将其初始化为一个空数组，最终将成为 `

以上就是JavaScript中处理表格数据：将扁平数组行转换为结构化对象记录的详细内容，更多请关注php中文网其它相关文章！