Der Autor des Materials, dessen Übersetzung wir heute veröffentlichen, sagt, dass er in den letzten Monaten bei der Überprüfung von Pull-Anfragen ständig auf dieselben vier Mängel gestoßen ist, die mit der irrationalen Verwendung von Array-Methoden in JavaScript verbunden sind. Um solche Codefehler zu reduzieren, die zuvor in seinen Programmen auftraten, schrieb er diesen Artikel.
Ersetzen von indexOf () durch include ()
"Wenn Sie nach etwas in einem Array suchen, verwenden Sie die
indexOf() -Methode." Ich habe eine solche Empfehlung in einem der Kurse getroffen, als ich JavaScript studiert habe. Diese Empfehlung ist ganz normal, nichts Schlechtes kann darüber gesagt werden.
In MDN können Sie feststellen, dass die
indexOf() -Methode den ersten Index zurückgibt, anhand dessen ein bestimmtes Element im Array gefunden werden kann. Dies bedeutet, dass die
indexof() -Methode hervorragend
indexof() ist, um Elemente in Arrays zu finden, wenn wir diesen Index im Programm verwenden
indexof() .
Aber was ist, wenn wir nur herausfinden müssen, ob das Array ein bestimmtes Element enthält oder nicht? Das heißt, wir interessieren uns nicht für den Index dieses Elements, wenn es sich im Array befindet, sondern für die Tatsache, dass es vorhanden oder nicht vorhanden ist. Mit diesem Ansatz sind wir mit einem Befehl sehr vertraut, der
true oder
false zurückgibt. In solchen Fällen empfehle ich, nicht die
indexOf() -Methode zu verwenden, sondern die
indexOf() includes() -Methode, die einen booleschen Wert zurückgibt. Betrachten Sie ein Beispiel:
'use strict'; const characters = [ 'ironman', 'black_widow', 'hulk', 'captain_america', 'hulk', 'thor', ]; console.log(characters.indexOf('hulk'));
Verwenden Sie die find () -Methode anstelle der filter () -Methode
Die
filter() -Methode ist ein sehr nützliches Werkzeug. Auf der Grundlage eines Arrays wird ein anderes Array erstellt, das die Elemente des ursprünglichen Arrays enthält, die der angegebenen Bedingung entsprechen. Wie aus dem Namen dieses Verfahrens ersichtlich ist, ist es zum Filtern von Arrays vorgesehen, bei denen üblicherweise Arrays erhalten werden, die kürzer als die ursprünglichen sind.
Was ist, wenn wir wissen, dass nach dem Filtern des Arrays nur ein Element übrig bleibt? Dies kann beispielsweise passieren, wenn Sie versuchen, Array-Elemente anhand einer eindeutigen Kennung zu filtern. In einer solchen Situation würde ich die Verwendung der
filter() -Methode nicht empfehlen, da das Array, das sie bildet, nur ein Element enthält. Wenn wir an einem Array-Element mit einem eindeutigen Wert interessiert sind, arbeiten wir mit einem einzelnen Wert, und ein Array wird nicht benötigt, um einen solchen Wert darzustellen.
Wenn wir über die Leistung der
filter() -Methode sprechen, stellt sich heraus, dass zum Erstellen einer Liste von Elementen, die der beim Aufruf angegebenen Bedingung entsprechen, das gesamte Array betrachtet werden muss. Stellen Sie sich außerdem vor, dass ein Array Hunderte von Elementen enthält, die eine bestimmte Bedingung erfüllen. Dies führt dazu, dass das resultierende Array ziemlich groß ist.
Um solche Situationen zu vermeiden, würde ich die Methode
find() empfehlen. Beim Aufruf erhält es einen Rückruf, der die Bedingung beschreibt und der mit der
filter() -Methode verwendeten sehr ähnlich ist. Die
find() -Methode gibt jedoch nur das erste Element zurück, das der Bedingung entspricht. Gleichzeitig funktioniert diese Methode sofort nicht mehr, nachdem sie ein solches Element gefunden hat. Infolgedessen muss er nicht das gesamte Array 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' }
Ersetzen der find () -Methode durch die some () -Methode
Ich muss zugeben, das Versehen, über das wir jetzt sprechen werden, habe ich schon oft begangen. Dann rieten sie mir, mir
MDN anzuschauen und herauszufinden, wie ich das, was ich irrational getan habe, verbessern kann. Kurz gesagt, dies ist sehr ähnlich zu dem, was wir uns gerade angesehen haben, als wir über die
indexOf() und
indexOf() includes() -Methoden gesprochen haben.
Im obigen Fall haben wir gesehen, dass die
find() -Methode als Argument einen Rückruf akzeptiert und ein Array-Element zurückgibt. Kann die
find() -Methode als die erfolgreichste Lösung bezeichnet werden, wenn wir herausfinden müssen, ob das Array einen bestimmten Wert enthält oder nicht? Möglicherweise nicht, da diese Methode den Wert eines Array-Elements und keinen Booleschen Wert zurückgibt.
In einer solchen Situation würde ich die Verwendung der
some() -Methode empfehlen, die 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')));
Verwenden der Methode redu () anstelle einer Kombination der Methoden filter () und map ()
Es ist anzumerken, dass die Methode
reduce() nicht als leicht verständlich eingestuft werden kann. Wenn jedoch das, was damit gemacht werden kann, in zwei Schritten unter Verwendung der in einer Kette kombinierten Methoden
filter() und
map() wird, scheint etwas in diesem Ansatz nicht zu stimmen.
Ich sage, dass Sie bei diesem Ansatz das Array zweimal betrachten müssen. Der erste Durchgang, der von der
filter() -Methode ausgeführt wird, umfasst das Anzeigen des gesamten Arrays und das Erstellen eines neuen, gefilterten Arrays. Nach dem zweiten Durchgang, der von der
map() -Methode ausgeführt wird, wird erneut ein neues Array erstellt, das die Ergebnisse der Transformation der Elemente des Arrays enthält, die nach dem Ausführen der
filter() -Methode erhalten wurden. Um das fertige Array zu erreichen, werden daher zwei Methoden verwendet. Jede Methode hat ihren eigenen Rückruf, und während der Ausführung einer solchen Operation mit der
filter() -Methode wird ein Array erstellt, mit dem wir nicht mehr arbeiten können.
In solchen Fällen würde ich die Verwendung der Methode
reduce() empfehlen, um die Belastung des mit zwei Methoden erstellten Systems zu verringern und die Produktivität von Programmen zu steigern. Das Ergebnis wird das gleiche sein, aber der Code wird besser ausfallen. Mit dieser Methode können Sie die für uns interessanten Elemente filtern und zur Batterie hinzufügen. Die Batterie kann eine numerische Variable sein, die beispielsweise die Summe der Elemente des Arrays speichert. Sie kann ein Objekt, eine Zeichenfolge oder ein Array sein, in dem wir die benötigten Elemente akkumulieren können.
In unserem Fall würde ich, da es sich um die Verwendung der
map() -Methode handelt, die Verwendung der
reduce() -Methode mit einem Array als Akkumulator empfehlen. Im folgenden Beispiel filtern wir die Array-Elemente, die Objekte sind, nach dem Wert des
env Felds und führen ihre Konvertierung durch.
'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'] } // ]
Zusammenfassung
In diesem Artikel haben wir einige Ansätze zur effektiven Verwendung von Array-Methoden zur Lösung verschiedener Probleme untersucht. Wir glauben, dass die Ideen, auf denen die Empfehlungen des Autors dieses Artikels basieren, dazu beitragen können, den JS-Code in anderen Situationen zu verbessern.
Liebe Leser! Haben Sie jemals Beispiele für eine Fehlallokation von JavaScript-Mechanismen gefunden?
