Heim Web-Frontend js-Tutorial Teilen Sie vier Beispiele für die falsche Verwendung von JavaScript-Array-Methoden

Teilen Sie vier Beispiele für die falsche Verwendung von JavaScript-Array-Methoden

Sep 12, 2018 pm 06:02 PM

Als ich JavaScript zum ersten Mal lernte, habe ich es nicht gründlich studiert und hatte nur ein begrenztes Verständnis einiger Kenntnisse. In der vergangenen Zeit wurden diese 4 Fehler in allen von mir überprüften Pull-Anfragen gemacht. Ein weiterer Grund, warum ich diesen Artikel geschrieben habe, ist, dass ich diese Fehler selbst gemacht habe. Mal sehen, wie man sie richtig verwendet!

1. Verwenden Sie nicht Array.indexOf, sondern Array.includes

„Wenn Sie Elemente in einem Array finden möchten, verwenden Sie Array.indexOf!“ Ich erinnere mich an diesen Satz, als ich JavaScript-Kurse studierte. Dieser Satz ist richtig, er kann tatsächlich so verwendet werden!

Laut MDN-Dokument: „Array.indexOf gibt den Index der ersten übereinstimmenden Position des gesuchten Elements zurück.“ Daher ist Array.indexOf eine gute Wahl, wenn dieser Index später verwendet werden muss Lösung. Das Problem, das wir lösen möchten, ist jedoch: Finden Sie heraus, ob ein Array ein Element enthält. Dies ist eine Ja/Nein-Frage, eine wahre oder falsche Frage, die einen booleschen Typ zurückgibt. Daher empfehle ich die Verwendung von Array.includes, das einen booleschen Wert zurückgibt.

'use strict';
const characters = [
  'ironman',
  'black_widow',
  'hulk',
  'captain_america',
  'hulk',
  'thor',
];
console.log(characters.indexOf('hulk'));
// 2
console.log(characters.indexOf('batman'));
// -1
console.log(characters.includes('hulk'));
// true
console.log(characters.includes('batman'));
// false
Nach dem Login kopieren

2. Verwenden Sie nicht Array.filter, sondern Array.find

Array.filter ist eine sehr nützliche Funktion, sie gibt ein neues Array zurück, das den Anforderungen entspricht Filterbedingungen. Wie der Name schon sagt, wird es zum Filtern verwendet.

Wenn wir jedoch wissen, dass das gewünschte Ergebnis nur ein Element enthält, empfehle ich nicht, es zu verwenden. Wenn unsere Callback-Funktionsdefinition beispielsweise eine eindeutige ID zum Filtern verwendet, muss das Ergebnis eindeutig sein. In diesem Fall gibt Array.filter ein Array mit nur einem Element zurück. Da wir nach einer bestimmten ID suchen können, haben wir bereits festgestellt, dass es nur ein Element gibt, sodass die Verwendung eines Arrays keinen Sinn macht.

Lassen Sie uns außerdem über Leistungsprobleme sprechen. Um alle passenden Elemente zurückzugeben, muss Array.filter das gesamte Array durchsuchen. Sie können sich vorstellen, dass das zurückgegebene Array sehr groß ist, wenn Hunderte von Elementen die Filterbedingungen erfüllen.

Um diese Situation zu vermeiden, empfehle ich die Verwendung von Array.find. Es wird nur das erste Element zurückgegeben, das die Filterbedingung erfüllt. Darüber hinaus beendet Array.find die Ausführung, nachdem das erste Element gefunden wurde, das die Bedingung erfüllt, anstatt das gesamte Array zu durchsuchen.

'use strict';
const characters = [
  { id: 1, name: 'ironman' },
  { id: 2, name: 'black_widow' },
  { id: 3, name: 'captain_america' },
  { id: 4, name: 'captain_america' },
];
function getCharacter(name) {
  return character => character.name === name;
}
console.log(characters.filter(getCharacter('captain_america')));
// [
//   { id: 3, name: 'captain_america' },
//   { id: 4, name: 'captain_america' },
// ]
console.log(characters.find(getCharacter('captain_america')));
// { id: 3, name: 'captain_america' }
Nach dem Login kopieren

3. Verwenden Sie nicht Array.find, sondern Array.some

Ich gebe zu, dass ich viele Fehler gemacht habe. Später bat mich ein sehr guter Freund, die MDN-Dokumentation zu lesen und sagte, dass es eine bessere Lösung gäbe. Diese Situation ist der gerade erwähnten Situation Array.indexOf/Array.includes sehr ähnlich.

Im vorherigen Beispiel haben wir gesehen, dass Array.find eine Filterfunktion akzeptiert und erfüllte Elemente zurückgibt. Wenn wir also herausfinden möchten, ob ein Array ein bestimmtes Element enthält, ist Array.find die beste Lösung? Wahrscheinlich nicht, da es den elementspezifischen Wert und keinen booleschen Wert zurückgibt.

Ich empfehle jedem, Array.some zu verwenden, das einen booleschen Wert zurückgibt.

'use strict';
const characters = [
  { id: 1, name: 'ironman', env: 'marvel' },
  { id: 2, name: 'black_widow', env: 'marvel' },
  { id: 3, name: 'wonder_woman', env: 'dc_comics' },
];
function hasCharacterFrom(env) {
  return character => character.env === env;
}
console.log(characters.find(hasCharacterFrom('marvel')));
// { id: 1, name: 'ironman', env: 'marvel' }
console.log(characters.some(hasCharacterFrom('marvel')));
// true
Nach dem Login kopieren

4. Verwenden Sie keine Kombination aus Array.map und Array.filter, sondern Array.reduce

Array.reduce ist etwas schwer zu verstehen! Wenn wir jedoch jedes Mal Array.filter und Array.map gleichzeitig verwenden, ist Ihnen dann klar, dass Sie etwas brauchen, oder?

Was ich meine ist: Wir haben das gesamte Array zweimal durchlaufen. Das erste Mal besteht darin, ein neues Array zu filtern und zurückzugeben, und das zweite Mal darin, ein neues Array über die Karte zu erstellen. Wir verwenden zwei Array-Methoden, jede mit ihrer eigenen Rückruffunktion, und das von Array.filter zurückgegebene Array wird nie wieder verwendet.

Um Ineffizienz zu vermeiden, empfehle ich die Verwendung von Array.reduce. Gleiches Ergebnis, eleganterer Code! Siehe das Beispiel unten:

'use strict';
const characters = [
  { name: 'ironman', env: 'marvel' },
  { name: 'black_widow', env: 'marvel' },
  { name: 'wonder_woman', env: 'dc_comics' },
];
console.log(
  characters
    .filter(character => character.env === 'marvel')
    .map(character => Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))
);
// [
//   { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
//   { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
// ]
console.log(
  characters
    .reduce((acc, character) => {
      return character.env === 'marvel'
        ? acc.concat(Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))
        : acc;
    }, [])
)
// [
//   { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
//   { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
// ]
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonTeilen Sie vier Beispiele für die falsche Verwendung von JavaScript-Array-Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie entferne ich doppelte Elemente mithilfe einer foreach-Schleife aus einem PHP-Array? Wie entferne ich doppelte Elemente mithilfe einer foreach-Schleife aus einem PHP-Array? Apr 27, 2024 am 11:33 AM

Die Methode zur Verwendung einer foreach-Schleife zum Entfernen doppelter Elemente aus einem PHP-Array ist wie folgt: Durchlaufen Sie das Array und löschen Sie es, wenn das Element bereits vorhanden ist und die aktuelle Position nicht das erste Vorkommen ist. Wenn beispielsweise in den Datenbankabfrageergebnissen doppelte Datensätze vorhanden sind, können Sie diese Methode verwenden, um diese zu entfernen und Ergebnisse ohne doppelte Datensätze zu erhalten.

PHP-Array-Schlüsselwertumdrehen: Vergleichende Leistungsanalyse verschiedener Methoden PHP-Array-Schlüsselwertumdrehen: Vergleichende Leistungsanalyse verschiedener Methoden May 03, 2024 pm 09:03 PM

Der Leistungsvergleich der PHP-Methoden zum Umdrehen von Array-Schlüsselwerten zeigt, dass die Funktion array_flip() in großen Arrays (mehr als 1 Million Elemente) eine bessere Leistung als die for-Schleife erbringt und weniger Zeit benötigt. Die for-Schleifenmethode zum manuellen Umdrehen von Schlüsselwerten dauert relativ lange.

Praxis der mehrdimensionalen Sortierung von PHP-Arrays: von einfachen bis hin zu komplexen Szenarien Praxis der mehrdimensionalen Sortierung von PHP-Arrays: von einfachen bis hin zu komplexen Szenarien Apr 29, 2024 pm 09:12 PM

Die mehrdimensionale Array-Sortierung kann in Einzelspaltensortierung und verschachtelte Sortierung unterteilt werden. Bei der Einzelspaltensortierung kann die Funktion array_multisort() zum Sortieren nach Spalten verwendet werden. Bei der verschachtelten Sortierung ist eine rekursive Funktion erforderlich, um das Array zu durchlaufen und zu sortieren. Zu den praktischen Beispielen gehören die Sortierung nach Produktname und die Sortierung von Verbindungen nach Verkaufsmenge und Preis.

Die Kunst des PHP Array Deep Copy: Mit verschiedenen Methoden eine perfekte Kopie erzielen Die Kunst des PHP Array Deep Copy: Mit verschiedenen Methoden eine perfekte Kopie erzielen May 01, 2024 pm 12:30 PM

Zu den Methoden zum tiefen Kopieren von Arrays in PHP gehören: JSON-Kodierung und -Dekodierung mit json_decode und json_encode. Verwenden Sie array_map und clone, um tiefe Kopien von Schlüsseln und Werten zu erstellen. Verwenden Sie Serialize und Deserialize für die Serialisierung und Deserialisierung.

Best Practices für Deep Copying von PHP-Arrays: Entdecken Sie effiziente Methoden Best Practices für Deep Copying von PHP-Arrays: Entdecken Sie effiziente Methoden Apr 30, 2024 pm 03:42 PM

Die beste Vorgehensweise zum Durchführen einer Array-Deep-Kopie in PHP besteht darin, json_decode(json_encode($arr)) zu verwenden, um das Array in einen JSON-String zu konvertieren und ihn dann wieder in ein Array umzuwandeln. Verwenden Sie unserialize(serialize($arr)), um das Array in eine Zeichenfolge zu serialisieren und es dann in ein neues Array zu deserialisieren. Verwenden Sie den RecursiveIteratorIterator, um mehrdimensionale Arrays rekursiv zu durchlaufen.

Anwendung der PHP-Array-Gruppierungsfunktion bei der Datensortierung Anwendung der PHP-Array-Gruppierungsfunktion bei der Datensortierung May 04, 2024 pm 01:03 PM

Die PHP-Funktion array_group_by kann Elemente in einem Array basierend auf Schlüsseln oder Abschlussfunktionen gruppieren und ein assoziatives Array zurückgeben, wobei der Schlüssel der Gruppenname und der Wert ein Array von Elementen ist, die zur Gruppe gehören.

Die Rolle der PHP-Array-Gruppierungsfunktion beim Auffinden doppelter Elemente Die Rolle der PHP-Array-Gruppierungsfunktion beim Auffinden doppelter Elemente May 05, 2024 am 09:21 AM

Mit der Funktion array_group() von PHP kann ein Array nach einem angegebenen Schlüssel gruppiert werden, um doppelte Elemente zu finden. Diese Funktion durchläuft die folgenden Schritte: Verwenden Sie key_callback, um den Gruppierungsschlüssel anzugeben. Verwenden Sie optional value_callback, um Gruppierungswerte zu bestimmen. Zählen Sie gruppierte Elemente und identifizieren Sie Duplikate. Daher ist die Funktion array_group() sehr nützlich, um doppelte Elemente zu finden und zu verarbeiten.

PHP-Array-Zusammenführungs- und Deduplizierungsalgorithmus: parallele Lösung PHP-Array-Zusammenführungs- und Deduplizierungsalgorithmus: parallele Lösung Apr 18, 2024 pm 02:30 PM

Der PHP-Algorithmus zum Zusammenführen und Deduplizieren von Arrays bietet eine parallele Lösung, indem er das ursprüngliche Array zur parallelen Verarbeitung in kleine Blöcke aufteilt und der Hauptprozess die Ergebnisse der zu deduplizierenden Blöcke zusammenführt. Algorithmusschritte: Teilen Sie das ursprüngliche Array in gleichmäßig verteilte kleine Blöcke auf. Verarbeiten Sie jeden Block zur Deduplizierung parallel. Blockergebnisse zusammenführen und erneut deduplizieren.

See all articles