JavaScript：根据数据属性创建唯一数组集合

本教程详细介绍了如何利用 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免费学习笔记（深入）”；

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

44

查看详情

1. 获取所有目标元素： 首先，我们需要选择页面上所有符合条件的 input 元素。
2. 初始化结果容器： 创建一个空的 JavaScript 对象，用于存储最终的分组结果。
3. 遍历并分组数据： 遍历每个获取到的 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" }
  ]
}

代码解析

1. document.querySelectorAll('input'): 这行代码用于选择文档中所有 input 标签的元素，并返回一个 NodeList。
2. var groupedData = {};: 初始化一个空对象 groupedData。这个对象将是最终结果的容器，它的键将是 data-tab 的唯一值，而值将是包含相应数据项的数组。
3. for (var i = 0; i < inputs.length; i++) { ... }: 这是一个标准的 for 循环，用于遍历 inputs NodeList 中的每一个元素。
4. var tabValue = inputs[i].getAttribute('data-tab');: 在每次循环中，获取当前 input 元素的 data-tab 属性值。
5. if (!groupedData.hasOwnProperty(tabValue)) { groupedData[tabValue] = []; }: 这是一个关键的逻辑判断。它检查 groupedData 对象是否已经拥有一个以当前 tabValue 为键的属性。如果 hasOwnProperty 返回 false（表示不存在该键），则说明这是一个新的 data-tab 分组，因此会为它创建一个新的空数组。
6. var subObject = {}; ...: 创建一个临时的 subObject，用于存储当前 input 元素的所有相关数据属性。这里我们提取了 data-size、data-color 和 data-tab。
7. 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 对象中。这种模式在处理和组织前端数据时非常实用，能够帮助开发者高效地管理和利用页面上的结构化信息，为后续的数据展示、过滤和交互奠定基础。掌握这种数据分组技术，能够显著提升前端数据处理的灵活性和代码的可维护性。

以上就是JavaScript：根据数据属性创建唯一数组集合的详细内容，更多请关注php中文网其它相关文章！