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

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

var uniqueCategoryGroupNames = document.querySelectorAll('li[data-group]');
var res = [];
for (var k = 0; k < uniqueCategoryGroupNames.length; k++) {
var attr = uniqueCategoryGroupNames[k].getAttribute('data-group');
  //check that the attribute do not exist in the array
  if(res.indexOf(attr) === -1) {
    res.push(attr);
  }
}
console.log(res);

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

Answer 2

您可以结合使用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>

Answer 3

最好的方法是使用新的Set对象（仅存储唯一值）或使用旧的普通对象。您也可以使用dataset if you support browsers IE11+（否则只需将dataset替换为getAttribute('data-group')）

使用Set

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)

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

3 个答案: