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

#javascript #arrays #ecmascript-6 #operators #unpack

#javascript #массивы #ecmascript-6 #операторы #распаковывать #распаковать

Вопрос:

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

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

Это:

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

1. Оператор распространения создает одноуровневую глубокую копию текущего итерируемого объекта. На это есть некоторые ограничения. Смотрите developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Он присваивает выходные данные новой памяти, на которую вы можете указать переменную. Он хорошо сочетается с отображением / уменьшением / сортировкой, поскольку не изменяет исходный объект.

Ответ №1:

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

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

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

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

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

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

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

Ответ №2:

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

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

Ответ №3:

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

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

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

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

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

Настоящее отличное руководство здесь о spread operator : 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']);