Créer votre propre carte, filtrer et réduire en JavaScript

Dans cet article, nous approfondissons le fonctionnement interne de ces centrales JavaScript. Nous ne nous contenterons pas de les utiliser ; nous allons les déconstruire et les reconstruire, en créant nos propres méthodes de carte, de filtrage et de réduction personnalisées à l'aide de Array.prototype. En disséquant ces fonctions, vous obtiendrez des informations inestimables sur leurs opérations, vous permettant ainsi d'exploiter efficacement les capacités de manipulation de tableaux de JavaScript.

Méthode de carte personnalisée :

La méthode map en JavaScript joue un rôle déterminant dans la transformation des tableaux en appliquant une fonction à chaque élément. Créons une méthode de cartographie personnalisée en utilisant Array.prototype :

// Custom map method for arrays
Array.prototype.customMap = function(callback) {
  const result = [];

  for (let i = 0; i < this.length; i++) {
    result.push(callback(this[i], i, this));
  }

  return result;
};

// Example usage:
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.customMap((num) => num * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

Dans cette méthode de carte personnalisée, nous parcourons chaque élément du tableau d'entrée, appliquons la fonction de rappel fournie à chaque élément et poussons le résultat dans un nouveau tableau, qui est ensuite renvoyé.

Méthode de filtre personnalisé :

La méthode filter permet de créer un nouveau tableau contenant des éléments qui satisfont une condition spécifique. Créons une méthode de filtre personnalisée à l'aide de Array.prototype :

// Custom filter method for arrays
Array.prototype.customFilter = function(callback) {
  const result = [];

  for (let i = 0; i < this.length; i++) {
    if (callback(this[i], i, this)) {
      result.push(this[i]);
    }
  }

  return result;
};

// Example usage:
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.customFilter((num) => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

Dans cette méthode de filtre personnalisée, nous parcourons chaque élément du tableau d'entrée, appliquons la fonction de rappel fournie à chaque élément, et si le rappel renvoie vrai, nous ajoutons l'élément au tableau de résultats, qui est ensuite renvoyé.

Méthode de réduction personnalisée :

Créer une méthode de réduction personnalisée implique de gérer une valeur initiale. Créons une méthode de réduction personnalisée en utilisant Array.prototype :

// Custom reduce method for arrays
Array.prototype.customReduce = function(callback, initialValue) {
  let accumulator = initialValue === undefined ? this[0] : initialValue;
  const startIndex = initialValue === undefined ? 1 : 0;

  for (let i = startIndex; i < this.length; i++) {
    accumulator = callback(accumulator, this[i], i, this);
  }

  return accumulator;
};

// Example usage:
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.customReduce((accumulator, current) => accumulator + current, 0);
console.log(sum); // 15

Maintenant, nous avons une méthode customReduce qui peut être utilisée sur n'importe quel tableau. Dans cette méthode de réduction personnalisée, nous parcourons le tableau, en commençant soit par la valeur initiale fournie, soit par le premier élément si aucune valeur initiale n'est fournie. Nous appliquons la fonction de rappel à chaque élément, mettant à jour la valeur de l'accumulateur à chaque étape, et renvoyons enfin le résultat accumulé.

Conclusion :

Comprendre le fonctionnement interne des méthodes de tableau JavaScript telles que mapper, filtrer et réduire est essentiel pour un développement JavaScript compétent. En créant des versions personnalisées de ces méthodes à l'aide de Array.prototype, nous avons acquis un aperçu de leurs principes sous-jacents. Ces méthodes personnalisées facilitent non seulement la compréhension conceptuelle, mais soulignent également la polyvalence et la puissance de JavaScript en tant que langage de programmation.

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!