本教程详细介绍了如何在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’ 可能是该人学习的科目
这种格式虽然紧凑，但要理解每个元素的含义，需要依赖其在数组中的索引位置，缺乏自解释性。
目标数据格式
我们的目标是将上述数据转换为以下对象数组形式：
[ {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函数，将其结果汇总为单个返回值。
实现步骤
初始化累加器： reduce 方法需要一个初始值，对于将数组转换为另一个数组的场景，通常是一个空数组 []。遍历每个内部数组： reducer 函数会依次接收原始数组中的每个内部数组（即每一行数据）。创建新对象： 在每次迭代中，创建一个新的空对象，用于存储当前行的数据。映射基本属性： 根据原始数据中元素的索引，将它们映射到新对象的特定属性上（例如，currentRow[0] 映射到 name，currentRow[1] 映射到 lastName，currentRow[2] 映射到 age）。处理多值属性： 对于像 subjects 这样由多个原始数组元素组成的属性，可以使用 Array.prototype.slice() 方法从当前内部数组中截取相应的部分，形成一个新的数组作为该属性的值。添加到累加器： 将构建好的对象添加到累加器数组中。
示例代码
以下是实现上述转换的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中处理表格数据：将扁平数组行转换为结构化对象记录的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1603333.html
微信扫一扫 
支付宝扫一扫 
