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

und

selbst 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.stringifyJSON.parsehttps://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.findarr.some ist auch ein Fehler, den JavaScript-Anfänger oft machen. Sie unterscheiden oft nicht zwischen der tatsächlichen Bedeutung von

und

.

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

bedeutungslos.

forEach forEach ist zwar leistungsfähiger als forEach, aber

erstellt ein neues Array und belegt Speicher. Wenn Sie den Rückgabewert von

nicht verwenden, sollten Sie mapforEachmapmapErgä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 <🎜 simulieren >:< Der Rückgabewert von 🎜>

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

someVor 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).

ist eine echte Schleife, es kann

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...ofArray.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!