Maison > interface Web > js tutoriel > Comprendre le curry JavaScript avec une application du monde réel

Comprendre le curry JavaScript avec une application du monde réel

Patricia Arquette
Libérer: 2025-01-20 14:33:11
original
157 Les gens l'ont consulté

Understanding JavaScript Currying with a Real-World Application

Avez-vous déjà rencontré le « currying » en JavaScript et vous êtes-vous demandé quel était son objectif ? Cet article démystifie le curry, illustrant ses avantages avec des exemples simples et une application pratique qui améliore la clarté et la flexibilité du code.

? Qu’est-ce que le curry ?

Le currying, une technique de programmation fonctionnelle, implique le traitement des arguments de fonction de manière séquentielle plutôt que d'un seul coup. Une fonction curry génère une autre fonction, attendant le paramètre suivant jusqu'à ce que tous les arguments soient fournis. Essentiellement, il transforme une fonction multi-arguments en une séquence de fonctions à un seul argument.

Illustrons avec une analogie et un code du monde réel :

? Construire un hamburger

Imaginez commander un hamburger. Le chef l'assemble couche par couche :

Couche 1 : Bun (premier argument) Couche 2 : Patty (deuxième argument) Couche 3 : Toppings (troisième argument)

Voici comment cela se traduit en code utilisant des fonctions régulières et curry :

? Fonction régulière : Tous les ingrédients sont passés simultanément.

<code class="language-javascript">function makeBurger(bun, patty, topping) {
    return `Your burger includes: ${bun} bun, ${patty} patty, and ${topping} topping.`;
}

const myBurger = makeBurger("Sesame", "Beef", "Cheese");
console.log(myBurger); // Output: Your burger includes: Sesame bun, Beef patty, and Cheese topping.</code>
Copier après la connexion

? Fonction curry : Les ingrédients sont ajoutés un à la fois.

<code class="language-javascript">function makeBurgerCurried(bun) {
    return function (patty) {
        return function (topping) {
            return `Your burger includes: ${bun} bun, ${patty} patty, and ${topping} topping.`;
        };
    };
}

// Usage example
const selectBun = makeBurgerCurried("Sesame");
const selectPatty = selectBun("Beef");
const myCurriedBurger = selectPatty("Cheese");

console.log(myCurriedBurger); // Output: Your burger includes: Sesame bun, Beef patty, and Cheese topping.</code>
Copier après la connexion

✍️ Explication :

Premier Appel : makeBurgerCurried("Sesame") reçoit "Sésame" et renvoie une fonction en attente de la galette.

Deuxième appel : selectBun("Beef") reçoit "Bœuf" et renvoie une fonction en attente de la garniture.

Troisième appel : selectPatty("Cheese") reçoit « Cheese », complétant la séquence et renvoyant la description du hamburger.

⭐ Curry simplifié avec fonctions fléchées

Les fonctions fléchées offrent une approche plus concise :

<code class="language-javascript">const curriedArrow = (bun) => (patty) => (topping) =>
    `Your burger includes: ${bun} bun, ${patty} patty, and ${topping} topping`;

const myArrowBurger = curriedArrow("Sesame")("Beef")("Cheese");
console.log(myArrowBurger); // Your burger includes: Sesame bun, Beef patty, and Cheese topping</code>
Copier après la connexion

⁉️Pourquoi utiliser le curry ?

Currying excelle dans les scénarios nécessitant la réutilisation de fonctions avec des arguments prédéfinis. Il améliore la réutilisabilité, la lisibilité et la modularité du code.

? Application réelle : calculateur de remise dynamique

Envisagez une plateforme de commerce électronique avec des remises échelonnées :

  • Clients réguliers : 10 % de réduction
  • Clients Premium : 20 % de réduction

Comparons les implémentations de fonctions régulières et curry :

? Fonction régulière : Moins flexible et réutilisable.

<code class="language-javascript">function calculateDiscount(customerType, price) {
    if (customerType === "Regular") return price * 0.9;
    else if (customerType === "Premium") return price * 0.8;
}

console.log(calculateDiscount("Regular", 100)); // Output: 90
console.log(calculateDiscount("Premium", 100)); // Output: 80</code>
Copier après la connexion

? Fonction curry : Hautement réutilisable et adaptable.

<code class="language-javascript">function createDiscountCalculator(discountRate) {
    return function (price) {
        return price * (1 - discountRate);
    };
}

const regularDiscount = createDiscountCalculator(0.1);
const premiumDiscount = createDiscountCalculator(0.2);

console.log(regularDiscount(100)); // Output: 90
console.log(premiumDiscount(100)); // Output: 80
console.log(regularDiscount(200)); // Output: 180</code>
Copier après la connexion

L'ajout de nouveaux types de clients est simple :

<code class="language-javascript">const studentDiscount = createDiscountCalculator(0.15);
console.log(studentDiscount(100)); // Output: 85</code>
Copier après la connexion

Conclusion

Bien qu'il semble initialement complexe, le currying simplifie la conception des fonctions, améliore la clarté du code et favorise la réutilisabilité. Intégrez le curry à vos projets pour découvrir ses avantages.

Partagez vos expériences avec le curry dans les commentaires ci-dessous ! Bon codage ! ✨

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:php.cn
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal