我需要澄清一下当我使用传播运算符时会发生什么

Question

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

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

是否：

Answer 1

传播运算符允许您做不同的事情 (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 2

你得到的 NodeList 是可迭代的（在现代环境中），所以

的效果

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

与从普通数组展开相同。它实际上在做与

相同的事情

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

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

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

请注意，... 严格来说不是 运算符 ；它不是表达式语法的一部分。（好吧，因为你可以认为数组初始化器和对象初始化器语法是整个表达式语法的一部分，但它仍然不是运算符。）但是不能称它为运算符是很笨拙的，所以我我个人表示同情。

Answer 3

展开运算符不会将数据转换为数组。它正在查看您提供给它的可迭代对象的自己的和可枚举的属性。

然后它将它们复制到您指定的位置：

在数组中：[...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']);

I need some clarification on what happens when I use the spread operator