JavaScript教程：根据HTML数据属性动态分组并生成唯一数组对象-html教程-PHP中文网

JavaScript教程：根据HTML数据属性动态分组并生成唯一数组对象

心靈之曲

发布： 2025-11-09 11:20:01

原创

153人浏览过

JavaScript教程：根据HTML数据属性动态分组并生成唯一数组对象

本教程旨在指导开发者如何使用javascript从html元素中提取数据，并根据特定的`data-*`属性值动态创建分组的唯一数组对象。通过遍历dom元素、检查并初始化结果对象的属性，最终将具有相同`data-*`属性值的元素数据聚合到对应的数组中，形成一个结构化、易于访问的数据集合，适用于处理大量具有相似数据模式的html元素。

在前端开发中，我们经常会遇到需要从HTML页面中收集特定数据并进行结构化处理的场景。例如，页面上可能存在大量具有自定义data-*属性的元素，我们需要根据其中一个data-*属性的值来对这些元素的数据进行分组。本教程将以一个具体的例子，展示如何使用纯JavaScript实现这一功能。

场景描述

假设我们有以下一系列隐藏的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个或更多 -->

登录后复制

我们的目标是根据data-tab属性的值，将这些input元素的数据进行分组，最终生成一个JavaScript对象。这个对象的键将是唯一的data-tab值，而每个键对应的值则是一个数组，数组中包含所有具有该data-tab值的元素的详细数据（如size和color）。

实现步骤与代码解析

我们将通过以下步骤来实现数据的提取与分组：

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

WeShop唯象

WeShop唯象是国内首款AI商拍工具，专注电商产品图片的智能生成。

113

查看详情

选择所有目标HTML元素：使用document.querySelectorAll方法选中所有需要处理的input元素。
初始化结果对象：创建一个空对象，用于存储最终分组后的数据。
遍历元素并进行分组：
- 对于每个元素，获取其data-tab属性值作为分组的依据。
- 检查结果对象中是否已存在以该data-tab值为键的属性。如果不存在，则创建一个空数组作为其值。
- 提取当前元素的其他相关数据（如data-size和data-color），构建成一个子对象。
- 将这个子对象添加到对应data-tab键的数组中。

下面是具体的JavaScript实现代码：

// 1. 获取所有目标HTML元素
var inputs = document.querySelectorAll('input[data-tab]'); // 更精确地选择带有data-tab属性的input

// 2. 初始化结果对象
var groupedData = {};

// 3. 遍历元素并进行分组
for (var i = 0; i < inputs.length; i++) {
  var currentInput = inputs[i];
  var tabValue = currentInput.getAttribute('data-tab');

  // 如果groupedData中还没有这个data-tab的键，则初始化为一个空数组
  if (!groupedData.hasOwnProperty(tabValue)) {
    groupedData[tabValue] = [];
  }

  // 构建当前元素的子数据对象
  var subObject = {
    "size": currentInput.getAttribute('data-size'),
    "color": currentInput.getAttribute('data-color'),
    "tab": tabValue // 也可以包含tab属性，方便后续使用
  };

  // 将子数据对象添加到对应的分组数组中
  groupedData[tabValue].push(subObject);
}

// 输出最终结果
console.log(groupedData);

登录后复制

代码解析

document.querySelectorAll('input[data-tab]'): 这行代码选择所有具有data-tab属性的input元素。相比于只使用'input'，这样可以更精确地定位到我们关心的元素，避免处理不相关的input。
var groupedData = {};: 声明一个空对象groupedData，它将是我们的最终输出。
for (var i = 0; i < inputs.length; i++): 这是一个标准的for循环，用于遍历通过querySelectorAll获取到的所有input元素。
var tabValue = currentInput.getAttribute('data-tab');: 使用getAttribute()方法获取当前元素的data-tab属性值。
if (!groupedData.hasOwnProperty(tabValue)): 这是一个关键的逻辑判断。hasOwnProperty()方法用于检查groupedData对象自身是否包含名为tabValue的属性（而不是继承的属性）。如果不存在，说明这是第一次遇到这个data-tab值，我们需要为其创建一个新的空数组。
groupedData[tabValue] = [];: 为新的data-tab值初始化一个空数组。
var subObject = {...};: 创建一个普通JavaScript对象subObject，用于存储当前input元素的data-size、data-color和data-tab属性值。这里直接使用了属性名作为键。
groupedData[tabValue].push(subObject);: 将构建好的subObject添加到groupedData中对应tabValue的数组里。

预期输出

运行上述代码后，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" }
  ]
}

登录后复制

注意事项与进阶

使用dataset属性：现代浏览器支持通过元素的dataset属性直接访问data-*属性，这通常比getAttribute()更简洁。例如，currentInput.getAttribute('data-size')可以写成currentInput.dataset.size。
```
// 使用dataset属性的优化示例
var subObject = {
  "size": currentInput.dataset.size,
  "color": currentInput.dataset.color,
  "tab": currentInput.dataset.tab
};
```
登录后复制
错误处理：如果某些元素可能缺少预期的data-*属性，getAttribute()或dataset会返回null或undefined。在实际应用中，你可能需要添加检查来处理这些情况，例如提供默认值或跳过不完整的元素。
性能考虑：对于页面上数量非常庞大的元素（例如数千个），querySelectorAll和随后的循环可能会有性能开销。在极端情况下，可以考虑使用事件委托或虚拟滚动等技术来优化用户体验，但对于本例中几十到几百个元素的情况，上述方法是完全可接受的。

更函数式的方法：对于熟悉ES6+语法的开发者，可以使用Array.from()结合reduce()方法来实现更函数式的写法，代码会更简洁：

const inputs = Array.from(document.querySelectorAll('input[data-tab]'));
const groupedData = inputs.reduce((acc, currentInput) => {
  const tabValue = currentInput.dataset.tab;
  if (!acc[tabValue]) {
    acc[tabValue] = [];
  }
  acc[tabValue].push({
    size: currentInput.dataset.size,
    color: currentInput.dataset.color,
    tab: tabValue
  });
  return acc;
}, {});
console.log(groupedData);

登录后复制

这种方式利用reduce的累加器acc来构建最终对象，逻辑更加紧凑。

总结

通过本教程，我们学习了如何利用JavaScript从HTML元素的data-*属性中提取数据，并根据特定属性值进行动态分组，最终生成一个结构化的JavaScript对象。这种技术在处理动态内容、构建筛选器、生成报告或任何需要对页面数据进行分类整理的场景中都非常实用。掌握这种数据处理模式，将有助于开发者更高效地管理和利用前端数据。

以上就是JavaScript教程：根据HTML数据属性动态分组并生成唯一数组对象的详细内容，更多请关注php中文网其它相关文章！