Tiefgreifendes Verständnis des Javascript-Klassenarrays

js-Arrays sind wahrscheinlich jedem bekannt, da sie überall verwendet werden, aber sie haben einen „Zwillingsbruder“ namens Klassenarray (auch Pseudoarray genannt). Manche Leute kennen es vielleicht, andere nicht. Schauen wir es uns heute einmal an.

Was ist ein Array-ähnliches

Wie der Name schon sagt, muss dieses Ding etwas sein, das wie ein Array aussieht, aber kein Array ist. Was ist es also? Eigentlich ist es ein Objekt, ein Objekt, das wie ein Array aussieht.

Der Unterschied zum Array

Was ist der Unterschied zwischen einem Klassenarray und einem Array:
1. Alle haben Längenattribute
2. Klassenarrays können auch mit for-Schleifen durchlaufen werden, und einige Klassenarrays können auch mit for of durchlaufen werden.
3. Klassenarrays haben keine Array-Prototypmethoden, daher können Klassenarrays keine verwandten Arraymethoden (wie Push, Slice, Concat usw.) aufrufen.

Welche Array-Typen gibt es?

Gängige Klassenarrays sind

• Funktionsargumente
• DOM-Liste (auch HTMLCollection genannt), erhalten durch getElementsByTagName, getElementsByClassName, getElementsByName usw.
• NodeList - Knotenliste, die durch die Methode querySelectorAll() abgerufen wurde
  

Als nächstes schauen wir uns diese drei Array-Typen an.

Argumente

Argumente sind ein Schlüsselwort in JavaScript. Bezieht sich speziell auf den Parametersatz einer Funktion, der alle Parameter und anderen Eigenschaften der Funktion umfasst. Es muss nicht definiert werden und kann direkt im Funktionskörper verwendet werden

Funktion args(a, b, c) {
	console.log(Argumente)
	console.log(Typ der Argumente)
	Konsole.log({}.toString.call(Argumente))
}

args('a', 'b', 'c')

Schauen wir uns die Ausgabe an

Es ist ersichtlich, dass Argumente alle Parameter enthalten und ein Längenattribut haben. Es ist auch ersichtlich, dass sein Typ Objekt ist und nach der Konvertierung in eine Zeichenfolge das Objekt Argumente ist, das das Arguments-Objekt darstellt. Gleichzeitig können Sie sehen, dass es auch ein Attribut „Caller“ hat, und der Wert dieses Attributs scheint der von uns definierte Funktionskörper zu sein. Lassen Sie uns ihn also ausgeben und sehen

Funktion args(a, b, c) {
	console.log(Argumente.Angerufener)
}

args('a', 'b', 'c')

Wie Sie sehen, ist die Ausgabe tatsächlich unsere Funktion selbst. Da es sich selbst darstellt, rufen Sie diese Eigenschaft bitte nicht leichtfertig auf, denn wenn es einmal aufgerufen wurde, ruft es sich selbst immer wieder auf und gerät in eine Endlosschleife, bis der Stapel überläuft. So was

Funktionsargumente (a, b, c) {
 konsole.log(123)
 argumente.callee()
}

args('a', 'b', 'c')

DOM-Liste (HTMLCollection)

Diese Kategorie bezieht sich auf die Sammlung von DOM-Listen, die über getElementsByTagName oder getElementsByClassName oder getElementsByName abgerufen werden.

<div>Das Wetter ist heute nicht sehr gut</div>
<div>Weil es regnet</div>
<Skript>
 var domList = document.getElementsByTagName('div')
 console.log(domList)
 console.log(Typ der DomList)
 Konsole.log({}.toString.call(domList))
</Skript>

Es ist ersichtlich, dass domList auch ein Längenattribut hat. Und nach der Konvertierung in eine Zeichenfolge ist es das Objekt HTMLCollection. Stellt ein HTMLCollection-Objekt dar

Knotenliste

Eine Sammlung von Knoten, die über document.querySelectorAll() abgerufen wurden

<div class="abc">Das Wetter ist heute nicht sehr gut</div>
<div class="abc">Weil es regnet</div>
<Skript>
 var nodeList = document.querySelectorAll('div')
 console.log(Knotenliste)
 console.log(Typ der Knotenliste)
 Konsole.log({}.toString.call(nodeList))
</Skript>

Es ist ersichtlich, dass nodeList auch ein Längenattribut hat und nach der Konvertierung in eine Zeichenfolge ein Objekt NodeList ist, das ein NodeList-Objekt darstellt. Dieses Objekt entspricht der Iterator-Schnittstellenspezifikation und kann daher von for...of durchlaufen werden. (Ich werde hier nicht erklären, was ein Iterator ist. Sie können selbst nachschauen, was ein Iterator ist.)

Merkmale

Es gibt keine Prototypmethode für Arrays, aber wenn ein Array eine Arraymethode aufrufen muss, um etwas zu tun, kann dies auf folgende Weise erfolgen

• Verwenden Sie call und apply, um Methoden auszuleihen und die entsprechenden Methoden von Arrays auszuleihen
• Konvertiert ein arrayähnliches Objekt in ein Array. Rufen Sie dann die Array-Methode auf

Anrufen und Ausleihmethoden beantragen

Tatsächlich haben wir diese Methode oben bereits verwendet. Haben wir beim Konvertieren eines Klassenarrays in einen String die toString()-Methode des obigen Objekts übernommen?

Hier noch ein paar weitere

Funktion args(a, b, c) {
 Array.prototype.push.call(Argumente, '123')
 console.log(Argumente)
 Array.prototype.splice.call(Argumente, 0, 1)
 console.log(Argumente)
 Array.prototype.unshift.apply(Argumente, [1,2,3])
 console.log(Argumente)
}

args('a', 'b', 'c')

Array-ähnlich zu Array

Nachdem Sie das Klassenarray in ein Array konvertiert haben, können Sie die jeweiligen Array-Methoden nach Belieben aufrufen. Wie konvertieren Sie also das Klassenarray in ein Array?

Sie können einige Array-Methoden verwenden, um ein neues Array zu generieren

Funktion args(a, b, c) {
 let arr = Array.prototype.slice.call(Argumente)
 console.log(arr)
 arr = Array.prototype.concat.apply([], Argumente)
 console.log(arr)
}

args('a', 'b', 'c')

Konvertieren in ein Array mit der neuen Methode von ES6

ES6 fügt eine neue Array.from-Methode hinzu, die ein Klassenarray in ein Array konvertieren kann. Außerdem steht ein Spread-Operator zur Verfügung, um ein arrayähnliches Objekt direkt in einem Array zu erweitern.

Funktion args(a, b, c) {
 let arr = Array.from(Argumente)
 console.log(arr)
 arr = [...Argumente]
 console.log(arr)
}

args('a', 'b', 'c')

So, das war’s mit den Klassenarrays. Wir sind gerne für eine gemeinsame Diskussion da.

Zusammenfassen

Dies ist das Ende dieses Artikels über JavaScript-Klassenarrays. Weitere relevante Inhalte zu JavaScript-Klassenarrays finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!