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

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

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' }

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

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'] }
// ]

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!