javascript - 我如何使用扩展器和收集运算符在 ES6 中实现以下功能？

Question

我正在检查选择器是否具有特定的类、ID 或两者。如果 id、class 或两者匹配，eitherClassIdOrBoth() 会将选择器推送到 elements 数组中。它工作得很好，但我想知道我是否可以使用 spread operator 在 ES6 中实现这一点。

这是返回 bool 值的地方:

var idAndClassMatch = function(matchId, matchClass, matchBoth) {
return (
(matchBoth && matchId && matchClass) || (!matchBoth && (matchId || matchClass))); }

这是我想在其中使用扩展运算符的函数:

var elements = []

function eitherClassIdOrBoth(
   selectId, selectClass, array, matchBoth, elements
) 
{

   for (let i = 0; i < array.length; i++) {
      var classSection = array[i].className.split(" ");
      var matchId = selectId !== undefined && array[i].id === selectId;
      var matchClass = classSection !== undefined && 
          classSection.indexOf(selectClass) !== -1;

      if (idAndClassMatch(matchId, matchClass, matchBoth)) {
          elements.push(array[i]); 
      }
   }
}

我从 if 语句传递这些值:

if (arr.length === 2) {
    computedFunction.eitherClassIdOrBoth(
        selectId, selectClass, tags, false, Allelements
    );
}

任何帮助都会非常有帮助!

Answer 1

有更好的方法来编写此逻辑，但要点可能不是 ES6 特定的。

最让我惊讶的是整个函数的主查询可以替换为对 Element#matches 的调用它根据 CSS 选择器检查元素。它在较旧的浏览器上并不一致可用，但加载一个填充以确保它可用是微不足道的。然后你的整个

computedFunction.eitherClassIdOrBoth(
    selectId, selectClass, tags, false, Allelements
);

调用只是

Allelements.push(
  ...tags.filter(tag => tag.matches(`.${selectClass}, [id="${selectId}"]`)
);

例如使用.filter和.matches创建一个仅包含给定 tags 的项目的新数组数组，然后使用 ES6 spread 轻松将所有项目插入 Allelements数组。

您似乎有一些情况 selectClass或selectId可能是undefined ，因此您也可以构建该查询，例如

const selector = [
  selectClass ? `.${selectClass}` : "",
  selectId ? `[id="${selectId}"]` : "",
].filter(Boolean).join(",");
Allelements.push(
  ...tags.filter(tag => selector ? tag.matches(selector) : false
);

对于 matchBoth 的情况是 true ，您只需使用 "" 加入选择器而不是"," 。所以你最终会得到

function eitherClassIdOrBoth(
   selectId, selectClass, array, matchBoth, elements
) {
    const selector = [
      selectClass ? `.${selectClass}` : "",
      selectId ? `[id="${selectId}"]` : "",
    ].filter(Boolean).join(matchBoth ? "" : ",");
    if (selector) {
      elements.push(...array.filter(tag => tag.matches(selector));
    }
}

如果您想要通用实用程序。