Maison > interface Web > js tutoriel > le corps du texte

Polyfill pour les méthodes Map, Filter et Reduction en Javascript

王林
Libérer: 2024-08-16 06:18:12
original
657 Les gens l'ont consulté

Polyfill for Map, Filter, and Reduce Methods in Javascript

Carte

Il renvoie un nouveau tableau à partir du tableau d'origine, en effectuant certaines opérations (fonction de rappel) sur chaque élément du tableau. Cela ne modifie pas le tableau d'origine.

const nums = [1, 2, 3, 4];

const double = nums.map((num, i, arr) => num * 2);
console.log(double); // [2, 4, 6, 8]
Copier après la connexion

Mise en œuvre

Array.prototype.myMap = function (cb) {
  let output = [];
  for (let i = 0; i < this.length; ++i) {
    output.push(cb(this[i], i, this));
  }
  return output;
};

Copier après la connexion

Filtre

Il renvoie un nouveau tableau contenant uniquement les éléments qui satisfont à la condition donnée (c'est-à-dire pour lesquels le rappel renvoie vrai). Le tableau d'origine reste inchangé.

const nums= [1, 2, 3, 4];

const greaterThan2 = nums.filter((num, i, arr) => num > 2);
console.log(greaterThan2); // [3, 4]
Copier après la connexion

Mise en œuvre

Array.prototype.myFilter = function (cb) {
  let output = [];
  for (let i = 0; i < this.length; ++i) {
    if (cb(this[i], i, this)) output.push(this[i]);
  }
  return output;
};
Copier après la connexion

Réduire

C'est probablement le plus compliqué des trois. Cette méthode traite les éléments d’un tableau pour produire une valeur de sortie unique.

const nums = [1, 2, 3, 4];

const sum = nums.reduce((acc, num) => acc + num, 0);

console.log(sum); // 10
Copier après la connexion

Mise en œuvre

Array.prototype.myReduce = function (cb, initialValue) {
  let accumulator = initialValue;
  for (let i = 0; i < this.length; ++i) {
    accumulator = accumulator!== undefined ? cb(accumulator, this[i], i, this) : this[i];
  }
  return accumulator;
};
Copier après la connexion

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal