将可iterable元素或不可iterable元素展开到数组中，而不检查元素。长

Question

给定html

<div></div>
<div></div>

调用文档。querySelector（“div”）返回第一个div元素，其中。长度不是返回值的属性。

调用document.querySseltorAll（）返回一个具有. long属性的NodeList。

的两个返回值之间的差异。querySelector（）和。querySelectorAll（）是前者不是iterable；当试图使用扩展元素将元素扩展到数组中时，将抛出错误。

在下面的示例中，考虑div或div是在函数调用的主体中接收的参数。因此，就收集而言，不可能确定变量是否被定义为Element.query选择器（），Element.query选择器所有（），document.query#############################################################################################################################################################

var div = document.querySelector("div");
for (let el of div) {
  console.log(".querySelector():", el)
}

<div></div>
<div></div>

日志

Uncaught TypeError: div[Symbol.iterator] is not a function

虽然

var div = document.querySelectorAll("div");
for (let el of div) {
  console.log(".querySelectorAll():", el)
}

<div></div>
<div></div>

返回预期结果；即，文档。querySelectorAll（“div”）被扩展以填充可编辑数组。

我们可以通过将div设置为数组的元素来获得预期的结果。

[div]

位于..的。。属于iterable参数。

最接近使用相同的模式，或者. querySseltor（）或. querySseltorAll（）使用的回调rray.from（）和. tagName变量，和扩展名元素。虽然这省略了其他可能用. querySelector（）调用的选择器，例如. querySelector（"div.abc"）。

var div = document.querySelector("div");
var divs = document.querySelectorAll("div");
var elems = Array.from({length:div.length || 1}, function(_, i) {
  return [...div.parentElement.querySelectorAll(
    (div.tagName || div[0].tagName))
         ][i]
});

for (let el of elems) {
  console.log(".querySelector():", el)
}

elems = Array.from({length:divs.length || 1}, function(_, i) {
  return [...divs[0].parentElement.querySelectorAll(
    (divs.tagName || divs[0].tagName))
         ][i]
});

for (let el of elems) {
  console.log("querySelectorAll:", el)
}

<div></div>
<div></div>

由于其他原因，这不能提供足够的准确性<代码>元素。querySelector（）原本可以传递给函数，而不是文档。querySelector（），与类似。querySelectorAll（）。不确定是否可以检索传递给的确切选择器。querySelector，全部`而不修改本机函数？

所需的模式将接受该变量，如果，则将iterable的内容扩展到一个数组中。使用querySelectorAll（）；这将处理。getElementsByTagName（），。GetElementsByCassName（），。getElementsByTagName（），。getElementsByName（）相同；或者设置返回的单个值。querySelector（）作为数组的元素。

注意，当前的工作解决方案是

div.length ? div : [div]

它迭代div，如果div有一个。长度属性，可能是一个可迭代的，尽管只是有一个。长度属性，而不是一个可迭代的；否则将div设置为数组的单个元素，可迭代。

var div = document.querySelector("div");
var divs = document.querySelectorAll("div");
var elems = div.length ? div : [div];

for (let el of elems) {
  console.log(".querySelector():", el)
}

var elems = divs.length ? divs : [divs];

for (let el of elems) {
  console.log("querySelectorAll:", el)
}

<div></div>
<div></div>

这能实现吗

• 而不检查变量的. long？
• 没有在同一行上引用元素三次？

工作解决方案的方法是否可行

• 需要改进；也就是说，应该检查div的[Symbol.iterator]而不是。
• 是否有使用的魔法。传播元素或rest元素，这可能允许省略检查对象的。长度？
• 会使用Generator，Array.prototype.reduce（）或其他方法来改变之前检查变量的属性的需要吗？将元素扩展为数组？

或者，鉴于对象之间的区别，上面的方法是最简单的吗？




Answer 1

我或多或少会做Array。from执行，但检查长度的类型，而不是始终转换它：

const itemsOrSingle = items => {
    const iteratorFn = items[Symbol.iterator]

    if (iteratorFn) {
        return Array.from(iteratorFn.call(items))
    }

    const length = items.length

    if (typeof length !== 'number') {
        return [items]
    }

    const result = []

    for (let i = 0; i < length; i++) {
        result.push(items[i])
    }

    return result
}