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

Cet article démystifie les méthodes de tableau JavaScript courantes (.map(), .includes(), .concat() et .flat()) en recréant leurs fonctionnalités à l'aide de boucles for. Bien que les boucles for puissent sembler moins efficaces et plus difficiles à lire, comprendre leurs mécanismes sous-jacents permet une appréciation plus approfondie des méthodes de tableau intégrées. Allons-y !

---

.map()

La méthode .map() génère un nouveau tableau en appliquant une fonction à chaque élément d'un tableau existant. Il traite uniquement les éléments non vides et laisse le tableau d'origine inchangé.

Considérons une application bancaire nécessitant une liste de noms de clients à partir d'une structure de données. Bien que .map() soit la solution la plus efficace, voyons comment y parvenir avec une boucle for :

<code class="language-javascript">const bankAccounts = [
  {
    id: 1,
    name: "Susan",
    balance: 100.32,
    deposits: [150, 30, 221],
    withdrawals: [110, 70.68, 120],
  },
  { id: 2, name: "Morgan", balance: 1100.0, deposits: [1100] },
  {
    id: 3,
    name: "Joshua",
    balance: 18456.57,
    deposits: [4000, 5000, 6000, 9200, 256.57],
    withdrawals: [1500, 1400, 1500, 1500],
  },
  { id: 4, name: "Candy", balance: 0.0 },
  { id: 5, name: "Phil", balance: 18, deposits: [100, 18], withdrawals: [100] },
];

// Using a 'for' loop:
function getAllClientNamesLoop(array) {
  const acctNames = [];
  for (const acct of array) {
    acctNames.push(acct.name);
  }
  return acctNames;
}

// Using .map():
function getAllClientNamesMap(array) {
  return array.map(acct => acct.name);
}

console.log(getAllClientNamesLoop(bankAccounts)); // Output: ['Susan', 'Morgan', 'Joshua', 'Candy', 'Phil']
console.log(getAllClientNamesMap(bankAccounts)); // Output: ['Susan', 'Morgan', 'Joshua', 'Candy', 'Phil']</code>

L'approche en boucle for nécessite de créer un tableau vide et de pousser les noms de manière itérative. La méthode .map() est nettement plus concise et lisible.

.includes()

Cette méthode vérifie si un tableau contient une valeur spécifique, renvoyant true ou false.

Construisons une fonction pour démontrer cela en utilisant une boucle for et .includes() :

<code class="language-javascript">// Using a 'for' loop:
function doesArrayIncludeLoop(array, value) {
  let isIncluded = false;
  for (const elem of array) {
    if (elem === value) {
      isIncluded = true;
      break; // Optimization: Exit loop once value is found
    }
  }
  return isIncluded;
}

// Using .includes():
function doesArrayIncludeIncludes(array, value) {
  return array.includes(value);
}

console.log(doesArrayIncludeLoop([1, 1, 2, 3, 5], 6)); // Output: false
console.log(doesArrayIncludeIncludes([1, 1, 2, 3, 5], 3)); // Output: true</code>

La version for en boucle initialise un indicateur et itère, tandis que .includes() fournit une solution directe et plus propre.

.concat()

Cette méthode fusionne deux tableaux ou plus en un seul nouveau tableau.

Voici une comparaison utilisant les boucles for et .concat() :

<code class="language-javascript">// Using 'for' loops:
function concatArraysLoop(arr1, arr2) {
  const concatenatedArray = [...arr1, ...arr2]; //Spread syntax for conciseness
  return concatenatedArray;
}

// Using .concat():
function concatArraysConcat(arr1, arr2) {
  return arr1.concat(arr2);
}

console.log(concatArraysLoop([0, 1, 2], [5, 6, 7])); // Output: [0, 1, 2, 5, 6, 7]
console.log(concatArraysConcat([0, 1, 2], [5, 6, 7])); // Output: [0, 1, 2, 5, 6, 7]</code>

Encore une fois, .concat() offre une brièveté et une lisibilité supérieures.

.flat()

La méthode .flat() aplatit un tableau imbriqué en un tableau à un seul niveau. Il accepte un paramètre de profondeur facultatif.

Aplatissons un tableau d'un niveau de profondeur en utilisant les deux méthodes :

<code class="language-javascript">// Using 'for' loops:
function flatArraysLoop(array) {
  const flattenedArray = [];
  for (const elem of array) {
    if (Array.isArray(elem)) {
      flattenedArray.push(...elem); //Spread syntax
    } else {
      flattenedArray.push(elem);
    }
  }
  return flattenedArray;
}

// Using .flat():
function flatArraysFlat(array) {
  return array.flat();
}

console.log(flatArraysLoop([1, 2, 3, [4, [5, 6]], 10])); // Output: [1, 2, 3, 4, [5, 6], 10]
console.log(flatArraysFlat([1, 2, 3, [4, [5, 6]], 10])); // Output: [1, 2, 3, 4, [5, 6], 10]</code>

Aplatir des tableaux imbriqués plus profonds avec des boucles for devient de plus en plus complexe, mettant en évidence la puissance et la simplicité de .flat(depth).

---

Cette exploration démontre l'élégance et l'efficacité des méthodes de tableau intégrées à JavaScript. La deuxième partie approfondira davantage les méthodes de tableau. N'hésitez pas à partager vos réflexions et vos questions ! (Le lien vers la deuxième partie serait ici)

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!