Объяснение [].ломтик.позвонить в javascript?

я наткнулся на этот аккуратный ярлык для преобразования NodeList DOM в обычный массив, но я должен признать, что не совсем понимаю, как это работает:

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

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

немного не понимаю, это call. Как это преобразовать document.querySelectorAll('a') от NodeList к регулярному массиву?

7 ответов


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

EDIT:

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

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


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

object1 = {
    name:'frank',
    greet:function(){
        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 возвращает другой массив, как это результат.


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


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

некоторые из этих объектов входят:

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

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

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

и ради полноты, есть также С помощью jQuery.makeArray().


как преобразовать document.querySelectorAll('a') из 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) и со списком аргументов. Я. e] аргумент start, которая содержит 0

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

  • start будет присвоено переменной s as 0
  • С end is undefined, this.length будет храниться в e
  • пустой массив будет храниться в переменной a
  • после выполнения вышеуказанных настроек произойдет следующая итерация

    while(s < e) {
      a.push(this[s]);
      s++;
    }
    
  • заполненный массив a будет возвращен в результате.

P. S для лучшего понимания нашего сценария некоторые шаги, необходимые для нашего контекста, были проигнорированы из исходного алгоритма вызов и фрагмент.


[].slice.call(document.querySelectorAll('.slide'));

1. The querySelectorAll() method returns all elements in the document that matches a specified selector(s). 

2. The call() method calls a function with a given this value and arguments provided individually.

3. The slice() method returns the selected elements in an array, as a new array object.

  so this line return the array of [object HTMLDivElement]. Here is the six div with classname "slide" so array length will be 6.

<div class="slideshow">

  <div class="slide">
    first slider1
  </div>
  <div class="slide">
    first slider2
  </div>
  <div class="slide">
    first slider3
  </div>
  <div class="slide">
    first slider4
  </div>
  <div class="slide">
    first slider5
  </div>
  <div class="slide">
    first slider6
  </div>

</div>

<script type="text/javascript">

  var arraylist = [].slice.call(document.querySelectorAll('.slide'));

  alert(arraylist);

</script>

от ES6: просто сделайте массив с массив.из элементов.дети) или массив.из({длина: 5})