Spiegazione di [] .slice.call in javascript?

Mi sono imbattuto in questa scorciatoia per convertire un Elenco nodi DOM in un array normale, ma devo ammettere che non capisco completamente come funziona:

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

Quindi inizia con un array vuoto [], quindi sliceviene utilizzato per convertire il risultato callin un nuovo array, vero?

Il po 'che non capisco è il call. Come viene convertito document.querySelectorAll('a')da un NodeList a un array normale?

Quello che sta succedendo qui è che chiami slice()come se fosse una funzione NodeListdell'uso call(). Ciò che slice()fa in questo caso è creare un array vuoto, quindi scorrere attraverso l'oggetto su cui è in esecuzione (originariamente un array, ora a NodeList) e continuare ad aggiungere gli elementi di tale oggetto all'array vuoto che ha creato, che alla fine viene restituito. Ecco un articolo su questo .

MODIFICARE:

Quindi inizia con un array vuoto [], quindi lo slice viene utilizzato per convertire il risultato della chiamata in un nuovo array, vero?

Non è giusto. [].slicerestituisce un oggetto funzione. Un oggetto funzione ha una funzione call()che chiama la funzione assegnando il primo parametro di call()a this; in altre parole, facendo pensare alla funzione che viene chiamata dal parametro ( NodeListrestituito da document.querySelectorAll('a')) piuttosto che da un array.

In JavaScript, i metodi di un oggetto possono essere associati a un altro oggetto in fase di esecuzione. In breve, JavaScript consente a un oggetto di "prendere in prestito" il metodo di un altro oggetto:

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'

I metodi calle applydegli oggetti funzione (in JavaScript, anche le funzioni sono oggetti) ti permettono di farlo. Quindi, nel tuo codice potresti dire che il NodeList sta prendendo in prestito il metodo slice di un array. .slice()restituisce un altro array come risultato, che diventerà l'array "convertito" che sarà quindi possibile utilizzare.

Recupera la slicefunzione da un Array. Quindi chiama quella funzione, ma utilizzando il risultato di document.querySelectorAllcome thisoggetto anziché un array reale.

È una tecnica per convertire oggetti simili a array in array reali.

Alcuni di questi oggetti includono:

• arguments nelle funzioni
• NodeList (ricorda che il loro contenuto può cambiare dopo essere stato recuperato! Quindi convertirli in array è un modo per congelarli)
• Collezioni jQuery, alias oggetti jQuery (alcuni documenti: API , tipo , apprendimento )

Questo serve a molti scopi, ad esempio gli oggetti vengono passati per riferimento mentre gli array vengono passati per valore.

Inoltre, nota che il primo argomento 0può essere omesso, spiegazione approfondita qui .

E per completezza, c'è anche jQuery.makeArray () .

Come si converte document.querySelectorAll('a')da un NodeList array normale?

Questo è il codice che abbiamo,

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

Lascialo prima smantellare,

  []    // 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'

Step: 1 Esecuzione della callfunzione

• All'interno call, oltre a thisArg, il resto degli argomenti verrà aggiunto a un elenco di argomenti.
• Ora la funzione sliceverrà invocata legando il suo thisvalore come thisArg(oggetto come array come document.querySelector) e con l'elenco degli argomenti. cioè] argomento startche contiene0

Passaggio: 2 Esecuzione della slicefunzione richiamata all'interno dicall

• startverrà assegnato a una variabile scome0
• poiché endè undefined, this.lengthsarà memorizzato ine
• un array vuoto verrà archiviato in una variabile a

• Dopo aver effettuato le impostazioni di cui sopra, si verificherà la seguente iterazione

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

• l'array riempito averrà restituito come risultato.

PS Per una migliore comprensione del nostro scenario alcuni passaggi necessari per il nostro contesto sono stati ignorati dall'algoritmo originale di call e slice .

[].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>

Da ES6: crea semplicemente un array con Array.from (element.children) o Array.from ({lunghezza: 5})