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

Question

我有以下标记:

<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>

我试图返回一个唯一的 data-group 名称列表，但我只想返回一次。这意味着从上面的列表中我想返回一个包含以下内容的变量:

• 下装
• 上衣
• 配饰

我的方法是首先找到列表的长度，然后创建一个 for 循环，遍历所有元素并打印它们的 data-group 值。之后，我将不得不进行一些排序，以使底部和顶部不会出现 3 次，而只会出现一次。

我尝试编写如下所示的初始代码。

var uniqueCategoryGroupNames = document.querySelectorAll('li[data-group]');

for (var k = 0; k < uniqueCategoryGroupNames.length; k++) {
    console.log([k]);
    uniqueCategoryGroupNames[k].getAttribute('data-group');
}

Answer 1

您可以使用 Array#from 的组合, Array#reduce和 Array#includes :

liArray.reduce(                                       //Go through your Array
  (acc, curr) => 
    acc.includes(curr.getAttribute('data-group')) ?   // Is the current value already stored?
      acc                                             // Then don't add the current value
      : acc.concat([curr.getAttribute('data-group')]) // Else add the value
  , []                                                // Starting value for the accumulator
);

---

演示:

let liArray = Array.from(document.querySelectorAll('li[data-group]'));

let result = liArray.reduce((acc, curr) => acc.includes(curr.getAttribute('data-group')) ? acc : acc.concat([curr.getAttribute('data-group')]), []);

console.log(result);

<ul>
  <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>
</ul>