Heim > Artikel > Web-Frontend > Schwierigkeiten bei JavaScript-Array-Operationen (ausführliches Tutorial)
In diesem Artikel werden anhand von Codeanalysebeispielen die Schwierigkeiten von JavaScript-Array-Operationen erläutert und worauf Sie achten müssen.
Der folgende Inhalt ist eine Zusammenfassung der Erfahrungen beim Erlernen von JavaScript-Arrays und der Punkte, auf die geachtet werden muss.
Verwenden Sie for_in nicht zum Durchlaufen von Arrays
Dies ist ein häufiges Missverständnis unter JavaScript-Anfängern. for_in wird zum Durchlaufen aller aufzählbaren (aufzählbaren) Schlüssel im Objekt einschließlich der Prototypenkette verwendet. Es existiert ursprünglich nicht zum Durchlaufen von Arrays.
Es gibt drei Probleme bei der Verwendung von for_in zum Durchlaufen von Arrays:
1. Die Durchlaufreihenfolge ist nicht festgelegt
Die JavaScript-Engine garantiert nicht Durchlaufreihenfolge von Objekten. Beim Durchlaufen eines Arrays als normales Objekt ist die Indexreihenfolge der Durchquerung ebenfalls nicht garantiert.
2. Die Werte in der Objektprototypkette werden durchlaufen.
Wenn Sie das Prototypobjekt des Arrays (z. B. Polyfill) ändern, ohne es auf enumerable: false
zu setzen, iteriert for_in über diese Dinge.
3. Geringe Betriebseffizienz.
Obwohl JavaScript theoretisch die Form von Objekten zum Speichern von Arrays verwendet, ist die JavaScript-Engine insbesondere für Arrays optimiert, ein sehr häufig verwendetes integriertes Objekt. https://jsperf.com/for-in-vs-...
Sie können sehen, dass die Verwendung von for_in zum Durchlaufen des Arrays mehr als 50-mal langsamer ist als die Verwendung von Indizes zum Durchlaufen des Arrays
PS : Vielleicht möchten Sie nach for_of suchen
Verwenden Sie JSON.parse(JSON.stringify()) nicht, um Arrays tief zu kopieren
Jemand verwendet JSON, um Objekte tief zu kopieren oder Arrays. Obwohl dies in den meisten Fällen eine einfache und bequeme Methode ist, kann sie auch unbekannte Fehler verursachen, weil: Einige spezifische Werte werden für diese Werte in null
NaN, undefiniert, Unendlich konvertiert Wird in JSON nicht unterstützt. Nach der Deserialisierung geht der undefinierte Schlüssel natürlich verloren.
Konvertiert das Datumsobjekt in eine Zeichenfolge
JSON unterstützt keine Objekttypen. Die Verarbeitungsmethode für Datumsobjekte in JS ist die Konvertierung einer Zeichenfolge im ISO8601-Format. Bei der Deserialisierung wird die Zeitformatzeichenfolge jedoch nicht in ein Datumsobjekt
konvertiert, was ineffizient ist.
Als native Funktionen verarbeiten
undselbst JSON-Strings sehr schnell. Es ist jedoch völlig unnötig, das Objekt in JSON zu serialisieren und wieder zu deserialisieren, um das Array tief zu kopieren.
Ich habe einige Zeit damit verbracht, eine einfache Funktion zum tiefen Kopieren von Arrays oder Objekten zu schreiben. Der Test ergab, dass die Ausführungsgeschwindigkeit fast sechsmal so hoch ist wie bei der Verwendung der JSON-Übertragung. Außerdem wird das Kopieren von TypedArray und unterstützt RegExp-ObjekteJSON.stringify
JSON.parse
https://jsperf.com/deep-clone...
Verwenden Sie nicht arr.find anstelle von arr.some
is ein neues Array in ES2015 Die Suchfunktion ähnelt, kann diese jedoch nicht ersetzen.
Array.prototype.find
Gibt den ersten qualifizierten Wert zurück und verwendet diesen Wert direkt, um Array.prototype.some
zu bestimmen, ob er existiert. Was passiert, wenn dieser qualifizierte Wert zufällig 0 ist?
Array.prototype.find
dient zur weiteren Verarbeitung nach dem Finden des Werts im Array, wird im Allgemeinen bei Objektarrays verwendet; if
dient zur Überprüfung der Existenz der beiden.
Verwenden Sie nicht arr.map anstelle von arr.forEacharr.find
arr.some
ist auch ein Fehler, den JavaScript-Anfänger oft machen. Sie unterscheiden oft nicht zwischen der tatsächlichen Bedeutung von
.
Array.prototype.map
heißt auf Chinesisch Array.prototype.forEach
. Es leitet eine weitere neue Sequenz ab, indem eine bestimmte Funktion in einer bestimmten Sequenz ausgeführt wird. Diese Funktion hat normalerweise keine Nebenwirkungen und verändert das ursprüngliche Array nicht (sog. reine Funktion).
map
Es gibt nicht viel zu sagen. Es verarbeitet einfach alle Elemente im Array mit einer bestimmten Funktion. Da 映射
keinen Rückgabewert hat (undefiniert zurückgibt), enthält seine Rückruffunktion normalerweise Nebenwirkungen, andernfalls ist das Schreiben dieses
forEach
forEach
ist zwar leistungsfähiger als forEach
, aber
nicht verwenden, sollten Sie map
forEach
map
map
Ergänzung: Zusätzliche ErfahrungforEach
Vor ES6 gab es zwei Hauptwerte Methoden zum Durchlaufen von Arrays: Handgeschriebene Schleifen iterieren mit Indizes, verwenden Sie . Ersteres ist vielseitig und am effizientesten, aber das Schreiben ist umständlicher – es kann die Werte im Array nicht direkt abrufen.
Letzteres gefällt dem Autor persönlich: Sie können den Index und den Wert der Iteration sowie den Funktionsstil direkt erhalten (beachten Sie, dass sich FP auf unveränderliche Datenstrukturen konzentriert und forEach von Natur aus ein Nebeneffekt ist, also nur FP „Form, aber kein Gott“ ist äußerst erfrischend zu schreiben. Aber! Ich frage mich, ob einer von euch Schülern bemerkt hat: Wenn man einmal mit „forEach“ angefangen hat, kann man nicht mehr aufhören. . .forEach akzeptiert eine Rückruffunktion, zu der Sie return
vorrücken können, was continue
in einer handgeschriebenen Schleife entspricht. Das geht aber nicht break
- denn es gibt keine Schleife in der Callback-Funktion, die einen loslässt break
:
[1, 2, 3, 4, 5].forEach(x => { console.log(x); if (x === 3) { break; // SyntaxError: Illegal break statement } });
Es gibt immer noch eine Lösung. Andere funktionale Programmiersprachen wie scala
sind auf ähnliche Probleme gestoßen. Sie bieten eine Funktion
break, die eine Ausnahme auslöst.
Wir können diesem Ansatz folgen, um arr.forEach
von break
zu implementieren:
try { [1, 2, 3, 4, 5].forEach(x => { console.log(x); if (x === 3) { throw 'break'; } }); } catch (e) { if (e !== 'break') throw e; // 不要勿吞异常。。。 }
Es gibt andere Methoden, z. B. die Verwendung von Array.prototype.some
anstelle von Array.prototype.forEach
.
Berücksichtigen Sie die Eigenschaften von Array.prototype.some. Wenn some
einen qualifizierten Wert findet (die Rückruffunktion gibt true
zurück), wird die Schleife sofort beendet. Mithilfe dieser Eigenschaften können Sie :
[1, 2, 3, 4, 5].some(x => { console.log(x); if (x === 3) { return true; // break } // return undefined; 相当于 false });
break
wird ignoriert und von der ursprünglichen Bedeutung der Beurteilung, ob Elemente im Array vorhanden sind, die die angegebenen Bedingungen erfüllen, getrennt. some
Vor ES6 habe ich hauptsächlich diese Methode verwendet (tatsächlich verwende ich sie jetzt gelegentlich aufgrund der Erweiterung des Babel-Codes, wir haben für ... von).
sein: for...of
for (const x of [1, 2, 3, 4, 5]) { console.log(x); if (x === 3) { break; } }
break
Aber es gibt ein Problem, scheint nicht in der Lage zu sein, den Index der Schleife zu erhalten. Tatsächlich haben die Entwickler der JavaScript-Sprache an dieses Problem gedacht und können es wie folgt lösen: for (const [index, value] of [1, 2, 3, 4, 5].entries()) { console.log(`arr[${index}] = ${value}`); }
for...of
Array.prototype.entries
und Leistungstest: https:// jsperf.com /array-fore... Chrome for...of
ist schneller
Das obige ist der detaillierte Inhalt vonSchwierigkeiten bei JavaScript-Array-Operationen (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!