Méthodes de tableau JavaScript, sous le capot, partie

Cet article poursuit notre exploration des méthodes de tableau JavaScript. Si vous êtes nouveau dans cette série, vous pouvez trouver la première partie ici. Nous examinerons plusieurs méthodes de tableau courantes (Math.max(), Math.min(), .reverse(), .filter() et .reduce()) et montrerons comment obtenir les mêmes résultats en utilisant les boucles for. Nous espérons que cette comparaison clarifiera le fonctionnement de ces méthodes.

---

Math.min() et Math.max()

Ces méthodes trouvent respectivement le plus petit et le plus grand nombre dans un ensemble. Vous pouvez fournir des nombres directement comme arguments ou utiliser un tableau avec la syntaxe spread.

<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() est clairement plus concis et moins sujet aux erreurs. Math.max() fonctionne de manière similaire, mais son implémentation de la boucle for diffère légèrement :

<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()`

Cette méthode inverse l'ordre des éléments dans un tableau, modifiant le tableau d'origine.

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

La méthode intégrée est nettement plus efficace et lisible. L'approche en boucle for nécessite la création d'un nouveau tableau et la poussée manuelle des éléments, ce qui augmente le risque d'erreurs.

`.filter()`

Cette méthode crée un nouveau tableau contenant uniquement les éléments qui réussissent une fonction de test fournie.

Considérons un ensemble de comptes bancaires, chacun avec une propriété balance. Nous filtrerons les comptes avec un solde nul.

<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() fournit une solution beaucoup plus propre et concise. La boucle for nécessite la création manuelle de tableaux et la poussée d'éléments, ce qui la rend plus sujette aux erreurs.

`.reduce()`

.reduce() applique une fonction de manière cumulative aux éléments du tableau, ce qui donne une valeur unique.

Un exemple simple consiste à additionner les éléments d'un tableau, mais calculons la moyenne :

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

Bien que les économies de code ne soient pas spectaculaires ici, .reduce() améliore quand même la lisibilité et réduit le risque d'erreurs par rapport à l'approche en boucle for.

---

Ces exemples illustrent les avantages de l'utilisation des méthodes de tableau JavaScript intégrées. Bien que les boucles for fournissent un contrôle fondamental, les méthodes offrent de la concision, de la lisibilité et un potentiel d'erreur réduit. Si vous avez des questions sur d'autres méthodes de tableau, veuillez laisser un commentaire. Partagez cet article si vous l’avez trouvé utile ! La première partie de cette série est disponible ici.

Merci d'avoir lu !

Publié à l'origine sur Medium for JavaScript en anglais simple le 13 février 2023

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!