Question

当我在NodeList上使用扩展运算符时：

[...document.querySelectorAll("div")]

这样做：

Answer 1

您返回的NodeList是可迭代的（在现代环境中），因此效果

[...document.querySelectorAll("div")]

与从普通数组中展开的效果相同。实际上是在做与

相同的事情

Array.from(document.querySelectorAll("div"))

因此，是的，将创建一个新数组，然后将查询的元素迭代地复制到新数组中。不需要从NodeList构建中间数组，因为它已经可以迭代了。您最终会得到一个纯数组。

（具有扩展语法的任何数组初始值设定项都会创建一个新数组，就像任何传统的数组初始值设定项使用一样；这就是重点。）

请注意，严格来讲...不是运算符；它不是表达式语法的一部分。（就是这样，因为您可以将数组初始化程序和对象初始化程序语法视为整体表达式语法的一部分，但它仍然不是运算符。）但是无法将其称为运算符很笨拙，因此我我个人很同情。

Answer 2

点差运算符允许您做不同的事情（CHECK HERE）。

在您的情况下，您将使用document.querySelectorAll("div")

中的所有元素创建一个新数组

const arr = [...document.querySelectorAll("div")];

    console.log(arr.length);
    console.log(typeof(arr));

<div>
  <p>first div</p>
  <div>
    <p>second nested div</p>
  </div>
</div>

Answer 3

spread运算符不会将数据转换为数组。它正在查看您赋予它的可迭代对象的可枚举属性。

然后将它们复制到您告诉它的位置：

在一个数组中：[...obj]

在对象中：{...obj}

自变量：func(...obj)

const set = new Set();

set.add('a');
set.add('b');

console.log(typeof set);

console.log(...set);
console.log(...['a', 'b']);