如何用JavaScript基于data-tab生成独立的唯一数组？

当然可以实现，以下是基于JavaScript的具体解决方案：

1. 获取目标元素 #

先选中所有带data-tab属性的隐藏input：

const hiddenInputs = document.querySelectorAll('input[hidden][data-tab]');

2. 初始化分组容器 #

创建一个空对象，用来存储按data-tab分组后的结果：

const groupedItems = {};

3. 遍历元素完成分组 #

循环每个input，提取其data属性值，按data-tab归类：

hiddenInputs.forEach(input => {
  const tab = input.dataset.tab;
  const size = input.dataset.size;
  const color = input.dataset.color;
  
  // 若当前tab分组未初始化，先创建空数组
  if (!groupedItems[tab]) {
    groupedItems[tab] = [];
  }
  
  // 将当前元素的属性数据加入对应分组
  groupedItems[tab].push({ size, color });
});

最终结果示例 #

执行完上述代码后，groupedItems的结构如下：

{
  "Gardenbox Professional": [
    { size: "120x40", color: "Brown" },
    { size: "120x40", color: "Red" }
  ],
  "Gardenbox ECO": [
    { size: "160x40", color: "Brown" },
    { size: "160x40", color: "Red" }
  ]
}

可选：分组去重 #

如果需要每个分组内的条目唯一（避免重复的size+color组合），可以修改遍历逻辑：

hiddenInputs.forEach(input => {
  const tab = input.dataset.tab;
  const size = input.dataset.size;
  const color = input.dataset.color;
  
  if (!groupedItems[tab]) {
    groupedItems[tab] = [];
  }
  
  // 检查当前分组是否已有相同size和color的条目
  const isDuplicate = groupedItems[tab].some(item => 
    item.size === size && item.color === color
  );
  
  if (!isDuplicate) {
    groupedItems[tab].push({ size, color });
  }
});

内容的提问来源于stack exchange，提问作者PaleManRiga