Объяснение [] .slice.call в javascript?

Здесь происходит то, что вы вызываете slice(), как если бы это была функция NodeList с использованием call(). В этом случае slice() создает пустой массив, затем выполняет итерацию по объекту, на котором он работает (первоначально массив, теперь NodeList), и продолжает добавлять элементы этого объекта в созданный им пустой массив, который в конечном итоге возвращается. Вот статья об этом.

РЕДАКТИРОВАТЬ:

Итак, он начинается с пустого массива [], затем срез используется для преобразования результата вызова в новый массив, да?

Это не правильно. [].slice возвращает объект функции. Функциональный объект имеет функцию call(), которая вызывает функцию, присваивающую первому параметру call() this; другими словами, заставить функцию думать, что она вызывается из параметра (NodeList, возвращаемого document.querySelectorAll('a')), а не из массива.

В JavaScript методы объекта могут быть привязаны к другому объекту во время выполнения. Короче говоря, javascript позволяет объекту «заимствовать» метод другого объекта:

object1 = {
    name: 'Frank',
    greet() {
        alert(`Hello ${this.name}`);
    }
};

object2 = {
    name: 'Andy'
};

// Note that object2 has no greet method,
// but we may "borrow" from object1:

object1.greet.call(object2); // Will show an alert with 'Hello Andy'

call и apply методы объектов функций (в JavaScript функции также являются объектами) позволяют вам это делать. Итак, в вашем коде вы можете сказать, что NodeList заимствует метод среза массива. .slice() в качестве результата возвращает другой массив, который становится «преобразованным» массивом, который вы затем можете использовать.

Он извлекает функцию slice из Array. Затем он вызывает эту функцию, но использует результат document.querySelectorAll как объект this вместо фактического массива.

Это метод преобразования объектов, подобных массиву, в реальные массивы.

Некоторые из этих объектов включают:

• arguments в функциях
• NodeList (помните, что их содержимое может измениться после получения! поэтому преобразование их в массив - это способ их заморозить)
• Коллекции jQuery, также известные как объекты jQuery (некоторый документ: API, type, учиться)

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

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

И для полноты картины существует также jQuery.makeArray ().

Как это преобразовать document.querySelectorAll('a') из NodeList в обычный массив?

Это код, который у нас есть,

[].slice.call(document.querySelectorAll('a'), 0)

Давайте сначала его разберем,

  []    // Array object
.slice // Accessing the function 'slice' present in the prototype of Array
.call // Accessing the function 'call' present in the prototype of function object(slice)
(document.querySelectorAll('a'),0) 
    // 'call' can have arguments like, (thisArg, arg1,arg2...n). 
   // So here we are passing the 'thisArg' as an array like object,
  // that is a 'nodeList'. It will be served as 'this' object inside of slice function.
 // And finally setting 'start' argument of slice as '0' and leaving the 'end' 
// argument as 'undefined'

Шаг: 1 Выполнение функции call

• Внутри call, кроме thisArg, остальные аргументы будут добавлены к списку аргументов.
• Теперь функция slice будет вызываться путем привязки ее значения this как thisArg (массив, подобный объекту, поступил из document.querySelector) и со списком аргументов. т.е.] аргумент start, содержащий 0

Шаг: 2 Выполнение slice функции, вызванной внутри call

• start будет присвоено переменной s как 0
• поскольку end равно undefined, this.length будет храниться в e
• пустой массив будет сохранен в переменной a

• После выполнения вышеуказанных настроек произойдет следующая итерация.

  while(s < e) {
    a.push(this[s]);
    s++;
  }
  

• в результате будет возвращен заполненный массив a.

PS Для лучшего понимания нашего сценария некоторые шаги, необходимые для нашего контекста, были проигнорированы в исходном алгоритме call и нарезать.

Из ES6: просто создайте массив с помощью Array.from (element.children) или Array.from ({length: 5})

Это тоже может помочь.

метод нарезки

Описание:

Метод slice () возвращает неглубокую копию части массива в новый объект массива, выбранный от начала до конца (конец не включен), где начало и конец представляют собой индекс элементов в этом массиве. Исходный массив не будет изменен. см. больше: Reference / Global_Objects / Array / slice

метод вызова

Описание:

Вызов () позволяет назначать функцию / метод, принадлежащую одному объекту, и вызывать их для другого объекта.

Метод call () вызывает функцию с данным значением this и аргументами, предоставленными индивидуально. call () предоставляет новое значение this функции / методу. С call () вы можете написать метод один раз, а затем унаследовать его от другого объекта, без необходимости переписывать метод для нового объекта.

см. больше: Reference / Global_Objects / Function / call