将对象数组减少为在所有对象共享的属性中找到的唯一字符串（javascript）

Question

我写了一个JavaScript函数，它成功返回了HTML文档中使用的所有唯一类的数组。

const elements = document.getElementsByTagName('*'); 

let classesUsedInHtml = htmlCollection => { 
    let uniqClassSelectors = []; 
    Array.from(htmlCollection) 
    .filter(element => element.classList.length > 0) 
    .map(element => 
     element.classList.forEach(
     item => 
      uniqClassSelectors.includes(item) 
      ? null 
      : uniqClassSelectors.push(item) 
    ) 
    ); 
    return uniqClassSelectors; 
}; 

console.log(classesUsedInHtml(elements)); 

我想重构使用Array.prototype.reduce()此功能，并跳过需要定义变量uniqClassSelectors，但一直没能使其发挥作用。

这是我重构的函数不起作用（返回accumulator is undefined）。在这方面我经常被甩到reduce()。为什么accumulator未定义？ reduce()函数内我没有正确使用forEach()吗？任何人都可以在这里指出我正确的方向吗？谢谢！

let classesUsedInHtml = htmlCollection => { 
    return Array.from(htmlCollection) 
    .filter(element => element.classList.length > 0) 
    .reduce((accumulator, element) => { 
     return element.classList.forEach(
     classSelector => 
      accumulator.includes(classSelector) 
      ? accumulator 
      : accumulator.concat(classSelector) 
    ); 
    }, []); 
}; 

---

编辑：取出从有问题的功能uneccessary map()由于尼娜肖尔茨评论

Answer 1

我建议用另一种内部累加器的最后domTokenList并采取外accumulator作为启动内部累加器的值为acc2。

let classesUsedInHtml = htmlCollection => 
    Array 
     .from(htmlCollection) 
     .filter(element => element.classList.length) 
     .map(element => element.classList) 
     .reduce((accumulator, domTokenList) => 
      domTokenList.reduce((acc2, classSelector) => 
       acc2.concat(acc2.includes(classSelector) ? [] : classSelector), 
       accumulator 
      ), 
      [] 
     ); 

其他解决方案可能是使用Set收集独特的类选择器。

let classesUsedInHtml = htmlCollection => 
    [...Array 
     .from(htmlCollection) 
     .filter(element => element.classList.length) 
     .map(element => element.classList) 
     .reduce((acc1, domTokenList) => 
      domTokenList.reduce((acc2, classSelector) => acc2.add(classSelector), acc1), 
      new Set) 
    ]; 

Answer 2

本解决方案的分步指南。注释（// - >）显示了此步骤的结果，该步骤将传递到下一步。

1. 使用spread syntax转换的htmlCollection到一个数组：

   [...htmlCollection] // -> [htmlElement, htmlElement, etc...] 
   

2. Array#map每个元素的类的阵列（重传）：

   [htmlElement, htmlElement, etc...].map(({ classList }) => [...classList])) // -> [[class, class, etc...], [class, class, etc...], etc...] 
   

3. 拼合子阵列通过传播到Array#concat：

   [].concat(...[[class, class, etc...], [class, class, etc...]], etc...) // -> [class, class, class, etc...] 
   

4. 数组转换为Set，并波及回一个数组，以获得独特的类名：

   [...new Set([class, class, class, etc...])] // -> [class1, class2, class3, etc...] 
   

const elements = document.getElementsByTagName('*'); 
 

 
const classesUsedInHtml = (htmlCollection) => 
 
    [...new Set(// get unique items and convert to array 
 
     [].concat(... // concat all classes' arrays 
 
     [...htmlCollection] // convert the collection to an array 
 
     .map(({ classList }) => [...classList])) // get arrays of classes 
 
    ) 
 
    ]; 
 
    
 
const result = classesUsedInHtml(elements); 
 

 
console.log(result);

<div class="a c"> 
 
    <span class="a b"></span> 
 
    <span class="b c"></span> 
 
</div>