本教程详细介绍了如何利用 javascript 遍历 html 元素，并根据其自定义数据属性（如 `data-tab`）动态地将相关数据分组到不同的唯一数组或对象中。通过获取 dom 元素、初始化数据容器以及迭代处理每个元素的属性，最终生成一个结构化的 javascript 对象，其中每个键对应一个唯一的 `data-tab` 值，其值则是一个包含该分组下所有元素详细信息的数组，适用于管理和展示大量结构化数据。
引言
在前端开发中，我们经常需要从 HTML 页面中提取数据并进行结构化处理。当页面中存在大量具有相似结构但特定属性值不同的元素时，将这些元素按照某个共同的属性进行分组，是数据组织和管理的重要一环。例如，我们可能有一系列产品卡片，需要根据它们的类别（如“专业版”、“经济版”）进行分组，以便后续的筛选、展示或数据分析。
场景描述与目标
假设我们有以下一系列 hidden 类型的 input 元素，它们通过自定义数据属性 data-size、data-color 和 data-tab 存储了产品信息：
<input hidden data-size="120x40" data-color="Brown" data-tab="Gardenbox Professional"> <input hidden data-size="160x40" data-color="Brown" data-tab="Gardenbox ECO"> <input hidden data-size="120x40" data-color="Red" data-tab="Gardenbox Professional"> <input hidden data-size="160x40" data-color="Red" data-tab="Gardenbox ECO"> <!-- 更多类似的 input 元素，可能有50个或更多 -->
我们的目标是使用 JavaScript，根据 data-tab 属性的值，将这些 input 元素的数据分组到不同的数组中。最终期望得到一个 JavaScript 对象，其中每个键是唯一的 data-tab 值，而对应的值是一个数组，该数组包含了所有属于该 data-tab 分组的元素详细信息（例如 size、color 和 tab）。
实现步骤
实现这一目标主要分为以下几个步骤：
立即学习“Java免费学习笔记（深入）”；
- 获取所有目标元素： 首先，我们需要选择页面上所有符合条件的 input 元素。
- 初始化结果容器： 创建一个空的 JavaScript 对象，用于存储最终的分组结果。
- 遍历并分组数据： 遍历每个获取到的 input 元素，提取其 data-tab 值作为分组的键，并将元素的其他数据属性组织成子对象，然后添加到对应分组的数组中。
完整代码示例
以下是实现上述功能的 JavaScript 代码：
// 步骤 1: 获取页面上所有 'input' 元素
var inputs = document.querySelectorAll('input');
// 步骤 2: 初始化一个空对象，用于存储最终的分组结果
var groupedData = {};
// 步骤 3: 遍历每个 input 元素并进行数据分组
for (var i = 0; i < inputs.length; i++) {
// 获取当前元素的 data-tab 属性值
var tabValue = inputs[i].getAttribute('data-tab');
// 检查 groupedData 对象是否已经存在以 tabValue 为键的属性
// 如果不存在，则创建一个新的空数组作为该键的值
if (!groupedData.hasOwnProperty(tabValue)) {
groupedData[tabValue] = [];
}
// 创建一个子对象，用于存储当前元素的详细数据
var subObject = {};
subObject["size"] = inputs[i].getAttribute('data-size');
subObject["color"] = inputs[i].getAttribute('data-color');
subObject["tab"] = tabValue; // 直接使用已获取的 tabValue
// 将子对象添加到对应 tabValue 的数组中
groupedData[tabValue].push(subObject);
}
// 打印最终分组结果到控制台
console.log(groupedData);运行上述代码后，console.log(groupedData) 将输出类似以下结构的对象：
{
"Gardenbox Professional": [
{ "size": "120x40", "color": "Brown", "tab": "Gardenbox Professional" },
{ "size": "120x40", "color": "Red", "tab": "Gardenbox Professional" }
],
"Gardenbox ECO": [
{ "size": "160x40", "color": "Brown", "tab": "Gardenbox ECO" },
{ "size": "160x40", "color": "Red", "tab": "Gardenbox ECO" }
]
}代码解析
- document.querySelectorAll('input'): 这行代码用于选择文档中所有 input 标签的元素，并返回一个 NodeList。
- var groupedData = {};: 初始化一个空对象 groupedData。这个对象将是最终结果的容器，它的键将是 data-tab 的唯一值，而值将是包含相应数据项的数组。
- for (var i = 0; i < inputs.length; i++) { ... }: 这是一个标准的 for 循环，用于遍历 inputs NodeList 中的每一个元素。
- var tabValue = inputs[i].getAttribute('data-tab');: 在每次循环中，获取当前 input 元素的 data-tab 属性值。
- if (!groupedData.hasOwnProperty(tabValue)) { groupedData[tabValue] = []; }: 这是一个关键的逻辑判断。它检查 groupedData 对象是否已经拥有一个以当前 tabValue 为键的属性。如果 hasOwnProperty 返回 false（表示不存在该键），则说明这是一个新的 data-tab 分组，因此会为它创建一个新的空数组。
- var subObject = {}; ...: 创建一个临时的 subObject，用于存储当前 input 元素的所有相关数据属性。这里我们提取了 data-size、data-color 和 data-tab。
- groupedData[tabValue].push(subObject);: 将创建好的 subObject 添加到 groupedData 对象中对应 tabValue 的数组里。
注意事项与优化
-
使用 dataset API: 对于 data-* 属性，JavaScript 提供了更简洁的 dataset API。例如，inputs[i].getAttribute('data-tab') 可以替换为 inputs[i].dataset.tab。使用 dataset 可以使代码更具可读性。
// 使用 dataset API 的示例 var tabValue = inputs[i].dataset.tab; subObject["size"] = inputs[i].dataset.size; subObject["color"] = inputs[i].dataset.color;
-
错误处理: 如果某些 input 元素可能缺少 data-tab 属性，getAttribute('data-tab') 或 dataset.tab 将返回 null 或 undefined。在这种情况下，tabValue 可能会变成 "null" 或 "undefined" 字符串，导致数据被错误地分组。可以添加检查来处理这种情况，例如：
var tabValue = inputs[i].dataset.tab || 'unknown'; // 如果不存在，则归类到 'unknown'
- 性能考量: 对于非常大量的 DOM 元素（例如数千个），频繁的 DOM 操作（getAttribute）可能会有轻微的性能开销。然而，对于本例中的几十个或几百个元素，这种方法是完全可接受且高效的。
- 函数式编程替代方案: 熟悉 ES6+ 的开发者可能会倾向于使用 Array.prototype.reduce() 方法来实现更函数式的分组逻辑，代码会更紧凑，但对于初学者来说，for 循环可能更直观。
总结
通过本教程，我们学习了如何利用 JavaScript 遍历 HTML 元素，并根据其自定义数据属性（如 data-tab）将数据动态地分组到结构化的 JavaScript 对象中。这种模式在处理和组织前端数据时非常实用，能够帮助开发者高效地管理和利用页面上的结构化信息，为后续的数据展示、过滤和交互奠定基础。掌握这种数据分组技术，能够显著提升前端数据处理的灵活性和代码的可维护性。
