Мне нужно уточнить, что происходит, когда я использую оператор распространения - PullRequest
Новая
       20

Мне нужно уточнить, что происходит, когда я использую оператор распространения

3 голосов
/ 24 апреля 2019

Когда я использую оператор распространения на NodeList: 

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

Делает ли это:

  1. Создать новый массив
  2. Преобразовать document.querySelectorAll("div")в массив
  3. Распаковать значения document.querySelectorAll("div") в литерал массива ([])

Ответы [ 3 ]

2 голосов
/ 24 апреля 2019

Возвращаемый NodeList является итеративным (в современных средах), поэтому эффект 

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

такой же, как и при распространении из простого массива.Он фактически делает то же самое, что и 

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

Так что да, создается новый массив, затем элементы запроса итеративно копируются в новый массив.Не нужно создавать промежуточный массив из NodeList, потому что он уже повторяется.В итоге получается простой массив.

( Любой инициализатор массива с синтаксисом распространения создает новый массив, как любое традиционное использование инициализаторов массива; в этом вся суть.)

Обратите внимание, что ..., строго говоря, не является оператором ;это не часть синтаксиса выражения.(Ну, это так, потому что вы можете считать синтаксис инициализатора массива и инициализатора объекта частью общего синтаксиса выражения, но он по-прежнему не является оператором.) Однако неуместно не иметь возможности называть его оператором, поэтому яЯ лично сочувствую.

1 голос
/ 24 апреля 2019

Оператор распространения не преобразует данные в массив.Он просматривает собственных и перечисляемых свойств итерируемого объекта, который вы ему даете.

Затем он копирует их туда, куда вы указываете:

в массиве: [...obj]

в объекте: {...obj}

в аргументах: func(...obj)

Отличное руководство по оператору спреда: https://dmitripavlutin.com/object-rest-spread-properties-javascript/

const set = new Set();

set.add('a');
set.add('b');

console.log(typeof set);

console.log(...set);
console.log(...['a', 'b']);
1 голос
/ 24 апреля 2019

Оператор распространения позволяет вам делать разные вещи ( ПРОВЕРИТЬ ЗДЕСЬ ).

В вашем случае вы создаете новый массив со всеми элементами из 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>
...