Что делает Array.prototype.slice.call() & wrapper.querySelectorAll()?

Question

я нашел следующий конус в JS плагин

var container = document.getElementById('vs-container'), 
wrapper = container.querySelector('div.vs-wrapper'), 
sections = Array.prototype.slice.call(wrapper.querySelectorAll('section')), 
links = Array.prototype.slice.call(container.querySelectorAll('header.vs-header > ul.vs-nav > li')); 

Я не мог понять, что делает Array.prototype.slice.call() & wrapper.querySelectorAll('section') делать в коде выше. Я их раньше не видел, поэтому хотел бы знать, что они на самом деле делают.

Answer 1

querySelectorAll - метод для элементов DOM, который принимает селектор CSS и возвращает статические NodeList соответствующих элементов.

Array.prototype.slice.call - один из способов превратить этот NodeList (который действует как массив, но не имеет методов от Array.prototype) в реальном массиве.

Дайте ему попробовать эту страницу в консоле вашего браузера!

> var headers = document.querySelectorAll('h1, h2, h3, h4, h5, h6'); 
undefined 
> headers.map(function(el) { return el.textContent; }) 
TypeError: Object #<NodeList> has no method 'map' 
> headers = Array.prototype.slice.call(headers); 
… 
> headers.map(function(el) { return el.textContent; }) 
["What does Array.prototype.slice.call() & wrapper.querySelectorAll() do?", …] 

Answer 2

Он создает массив из ничего массива, как (например, что имеет length и свойства с такими именами, как 0, 1 и т.д.). Вы видите это с getElementsByTagName и такими, которые возвращают живые NodeList экземпляров. Это не обязательно с querySelectorAll, потому что это возвращает неживые списки, если, конечно, вы не хотите всех функций Array.

Это Array.prototype.slice.call(...) может показаться немного пугающим, но на самом деле это довольно просто: массивы получают свои методы от объекта Array.prototype. Одним из них является метод slice, который возвращает копию части массива. Если вы не дадите slice любые аргументы, он возвращает копию всего массива. Но сложный бит заключается в том, что когда вы вызываете slice, вам не нужно вызывать его в массиве, просто что-то похожее на массив. Когда вы используете Function#call в JavaScript, вы можете указать, что находится в вызове this. Таким образом, Array.prototype.slice.call(resultFromQuerySelectorAll) вызывает slice с this, являющимся результатом querySelectorAll; slice затем обязуется предоставить массив с этими записями.