Wie viele gängige Schleifen zur Array-Traversierung in JS kennen Sie?

Vorwort

Als grundlegende Datenstruktur spielen Arrays und Objekte in verschiedenen Programmiersprachen eine wichtige Rolle. Es ist schwer vorstellbar, wie eine Programmiersprache ohne Arrays und Objekte aussehen würde, insbesondere JS, eine schwach typisierte Sprache, die sehr flexibel ist. In diesem Artikel wird die Verwendung verglichen und es werden Vorsichtsmaßnahmen bei der allgemeinen Array- und Objekt-Traversierung getroffen.

Array-Durchlauf

Da sich JS ständig weiterentwickelt, gibt es laut ES7-Spezifikation mehr als zehn Traversierungsmethoden. Im Folgenden werden die häufig verwendeten Methoden zur Array-Traversierung vorgestellt, indem sie in Gruppen mit ähnlichen Funktionen gruppiert werden.

für, fürJeden, für ...von

const Liste = [1, 2, 3, 4, 5, 6, 7, 8,, 10, 11];

für (sei i = 0, len = Listenlänge; i < len; i++) {
  wenn (Liste[i] === 5) {
    brechen; // 1 2 3 4
    // weiter; // 1 2 3 4 6 7 8 undefiniert 10 11
  }
  konsole.log(liste[i]);
}

für (const Element der Liste) {
  wenn (Element === 5) {
    brechen; // 1 2 3 4
    // weiter; // 1 2 3 4 6 7 8 undefiniert 10 11
  }
  konsole.log(Element);
}

Liste.fürJedes((Element, Index, arr) => {
  wenn (Element === 5) zurückgeben;
  konsole.log(index); // 0 1 2 3 5 6 7 9 10
  konsole.log(Element); // 1 2 3 4 6 7 8 9 10
});

Zusammenfassung

• Alle drei durchlaufen das Array grundsätzlich von links nach rechts.
• forEach kann nicht aus der Schleife herausspringen, aber for und for ..of können break oder continue verwenden, um zu überspringen oder zu unterbrechen.
• for ...of greift direkt auf die tatsächlichen Elemente zu, for durchläuft den Array-Index und die forEach-Rückruffunktion verfügt über umfangreichere Parameter und kann alle Elemente, Indizes und ursprünglichen Arrays abrufen.
• for ...of und for werden auch ausgeführt, wenn das Array leere Elemente enthält.
  

einige, alle

Konstante Liste = [
  { name: 'Kopfnavigation', rückwärts: false },
  { name: 'Karussell', rückwärts: true },
  { Name: 'Fußzeile', rückwärts: false },
];
const someBackward = Liste.some(Element => Element.backward);
// einigeRückwärts: true
const everyNewest = list.every(item => !item.backward);
// jedesNeueste: false

Zusammenfassung

• Beide werden verwendet, um Array-Bedingungsbeurteilungen vorzunehmen und einen Booleschen Wert zurückzugeben.
• Beides kann unterbrochen werden.
• some Wenn ein Element die Bedingung erfüllt, gibt es true zurück und die Schleife wird unterbrochen. Wenn keines der Elemente die Bedingung erfüllt, wird „false“ zurückgegeben.
• every ist das Gegenteil von some. Wenn ein Element die Bedingung nicht erfüllt, gibt es false zurück und die Schleife wird unterbrochen. Wenn alle Elemente die Bedingung erfüllen, geben Sie „true“ zurück.
  

Filter, Karte

Konstante Liste = [
{ Name: 'Header-Navigation', Typ: 'nav', ID: 1 },,
{ Name: 'Karussell', Typ: 'Inhalt', ID: 2 },
{ Name: 'Fußzeile', Typ: 'nav', ID: 3 },
];
const resultList = list.filter(item => {
  konsole.log(Element);
  gibt Elementtyp zurück === 'nav';
});
// Ergebnisliste: [
// { Name: 'Header-Navigation', Typ: 'nav', ID: 1 },
// { Name: 'Fußzeile', Typ: 'nav', ID: 3 },
// ]

const neueListe = Liste.Map(Element => {
  konsole.log(Element);
  Artikel-ID zurückgeben;
});
// neueListe: [1, leer, 2, 3]

// Liste: [
// { Name: 'Header-Navigation', Typ: 'nav', ID: 1 },
// leer,
// { Name: 'Karussell', Typ: 'Inhalt', ID: 2 },
// { Name: 'Fußzeile', Typ: 'nav', ID: 3 },
// ]

Zusammenfassung

• Beide generieren ein neues Array und ändern das ursprüngliche Array nicht (ausgenommen die Bedienung von Elementobjekten in der Rückruffunktion beim Durchlaufen des Objekt-Arrays).
• Beide überspringen leere Elemente. Interessierte Studierende können es selbst ausdrucken.
• map bildet ein neues Array mit dem Rückgabewert der Rückruffunktion und die Länge des Arrays ist dieselbe wie die des ursprünglichen Arrays.
• Filter bildet ein neues Array von Elementen, die die Bedingungen der Rückruffunktion erfüllen.
• Die von Map generierten neuen Array-Elemente sind anpassbar.
• Die durch den Filter generierten neuen Array-Elemente können nicht angepasst werden und stimmen mit den entsprechenden ursprünglichen Array-Elementen überein.
  

finden, findIndex

Konstante Liste = [
{ name: 'Header-Navigation', id: 1 },
{ Name: 'Karussell', ID: 2 },
{ Name: 'Fußzeile', ID: 3 },
];
const Ergebnis = Liste.Finden((Artikel) => Artikel.ID === 3);
// Ergebnis: { Name: 'Footer', ID: 3 }
result.name = 'Untere Navigation';
// Liste: [
// { name: 'Header-Navigation', id: 1 },
// { Name: 'Karussell', ID: 2 },
// { name: 'Untere Navigation', id: 3 },
// ]

const index = list.findIndex((item) => item.id === 3);
// Index: 2
list[index].name // 'Untere Navigation';

Zusammenfassung

• Beide werden zum Suchen nach Array-Elementen verwendet.
• Die Find-Methode gibt den Wert des ersten Elements im Array zurück, das die Rückruffunktion erfüllt. Wenn es nicht existiert, wird „undefined“ zurückgegeben.
• findIndex Gibt den Index des im Array gefundenen Elements zurück, nicht seinen Wert, oder -1, wenn es nicht existiert.
  

reduzieren、reduzierenRechts

Die Reduce-Methode empfängt zwei Parameter, der erste Parameter ist die Rückruffunktion (callback) und der zweite Parameter ist der Anfangswert (initialValue).

Die Methode „reduceRight“ ist identisch mit „reduce“, außer dass sie in die entgegengesetzte Richtung (von rechts nach links) ausgeführt wird.

Die Callback-Funktion erhält vier Parameter:

• Akkumulator: MDN erklärt es als Akkumulator, aber ich denke, das ist unangemessen. Soweit ich es verstehe, sollte es das Ergebnis der Akkumulation aller Array-Elemente vor dem aktuellen Element sein, das von der Rückruffunktion verarbeitet wird.
• current: Das aktuell ausgeführte Array-Element.
• currentIndex: Der Index des aktuell ausgeführten Array-Elements.
• sourceArray: das ursprüngliche Array, d. h. das Array, für das die Reduce-Methode aufgerufen wird.
  Wenn kein Anfangswert übergeben wird, führt die Reduce-Methode die Rückruffunktion beginnend bei Index 1 aus. Wenn ein Anfangswert übergeben wird, beginnt sie bei Index 0 und führt den Rückruf kumulativ basierend auf dem Anfangswert aus.

Berechnen Sie die Summe einer Eigenschaft eines Arrays von Objekten

Konstante Liste = [
  { Name: 'links', Breite: 20 },
  { Name: 'Mitte', Breite: 70 },
  { Name: 'rechts', Breite: 10 },
];
const total = Liste.Reduce((currentTotal, item) => {
  gibt aktuelleGesamtzahl + Artikelbreite zurück;
}, 0);
// gesamt: 100

Entfernen Sie Duplikate aus einem Array von Objekten und zählen Sie die Anzahl der Wiederholungen für jedes Element

Konstante Liste = [
  { Name: 'links', Breite: 20 },
  { Name: 'rechts', Breite: 10 },
  { Name: 'Mitte', Breite: 70 },
  { Name: 'rechts', Breite: 10 },
  { Name: 'links', Breite: 20 },
  { Name: 'rechts', Breite: 10 },
];
const Wiederholungszeit = {};
const Ergebnis = Liste.Reduce((Array, Element) => {
  wenn (Wiederholungszeit[Elementname]) {
    Wiederholungszeit[Elementname]++;
    Array zurückgeben;
  }
  Wiederholungszeit[Elementname] = 1;
  gibt [...Array, Element] zurück;
}, []);
// Wiederholungszeit: { links: 2, rechts: 3, Mitte: 1 }
// Ergebnis: [
// { Name: 'links', Breite: 20 },
// { Name: 'rechts', Breite: 10 },
// { Name: 'Mitte', Breite: 70 },
// ]

Holen Sie sich den Maximal-/Minimalwert eines Objektarrays

Konstante Liste = [
  { Name: 'links', Breite: 20 },
  { Name: 'rechts', Breite: 30 },
  { Name: 'Mitte', Breite: 70 },
  { Name: 'oben', Breite: 40 },
  { Name: 'unten', Breite: 20 },
];
const max = Liste.Reduce((aktuellesItem, Item) => {
  gibt curItem.width >= item.width zurück? curItem: Element;
});
const min = Liste.Reduce((aktuellesItem, Item) => {
  gibt curItem.width zurück <= item.width ? curItem : item;
});
// max: { Name: "Mitte", Breite: 70 }
// min: { Name: "links", Breite: 20 }

Reduce ist sehr leistungsfähig. Weitere Tricks finden Sie in diesem Artikel „25 fortgeschrittene Verwendungen von Array Reduce, die Sie kennen müssen“.

Leistungsvergleich

Nachdem nun so viel gesagt wurde: Was sind die Leistungsunterschiede zwischen diesen Durchquerungsmethoden? Versuchen wir es im Chrome-Browser. Ich habe jede Schleife 10 Mal ausgeführt, die Maximal- und Minimalwerte entfernt und den Durchschnitt genommen, um den Fehler zu reduzieren.

var Liste = Array(100000).fill(1)

Konsole.Zeit('für');
für (let index = 0, len = list.length; index < len; index++) {
}
console.timeEnd('für');
// für: 2,427642822265625 ms

Konsole.Zeit('jedes');
liste.jedes(() => { return true })
console.timeEnd('jedes')
// einige: 2,751708984375 ms

Konsole.Zeit('einige');
liste.some(() => { return false })
console.timeEnd('einige')
// einige: 2,786590576171875 ms

Konsole.Zeit('foreach');
Liste.fürJeden(() => {})
Konsole.timeEnd('foreach');
// für jeden: 3,126708984375 ms

Konsole.Zeit('Karte');
Liste.map(() => {})
Konsole.timeEnd('Karte');
// Karte: 3,743743896484375 ms

Konsole.Zeit('forof');
für (let Index der Liste) {
}
console.timeEnd('fürvon')
// für: 6,33380126953125 ms

Aus den ausgedruckten Ergebnissen können wir ersehen, dass die For-Schleife die schnellste und die For...of-Schleife die langsamste ist.

Vergleich der Beendigungs- und Leistungstabellen gängiger Durchläufe

Schließlich wird es einige Unterschiede zwischen verschiedenen Browserkerneln geben, und interessierte Studenten können es auch ausprobieren.

Objektdurchquerung

Bei der Objektdurchquerung ist es häufig erforderlich, die Schlüssel und Werte eines Objekts zu durchlaufen. ES5 bietet die Möglichkeit, Objekte zu durchlaufen. Dabei handelt es sich jedoch um die „aufzählbaren Eigenschaften“ und Prototypketteneigenschaften von Objekteigenschaften. Im Folgenden werden verschiedene Methoden zur Objektdurchquerung ausgehend von der Essenz des Objektobjekts untersucht und einige Merkmale gängiger Methoden unterschieden.

für in

Objekt.prototype.fun = () => {};
const obj = { 2: 'a', 1: 'b' };
für (const i in obj) {
  konsole.log(i, ':', obj[i]);
}
// 1: b
// 2: ein
// fun : () => {} Die erweiterten Methoden der Objekt-Prototypkette werden ebenfalls durchlaufen für (const i in obj) {
  wenn (Objekt.prototype.hasOwnProperty.call(obj, i)) {
      konsole.log(i, ':', obj[i]);
    }
}
// Name: a Eigenschaften, die nicht zu ihr selbst gehören, werden von hasOwnProperty gefiltert.

Zusammenfassung

Bei Verwendung einer for in-Schleife werden alle aufzählbaren Eigenschaften zurückgegeben, auf die über das Objekt zugegriffen werden kann. Dies umfasst sowohl Eigenschaften, die in der Instanz vorhanden sind, als auch Instanzen, die im Prototyp vorhanden sind. Wenn Sie nur die Instanzeigenschaften des Objekts abrufen müssen, können Sie zum Filtern „hasOwnProperty“ verwenden.

Verwenden Sie bei Verwendung (const x in a) anstelle von (x in a), wodurch eine globale Variable erstellt wird.

Informationen zur Schleifenreihenfolge von for in finden Sie im [JavaScript Definitive Guide] (7. Ausgabe) 6.6.1.

• Listen Sie zunächst die Zeichenfolgenattribute auf, deren Namen nicht-negative Ganzzahlen sind, und zwar in numerischer Reihenfolge vom kleinsten zum größten. Diese Regel bedeutet, dass die Eigenschaften von Arrays und arrayähnlichen Objekten der Reihe nach aufgelistet werden.
• Nachdem Sie alle Eigenschaften mit arrayähnlichen Indizes aufgelistet haben, listen Sie alle verbleibenden Eigenschaften mit Zeichenfolgennamen auf (einschließlich Namen, die wie ganze Zahlen oder Gleitkommazahlen aussehen). Die Eigenschaften werden in der Reihenfolge aufgelistet, in der sie dem Objekt hinzugefügt wurden. Die in einem Objektliteral definierten Eigenschaften werden in der Reihenfolge aufgelistet, in der sie im Literal vorkommen.
• Abschließend werden die als Symbolobjekte bezeichneten Eigenschaften in der Reihenfolge aufgelistet, in der sie dem Objekt hinzugefügt wurden.
  

Objekt.Schlüssel

Objekt.prototype.fun = () => {};
const str = 'ab';
console.log(Objekt.keys(str));
// ['0', '1']
const arr = ['a', 'b'];
Konsole.log(Objekt.Schlüssel(arr));
// ['0', '1']
const obj = { 1: 'b', 0: 'a' };
Konsole.log(Objekt.Schlüssel(Objekt));
// ['0', '1']

Zusammenfassung

Wird verwendet, um alle aufzählbaren Eigenschaftswerte des Objekts selbst abzurufen, mit Ausnahme der Eigenschaften im Prototyp, und dann ein Array von Eigenschaftsnamen zurückzugeben.

Objekt.Werte

Objekt.prototype.fun = () => {};
const str = 'ab';
console.log(Objekt.Werte(str));
// ['a', 'b']
const arr = ['a', 'b'];
Konsole.log(Objekt.Werte(arr));
// ['a', 'b']
const obj = { 1: 'b', 0: 'a' };
Konsole.log(Objekt.Werte(Objekt));
// ['a', 'b']

Zusammenfassung

Wird verwendet, um alle aufzählbaren Eigenschaftswerte des Objekts selbst abzurufen, mit Ausnahme der Eigenschaften im Prototyp, und dann ein Array zurückzugeben, das aus den Eigenschaftswerten besteht.

Objekt.Einträge

const str = 'ab';
für (const [Schlüssel, Wert] von Object.entries(str)) {
    konsole.log(`${key}: ${value}`);
}
// 0: ein
// 1: b
const arr = ['a', 'b'];
für (const [Schlüssel, Wert] von Object.entries(arr)) {
    konsole.log(`${key}: ${value}`);
}
// 0: ein
// 1: b
const obj = { 1: 'b', 0: 'a' };
für (const [Schlüssel, Wert] von Object.entries(obj)) {
    konsole.log(`${key}: ${value}`);
}
// 0: ein
// 1: b

Zusammenfassung

Wird verwendet, um alle aufzählbaren Eigenschaftswerte des Objekts selbst abzurufen, mit Ausnahme der Eigenschaften im Prototyp, und dann ein zweidimensionales Array zurückzugeben. Jedes Unterarray besteht aus dem Attributnamen und dem Attributwert des Objekts. Eine Methode, die sowohl den Attributnamen als auch den Attributwert abrufen kann.

Objekt.getOwnPropertyNames

Objekt.prototype.fun = () => {};
Array.prototype.fun = () => {};
const str = 'ab';
console.log(Object.getOwnPropertyNames(str));
// ['0', '1', 'Länge']
const arr = ['a', 'b'];
console.log(Objekt.getOwnPropertyNames(arr));
// ['0', '1', 'Länge']
const obj = { 1: 'b', 0: 'a' };
console.log(Objekt.getOwnPropertyNames(obj));
// ['0', '1']

Zusammenfassung

Wird verwendet, um alle aufzählbaren Eigenschaftswerte des Objekts selbst abzurufen, mit Ausnahme der Eigenschaften im Prototyp, und dann ein Array von Eigenschaftsnamen zurückzugeben.

Zusammenfassen

Wir haben die Unterschiede zwischen mehreren häufig verwendeten Traversierungsmethoden verglichen. Nachdem wir diese verstanden haben, müssen wir bei ihrer Verwendung sorgfältig überlegen, welche Methode am besten geeignet ist. Jeder ist herzlich eingeladen, die Kommentare zu korrigieren oder zu ergänzen.

Dies ist das Ende dieses Artikels über die häufig verwendete Schleifendurchquerung von Arrays in JS. Weitere relevante Inhalte zur JS-Array-Schleifendurchquerung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!