Die Verwendung und der Unterschied zwischen JavaScript-Pseudo-Array und Array

Die Verwendung und der Unterschied zwischen JavaScript-Pseudo-Array und Array

Pseudo-Arrays und Arrays

In JavaScript sind mit Ausnahme der fünf primitiven Datentypen alle anderen Objekte, einschließlich Funktionen.

Die Beziehung zwischen Objekten und Arrays

Bevor wir über den Unterschied sprechen, müssen wir noch eine weitere Erkenntnis erwähnen, nämlich die Prototypenvererbung von JavaScript.

Alle integrierten Konstruktoren von JavaScript erben von Object.prototype.

Unter dieser Prämisse ist es verständlich, dass mit new Array() oder [] erstellte Array-Objekte die Eigenschaftswerte von Object.prototype haben.

var obj = {}; // hat den Eigenschaftswert von Object.prototype var arr = [];
//Array mit Array-Literalen erstellt, da die Eigenschaften von Array.prototype von Object.prototype geerbt werden.
//Dann hat es die Eigenschaftswerte sowohl von Array.prototype als auch von Object.prototype

Wir können den ersten Unterschied zwischen Objekten und Arrays sehen: Objekte haben nicht die Eigenschaftswerte von Arrays Array.prototype.

Was ist ein Array

Arrays haben eine grundlegende Eigenschaft: einen Index, den Objekte nicht haben. Sehen wir uns einen Codeabschnitt an:

var obj = {};
var arr = [];
 
Objekt[2] = "a";
arr[2] = "ein";
 
console.log(obj[2]); // => ein
console.log(arr[2]); // => ein
console.log(obj.length); // => undefiniert
console.log(arr.length); // => 3
  • obj[2] gibt 'a' aus, weil Objekte gewöhnliche Schlüssel-Wert-Paare für den Zugriff auf Daten sind.
  • Allerdings gibt arr[2] „a“ aus. Arrays speichern und greifen auf Daten nach Index zu. Der Grund, warum arr[2] „a“ ausgibt, ist, dass die Daten bereits am Index 2 des Arrays arr gespeichert sind.
  • obj.length hat nicht die Eigenschaften eines Arrays und obj speichert die Attributlänge nicht, sodass natürlich undefiniert ausgegeben wird
  • Bei Arrays ist die Länge eine integrierte Eigenschaft des Arrays und das Array ändert den Längenwert entsprechend der Indexlänge.
  • Warum gibt arr.length 3 statt 1 aus?
    • Beim Hinzufügen von Elementen zu einem Array werden diese nicht gemäß aufeinanderfolgender Indizes hinzugefügt. Daher ist der Index des Arrays diskontinuierlich, was dazu führt, dass die Indexlänge größer als die Anzahl der Elemente ist.

Was ist ein Pseudoarray?

  1. Hat eine Längeneigenschaft und andere Eigenschaften (Indizes) sind nicht-negative Ganzzahlen (der Index im Objekt wird als Zeichenfolge behandelt, sodass Sie ihn als Zeichenfolge nicht-negativer Ganzzahlen verstehen können)
  2. Verfügt nicht über die Methoden, die Arrays haben

Ein Pseudo-Array ist ein Objekt, das ein Längenattribut wie ein Array hat und außerdem Attribute wie 0, 1, 2, 3 usw. besitzt. Es sieht aus wie ein Array, ist aber kein Array. Beispiel:

var fakeArray = {
  "0": "erste",
  "1": "Sekunde",
  "2": "dritte",
  Länge: 3
};
 
für (var i = 0; i < fakeArray.length; i++) {
  Konsole.log(fakeArray[i]);
}
 
Array.prototype.join.call(fakeArray,'+');

Gängige Pseudo-Arrays sind:

  • Argumente innerhalb einer Funktion
  • Eine Liste von DOM-Objekten (wie die von document.getElementsByTags erhaltene Liste)
  • jQuery-Objekte (z. B. $("div") )

Ein Pseudo-Array ist ein Objekt, während ein echtes Array ein Array ist.

Der Zweck von Pseudo-Arrays besteht darin, normalen Objekten die normale Verwendung vieler Methoden von Arrays zu ermöglichen, beispielsweise:

var arr = Array.prototype.slice.call(argumente);
 
Array.prototype.forEach.call(Argumente, Funktion(v) {
  // Schleife über Argumentobjekt });

// drücken
//manche
// jedes
// Filter
// Karte
// ...

Das Obige kann vereinfacht werden, indem beim Ausleihen von Array-Prototypmethoden Array-Literale verwendet werden:

var obj = {
  0: "ein",
  1: 'b',
  2: 'c',
  Länge: 3
}

;[].push.call(Objekt, 'd')

Konsole.log([].slice.call(obj))

;[].forEach.call(Objekt, Funktion (Nummer, Index) {
  console.log(Nummer)
})

Der Unterschied zwischen den beiden

1. Länge:

  • Echte Arrays haben eine variable Länge
  • Die Länge des Pseudo-Arrays ist unveränderlich

2. Anwendung der Methode:

  • Echte Arrays können Array-Methoden verwenden
  • Pseudo-Arrays können keine Array-Methoden verwenden

Zusammenfassung

Objekte haben keinen Array-Eigenschaftswert. Der Typ des Prototyps ist Object, während der Typ des Arrays Array ist.
Arrays werden basierend auf Indizes implementiert, die Länge wird automatisch aktualisiert und Objekte sind Schlüssel-Wert-Paare. Mit Objekten können Sie Pseudo-Arrays erstellen, und Pseudo-Arrays können die meisten Methoden von Arrays normal verwenden.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung und Unterschiede von JavaScript-Pseudo-Arrays und Arrays. Weitere relevante Inhalte zu JavaScript-Pseudo-Arrays und Arrays finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Code zum Konvertieren von HTMLCollection/NodeList/Pseudo-Arrays in Arrays in js
  • Implementierungsmethode für JavaScript-Pseudoarrays
  • Beispielanalyse der Verwendung von JavaScript-Pseudo-Arrays
  • Beispiel für die JS Array.from()-Methode zum Konvertieren eines Pseudo-Arrays in ein Array

<<:  So fügen Sie dem Tomcat-Dienst einen Java-Startbefehl hinzu

>>:  So bereinigen Sie schnell Milliarden von Daten in einer MySQL-Datenbank

Artikel empfehlen

Detaillierte Erklärung der Filter und Anweisungen in Vue

Inhaltsverzeichnis benutzerdefinierte Vue-Direkti...

js realisiert den Lupeneffekt von Produkten auf Einkaufswebsites

In diesem Artikel wird der spezifische Code von j...

So implementieren Sie mehrere Parameter in el-dropdown in ElementUI

Aufgrund der zunehmenden Anzahl von Schaltflächen...

Tutorial zur Verwendung des Hyperlink-Tags in HTML

Die verschiedenen HTML-Dokumente der Website sind...

So aktivieren Sie die MySQL-Remoteverbindung auf einem Linux-Server

Vorwort Lernen Sie MySQL, um frühere Nicht-MK-Dat...

Lösung zum Verhindern des Caching in Seiten

Lösung: Fügen Sie in <head> den folgenden Co...

Erläuterung der objektorientierten Klassenvererbung in JavaScript

1. Objektorientierte Klassenvererbung In den obig...

Auswahl der MySQL-Tabellentyp-Speicher-Engine

Inhaltsverzeichnis 1. Zeigen Sie die Speicher-Eng...

Layui implementiert den Bestätigungscode der Anmeldeschnittstelle

In diesem Artikelbeispiel wird der spezifische Co...