Heim > Web-Frontend > Front-End-Fragen und Antworten > So konvertieren Sie ein Array-ähnliches Objekt in Javascript in ein Array

So konvertieren Sie ein Array-ähnliches Objekt in Javascript in ein Array

PHPz
Freigeben: 2023-04-25 16:42:56
Original
1639 Leute haben es durchsucht

In JavaScript ist ein Array-ähnliches Objekt jedes Objekt, das über numerische Tasten und eine Längeneigenschaft verfügt. Beispielsweise sind das NodeList-Objekt im DOM und das Arguments-Objekt in der Funktion Array-ähnliche Objekte. In einigen Fällen müssen wir Array-ähnliche Objekte in echte Arrays umwandeln, um Daten bequemer bearbeiten zu können. In diesem Artikel werden drei Methoden zum Konvertieren arrayähnlicher Objekte in Arrays vorgestellt.

Methode 1: Die Slice-Methode des Arrays

Die erste Methode besteht darin, die Slice()-Methode des Arrays zu verwenden, die einen Abschnitt von Elementen vom Startindex zum Endindex in ein neues Array kopieren kann. Wir können die Methode „slice()“ auf Array-ähnliche Objekte anwenden, indem wir call() oder apply() verwenden.

Zum Beispiel können wir den folgenden Code verwenden, um ein NodeList-Objekt in ein Array zu konvertieren:

const nodeList = document.querySelectorAll('li');
const array = Array.prototype.slice.call(nodeList);
Nach dem Login kopieren

In diesem Beispiel verwenden wir zuerst die Methode querySelectorAll(), um das NodeList-Objekt des li-Elements abzurufen. Anschließend konvertieren wir das NodeList-Objekt mithilfe der Methode Array.prototype.slice.call() in ein Array.

Methode 2: Verwenden Sie Array.from()

Die zweite Methode besteht darin, die Methode Array.from() zu verwenden. Diese Methode wandelt ein Array-ähnliches Objekt oder iterierbares Objekt in ein echtes Array um. Der erste Parameter der Array.from()-Methode ist das zu konvertierende Objekt und der zweite Parameter ist eine optionale Zuordnungsfunktion, die auf jedes Element angewendet wird.

Zum Beispiel können wir den folgenden Code verwenden, um ein NodeList-Objekt in ein Array zu konvertieren:

const nodeList = document.querySelectorAll('li');
const array = Array.from(nodeList);
Nach dem Login kopieren

In diesem Beispiel verwenden wir zuerst die Methode querySelectorAll(), um das NodeList-Objekt des li-Elements abzurufen. Anschließend konvertieren wir das NodeList-Objekt mit der Methode Array.from() in ein Array.

Methode 3: Verwenden Sie den Spread-Operator

Die dritte Methode besteht darin, den Spread-Operator zu verwenden…. Dieser Operator erweitert ein iterierbares Objekt in eine Reihe von Argumenten. Wir können es auf ein leeres Array anwenden und dann das arrayähnliche Objekt in dieses Array einfügen.

Zum Beispiel können wir den folgenden Code verwenden, um ein NodeList-Objekt in ein Array zu konvertieren:

const nodeList = document.querySelectorAll('li');
const array = [...nodeList];
Nach dem Login kopieren

In diesem Beispiel verwenden wir zuerst die Methode querySelectorAll(), um das NodeList-Objekt des li-Elements abzurufen. Anschließend verwenden wir den Spread-Operator, um das NodeList-Objekt in ein Array umzuwandeln.

Zusammenfassung

Die oben genannten drei Methoden können Array-ähnliche Objekte in echte Arrays konvertieren. Bei der Auswahl einer Methode sollten Sie die Lesbarkeit und Leistung des Codes berücksichtigen. Wenn Sie große Datenmengen konvertieren müssen, verwenden Sie eine leistungsfähigere Methode. Wenn die Lesbarkeit wichtiger ist, verwenden Sie eine besser lesbare Methode.

Das obige ist der detaillierte Inhalt vonSo konvertieren Sie ein Array-ähnliches Objekt in Javascript in ein Array. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage