Wie können Einsteiger Arrays in JavaScript besser nutzen? (Quellcode)

In diesem Artikel geht es darum, wie Einsteiger Arrays in JavaScript besser nutzen können. (Quellcode), es hat einen gewissen Referenzwert. Freunde in Not können darauf verweisen.

Array.find anstelle von Array.filter verwenden

Array.filter ist eine sehr nützliche Methode. Es filtert das ursprüngliche Array über die Rückruffunktion und gibt die gefilterten Elemente als neues Array zurück. Wie der Name schon sagt, verwenden wir diese Methode zum Filtern, was (im Allgemeinen) zu einem neuen Array mit einer kürzeren Länge führt.

Ich empfehle jedoch nicht, Array.filter zu verwenden, wenn Sie wissen, dass nach dem Filtern durch die Callback-Funktion nur ein Element übrig bleibt. Beispiel: Verwenden Sie „Gleich einer eindeutigen ID“ als Filterbedingung, um ein Array zu filtern. In diesem Beispiel gibt Array.filter ein neues Array mit nur einem Element zurück. Da wir jedoch nur versuchen, das Element mit einer bestimmten ID abzurufen, ist dieses neue Array nutzlos.

Lassen Sie uns über die Leistung sprechen. Um alle Elemente abzurufen, die den Filterkriterien der Rückruffunktion entsprechen, muss Array.filter das gesamte Array durchlaufen. Wenn das ursprüngliche Array Tausende von Elementen enthält, muss die Rückruffunktion beträchtlich oft ausgeführt werden.

Um diese Situationen zu vermeiden, empfehle ich die Verwendung von Array.find. Es erfordert genau wie Array.filter eine Rückruffunktion, gibt jedoch nur das erste Element zurück, das die Kriterien erfüllt. Wenn das erste Element gefunden wird, das die Filterbedingungen der Rückruffunktion erfüllt, wird die Suche nach unten sofort beendet. Kein Durchlaufen des gesamten Arrays mehr erforderlich.

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

Verwenden Sie Array.some anstelle von Array.find

Ich gebe zu, dass ich diesen Fehler ziemlich oft mache. Dann schlug mir ein Freund vor, mir die MDN-Dokumentation anzusehen, um einen besseren Weg zu finden. Tatsächlich ist (dieser Fehler) dem obigen Beispiel Array.indexOf/Array.includes sehr ähnlich.

Im obigen Beispiel wissen wir, dass Array.find eine Callback-Funktion als Parameter benötigt und das (qualifizierte) erste Element zurückgibt. Wenn wir jedoch wissen müssen, ob ein Element in einem Array vorhanden ist, ist Array.find dann die beste Wahl? Nicht unbedingt, da es ein Element und keinen booleschen Wert zurückgibt.

Im folgenden Beispiel empfehle ich die Verwendung von Array.some, das den benötigten 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

Fügen Sie den Unterschied zwischen der Verwendung von Array.some und Array.includes hinzu. Beide geben einen booleschen Wert zurück, der angibt, ob ein Element im Array vorhanden ist, und stoppen das Durchlaufen des Arrays, sobald das entsprechende Element gefunden wurde. Der Unterschied besteht darin, dass der Parameter von Array.some eine Rückruffunktion ist, während der Parameter von Array.includes ein Wert ist (der zweite optionale Parameter wird nicht berücksichtigt).

Angenommen, Sie möchten wissen, ob das Element mit dem Wert im Array vorhanden ist. Sie können entweder Code schreiben: [].includes(value) oder Sie können item => item === value an Array übergeben .some als Callback-Funktion. Array.includes ist einfacher zu verwenden und Array.some ist besser kontrollierbar.

Verwenden Sie Array.reduce anstelle der Kombination aus Array.filter und Array.map

Tatsächlich ist Array.reduce nicht leicht zu verstehen. Wenn wir jedoch zuerst das ursprüngliche Array mit Array.filter filtern und dann Array.map (auf dem Ergebnis) aufrufen (um ein neues Array zu erhalten). Das scheint ein Problem zu sein. Gibt es etwas, das wir übersehen haben?

Das Problem dabei ist: Wir durchlaufen das Array zweimal. Das erste Mal besteht darin, das ursprüngliche Array zu filtern, um ein neues Array mit einer etwas kürzeren Länge zu erhalten. Der zweite Durchlauf (Anmerkung des Übersetzers: Array.map) besteht darin, das von Array.filter zurückgegebene neue Array zu verarbeiten und erneut ein neues Array zu erstellen. Um das Endergebnis zu erhalten, haben wir eine Kombination aus zwei Array-Methoden verwendet. Jede Methode verfügt über eine eigene Rückruffunktion, und das von Array.map verwendete temporäre Array wird von Array.filter bereitgestellt und kann (im Allgemeinen) nicht wiederverwendet werden.

Um solche ineffizienten Szenarien zu vermeiden, empfehle ich die Verwendung von Array.reduce. Gleiche Ergebnisse, besserer Code! Mit Array.reduce können Sie gefilterte und reduzierte Elemente in einen Akkumulator einfügen. Der Akkumulator kann eine zu erhöhende Zahl, ein zu füllendes Objekt, eine zu verbindende Zeichenfolge oder ein Array usw. sein.

Im obigen Beispiel haben wir Array.map verwendet, (aber darüber hinaus) wird empfohlen, Array.reduce zu verwenden, wobei der Akkumulator das zu verbindende Array ist. Im folgenden Beispiel werden wir je nach Wert der Variablen env diese zum Akkumulator hinzufügen oder den Akkumulator unverändert lassen (d. h. nichts tun).

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

Wie können Neulinge Arrays in JavaScript besser nutzen? (Quellcode) Vollständige Einführung. Wenn Sie mehr über JavaScript-Video-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonWie können Einsteiger Arrays in JavaScript besser nutzen? (Quellcode). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!