Javascript 从多个数据属性返回唯一值

我有以下标记：

<li data-group="bottoms">Pants</li>
<li data-group="bottoms">Pants</li>
<li data-group="bottoms">Pants</li>
<li data-group="tops">Shirt</li>
<li data-group="tops">T-shirt</li>
<li data-group="tops">Polo</li>
<li data-group="accessories">Sunglasses</li>

---

您可以声明一个数组来存储该属性，并在将属性推入数组之前检查该属性是否存在：

var uniqueCategoryGroupNames=document.querySelectorAll（'li[数据组]）；
var-res=[]；
for（var k=0；k
裤子
裤子
裤子
衬衫
T恤
Polo
太阳镜

您可以结合使用，以及：

---

演示：

let liArray=Array.from（document.querySelectorAll（'li[数据组]）；
让结果=acrray.reduce（（acc，curr）=>acc.includes（curr.getAttribute（'data-group'））？acc:acc.concat（[curr.getAttribute（'data-group'））），[]）；
控制台日志（结果）

裤子
裤子
裤子
衬衫
T恤
Polo
太阳镜
最好的方法是使用新的
设置
对象（仅存储唯一值）或使用旧的普通对象。也可以使用（否则只需将
数据集
替换为
getAttribute（'data-group'）
）

使用
设置

var lis = document.querySelectorAll('li[data-group]');
var uniqueGroupsSet = Array.from(lis).reduce((all, li) => all.add(li.dataset.group), new Set());
var uniqueGroupNames = Array.from(uniqueGroupsSet);

使用普通对象

var lis = document.querySelectorAll('li[data-group]');
var uniqueGroupsSet = Array.from(lis).reduce((all, li) => {
  all[li.dataset.group] = true
  return all
}, {});
var uniqueGroupNames = Object.keys(uniqueGroupsSet);

组合方式：普通对象+数组

var lis = document.querySelectorAll('li[data-group]');
var uniqueGroupNames = []
Array.from(lis).reduce((all, li) => {
  if (!all[li.dataset.group]) {
    all[li.dataset.group] = true
    uniqueGroupNames.push(li.dataset.group)
  }
  return all
}, {});
console.log(uniqueGroupNames)

@Sun yes这比使用OP已接受的
reduce
和
filter
要好得多
var lis = document.querySelectorAll('li[data-group]');
var uniqueGroupsSet = Array.from(lis).reduce((all, li) => {
  all[li.dataset.group] = true
  return all
}, {});
var uniqueGroupNames = Object.keys(uniqueGroupsSet);

var lis = document.querySelectorAll('li[data-group]');
var uniqueGroupNames = []
Array.from(lis).reduce((all, li) => {
  if (!all[li.dataset.group]) {
    all[li.dataset.group] = true
    uniqueGroupNames.push(li.dataset.group)
  }
  return all
}, {});
console.log(uniqueGroupNames)