将对象数组减少为在所有对象共享的属性中找到的唯一字符串（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)
      );
    }, []);
};

---

编辑：由于 Nina Scholz 的评论，从相关函数中删除了不必要的 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>