javascript - 干燥 htmlCollection 到 Array 调用

Question

我有一个函数当前正在 JavaScript 中使用 .getElementBy... DOM 调用。

var $ = function (selector) {
  var elements = [];

  var lastSelector  = selector.substring(selector.search(/[^#.]+$/), selector.length);

  if(selector.includes('#') !== true || selector.includes('.') !== true) {
    elements.push(document.getElementsByTagName(lastSelector));
    elements = Array.prototype.slice.call(elements[0]);
  }

return elements;
};

函数中还有许多其他 if 语句使用代码:

elements.push(document.getElementsByTagName(lastSelector));
elements = Array.prototype.slice.call(elements[0]);

或

elements.push(document.getElementsByClassName(lastSelector));
elements = Array.prototype.slice.call(elements[0]);

理想情况下，我想干燥重复的内容:

elements = Array.prototype.slice.call(elements[0]);

但我无法在 if 语句之前定义它，因为元素尚未填充。因此，它尝试在空数组上运行代码并出现错误。

有什么建议吗？

Answer 1

您可以只使用标准 querySelectorAll() ，而不是使用自制的有限函数来通过选择器选择元素。适用于所有浏览器，包括 IE8+。

至于将类似数组的对象(例如 DOM 集合)转换为真正的 Array (什么是 Array.prototype.slice.call() )用于您的代码中)，我使用以下函数:

var arrayFrom = function(arrayLike) {
    if (Array.from) {
        return Array.from(arrayLike);
    }

    var items;

    try {
        items = Array.prototype.slice.call(arrayLike, 0);
    }
    catch(e) {
        items = [];

        var count = arrayLike.length;

        for (var i = 0; i < count; i++) {
            items.push(arrayLike[i]);
        }
    }

    return items;
};

或其以下简化版本，如果浏览器不支持将非Array参数传递给Array.prototype.slice.call()(IE8-如果我没记错的话)没关系:

var arrayFrom = function(arrayLike) {
    return Array.from
         ? Array.from(arrayLike);
         : Array.prototype.slice.call(arrayLike, 0);
};