JavaScript-Array-Methoden, Under the Hood, Teil

In diesem Artikel setzen wir unsere Untersuchung der JavaScript-Array-Methoden fort. Wenn Sie neu in dieser Serie sind, finden Sie Teil 1 hier. Wir untersuchen mehrere gängige Array-Methoden – Math.max(), Math.min(), .reverse(), .filter() und .reduce() – und zeigen, wie man mit for-Schleifen dieselben Ergebnisse erzielt. Dieser Vergleich wird hoffentlich klären, wie diese Methoden funktionieren.

---

Math.min() und Math.max()

Diese Methoden ermitteln jeweils die kleinsten und größten Zahlen in einer Menge. Sie können Zahlen direkt als Argumente angeben oder ein Array mit der Spread-Syntax verwenden.

<code class="language-javascript">// FIND THE MINIMUM VALUE IN AN ARRAY:
// Using a 'for' loop:
function findMinValueInArray(array) {
  let min = array[0];
  for (let i = 1; i < array.length; i++) {
    if (array[i] < min) {
      min = array[i];
    }
  }
  return min;
}
findMinValueInArray([33, -5544, 66, 55]); // returns: -5544

// Using Math.min():
function findMinValueInArray(array) {
  return Math.min(...array);
}
findMinValueInArray([33, -5544, 66, 55]); // returns: -5544</code>

Math.min() ist deutlich prägnanter und weniger fehleranfällig. Math.max() funktioniert ähnlich, aber die for-Schleifenimplementierung unterscheidet sich geringfügig:

<code class="language-javascript">// FIND THE MAXIMUM VALUE IN AN ARRAY:
// Using a 'for' loop:
function findMaxValueInArray(array) {
  let max = array[0];
  for (let i = 1; i < array.length; i++) {
    let currentNum = array[i];
    if (currentNum > max) {
      max = currentNum;
    }
  }
  return max;
}
findMaxValueInArray([33, -5544, 66, 55]); // returns: 66

// Using Math.max():
function findMaxValueInArray(array) {
  return Math.max(...array);
}
findMaxValueInArray([33, -5544, 66, 55]); // returns: 66</code>

`.reverse()`

Diese Methode kehrt die Reihenfolge der Elemente in einem Array um und verändert das ursprüngliche Array.

<code class="language-javascript">// REVERSE ARRAY ELEMENTS
// Using a 'for' loop:
function reverseArray(array) {
  let reversedArray = [];
  for (let i = array.length - 1; i >= 0; i--) {
    reversedArray.push(array[i]);
  }
  return reversedArray;
}
reverseArray([1, 2, 3, 4, 5]); // returns: [5, 4, 3, 2, 1]

// Using .reverse():
function reverseArray(array) {
  return array.reverse();
}
reverseArray([1, 2, 3, 4, 5]); // returns: [5, 4, 3, 2, 1]</code>

Die integrierte Methode ist deutlich effizienter und lesbarer. Der for-Schleifenansatz erfordert das Erstellen eines neuen Arrays und das manuelle Verschieben von Elementen, was das Fehlerrisiko erhöht.

`.filter()`

Diese Methode erstellt ein neues Array, das nur Elemente enthält, die eine bereitgestellte Testfunktion bestehen.

Betrachten wir eine Reihe von Bankkonten, jedes mit einer balance Immobilie. Wir filtern nach Konten mit einem Nullsaldo.

<code class="language-javascript">// Using a 'for' loop:
function getClientWithNoMoney(array) {
  let acctsWithZeroBalance = [];
  for (let account of array) {
    if (account.balance === 0) {
      acctsWithZeroBalance.push(account);
    }
  }
  return acctsWithZeroBalance;
}

// Using .filter():
function getClientWithNoMoney(array) {
  return array.filter((account) => account.balance === 0);
}</code>

.filter() bietet eine viel sauberere und prägnantere Lösung. Die for-Schleife erfordert eine manuelle Array-Erstellung und Element-Pushing, wodurch sie anfälliger für Fehler ist.

`.reduce()`

.reduce() wendet eine Funktion kumulativ auf die Array-Elemente an, was zu einem einzelnen Wert führt.

Ein einfaches Beispiel ist das Summieren von Array-Elementen, aber berechnen wir den Durchschnitt:

<code class="language-javascript">// With 'for' loop:
function getAverage(array) {
  let sum = 0;
  for (let i = 0; i < array.length; i++) {
    sum += array[i];
  }
  return sum / array.length;
}

// Using .reduce():
function getAverage(array) {
  return array.reduce((cv, acc) => {
      return cv + acc;
    }) / array.length;
  );
}
getAverage([10, 20, 30, 40]); // returns: 25</code>

Während die Codeeinsparungen hier nicht dramatisch sind, .reduce() wird dennoch die Lesbarkeit verbessert und das Fehlerpotenzial im Vergleich zum for Schleifenansatz verringert.

---

Diese Beispiele veranschaulichen die Vorteile der Verwendung integrierter JavaScript-Array-Methoden. Während for-Schleifen eine grundlegende Kontrolle bieten, bieten die Methoden Prägnanz, Lesbarkeit und ein reduziertes Fehlerpotenzial. Wenn Sie Fragen zu anderen Array-Methoden haben, hinterlassen Sie bitte einen Kommentar. Teilen Sie diesen Artikel, wenn Sie ihn hilfreich fanden! Teil 1 dieser Serie ist hier verfügbar.

Danke fürs Lesen!

Ursprünglich veröffentlicht auf Medium für JavaScript in einfachem Englisch am 13. Februar 2023

Das obige ist der detaillierte Inhalt vonJavaScript-Array-Methoden, Under the Hood, Teil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!