Erklärung von [] .slice.call in Javascript?

Question

Ich stolperte auf diese ordentlich Abkürzung für ein DOM NodeList in einer regelmäßigen Anordnung Umwandlung, aber ich muss zugeben, ich verstehe nicht ganz, wie es funktioniert:

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

So ist es mit einem leeren Array [] beginnt, dann slice verwendet wird, um das Ergebnis der call in ein neues Array zu konvertieren ja?

Das Bit Ich verstehe nicht, ist die call. Wie funktioniert das convert document.querySelectorAll('a') von einem NodeList zu einer regelmäßigen Anordnung?

Answer 1

Was hier passiert, ist, dass Sie slice() nennen, als ob es sich um eine Funktion von NodeList war mit call(). Was slice() tut in diesem Fall ist ein leeres Array erstellen, dann Iterierte durch das Objekt es läuft auf (ursprünglich ein Array, jetzt ein NodeList) und halten Sie die Elemente dieses Objekts in das leere Array anhängt es erstellt, die schließlich zurückgeführt wird. Hier ist ein Artikel zu diesem .

EDIT:

  

So ist es mit einem leeren Array beginnt [], dann wird in Scheiben schneiden verwendet   konvertieren das Ergebnis der Anruf in ein neues Array ja?

Das ist nicht richtig. [].slice liefert ein Funktionsobjekt. Ein Funktionsobjekt hat eine Funktion, die die Funktion call() Zuweisen des ersten Parameters des call() zu this aufruft; in anderen Worten, denkt die Funktion zu machen, dass es aus dem Parameter (die NodeList zurück von document.querySelectorAll('a')) genannt wird, und nicht von einem Array.

Answer 2

In Javascript, Methoden eines Objekts auf ein anderes Objekt zur Laufzeit gebunden. Kurz gesagt, Javascript erlaubt, ein Objekt zu „borgen“, um die Methode eines anderen Objekts:

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'

Die call und apply Methoden der Funktionsobjekte (in JavaScript-Funktionen Objekte sind auch) ermöglicht es Ihnen, dies zu tun. Also in Ihrem Code könnte man sagen, dass der Nodelist ein Arrays Scheibe Methode leiht. Was bedeutet die Umwandlung ist die Tatsache, dass Scheibe ein weiteres Array, wie es das Ergebnis zurück.

Answer 3

Es ruft die slice Funktion von einem Array. Er ruft dann diese Funktion, aber mit dem Ergebnis der document.querySelectorAll als this Objekt anstelle eines tatsächlichen Array.

Answer 4

Es ist eine Technik zu konvertieren Array-ähnliche Objekte in realen Arrays.

Einige dieser Objekte sind:

• arguments in Funktionen
• NodeList (dessen Inhalt erinnern kann nach ändern geholt zu sein! So sie Array Umwandlung ist ein Weg, um sie einzufrieren)
• jQuery Sammlungen, auch bekannt als jQuery-Objekte (einige doc: API , Typ , lernen )

Dies dient vielen Zwecken, zum Beispiel Objekte als Referenz übergeben werden, während Arrays von Wert übergeben werden.

Beachten Sie auch, das erste Argument 0 omited werden kann, ausführliche Erläuterung hier .

Und der Vollständigkeit halber gibt es auch jQuery.makeArray () .

Answer 5

  

Wie funktioniert die convert document.querySelectorAll('a') von a   NodeList zu einer regelmäßigen Anordnung?

Dies ist der Code, dass wir,

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

Damit kann zerlegen ersten,

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

Schritt: 1 Ausführung von call Funktion

• Innerhalb call, andere als die thisArg, der Rest der Argumente wird zu einer Argumentliste angehängt werden.
• Nun wird die Funktion slice durch Bindung seines this Wertes aufgerufen werden thisArg (array ähnliches Objekt stammte aus document.querySelector) und mit der Argumentliste. d.h] Argument start die 0
enthält

Schritt 2 Ausführung von slice Funktion aufgerufen innerhalb von call

• start wird auf eine Variable s als 0 zugewiesen werden
• seit end undefined ist, wird this.length in e gespeichert werden
• ein leeres Array wird in einer Variablen a gespeichert werden

• Nachdem Sie die obigen Einstellungen vorgenommen folgenden wird Iteration geschehen sein

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

• die gefüllt Array a wird als Ergebnis zurückgegeben werden.

---

PS Zum besseren Verständnis unseres Szenarios einige Schritte, die für unseren Zusammenhang notwendig sind, wurde aus dem ursprünglichen Algorithmus von Anruf und Scheibe .

Answer 6

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

Answer 7

Von ES6: Einfach machen Array mit Array.from (element.children) oder Array.from ({Länge: 5})