JavaScript中的柯里化技巧 🌟

JavaScript 有许多酷炫的功能，其中一个最酷炫的概念是 柯里化。别担心，听起来好像很高大上——读完这篇博客后，你不仅会理解柯里化，还能让你的开发小伙伴们对你刮目相看！💻🔥

此处省略

柯里化可以将具有多个参数的函数转换为一系列单参数函数。这就像每次只上一道菜，而不是一次性上齐所有的菜一样！🍽️

再读一遍！！

……

🍰 为什么我们要用柯里化（Currying）呢？

1. 可重用性： 您可以创建功能的专用版本，这意味着您可以重复使用这些功能。
2. 可读性： 使代码更清晰易读，更具模块化。
3. 函数式编程风格： 函数式编程爱好者 💛 柯里化函数。

……

我们直接来看几个例子吧

简单的例子

    // 普通函数
    function add(a, b) {
        return a + b;
    }
    console.log(add(2, 3)); // 结果是 5

    // 柯里化版本
    function curriedAdd(a) {
        return function (b) {
            return a + b;
        };
    }
    console.log(curriedAdd(2)(3)); // 结果是 5

全屏模式 退出全屏

🎉 Boom！！现在你可以调用 curriedAdd(2) 并得到一个可复用的函数，用来给任何数加上2！

const add2 = curriedAdd(2);
console.log(add2(5)); // 7
console.log(add2(10)); // 12

全屏模式 退出全屏

用箭头函数探索柯里化（Currying） 🏹

有谁不喜欢短小的箭头函数呢？

    const multiply = (a) => (b) => a * b;

    console.log(multiply(3)(4)); // 输出 12

    // 创建一个乘以3的乘法器
    const triple = multiply(3);
    console.log(triple(5)); // 输出 15
    console.log(triple(10)); // 输出 30

全屏进入 退出全屏

真实世界例子 🌐

比如一个购物应用程序的筛选功能，如下：

    const filterByCategory = (category) => (product) => product.category === category;

    const products = [
        { name: "Shoes", category: "Fashion" },
        { name: "Laptop", category: "Electronics" },
        { name: "T-shirt", category: "Fashion" },
    ];

    const isFashion = filterByCategory("Fashion");

    console.log(products.filter(isFashion));
    // 输出结果: [ { name: '鞋子', category: '时尚' }, { name: 'T恤', category: '时尚' } ]

点击全屏模式，或点击退出全屏模式

拆解复杂问题的技巧 🧩 技能点

通过柯里化，就可以轻松地将问题分解成更小、更易管理的部分。这里的“柯里化”是一种编程技巧，可以很容易地将问题分解为更小、更易管理的部分。

    const greet = (greeting) => (name) => `${greeting}, ${name}!`;

    const sayHello = greet("Hello");
    console.log(sayHello("Alice")); // 你好，Alice!
    console.log(sayHello("Bob"));   // 你好，Bob!

    const sayGoodMorning = greet("早上好");
    console.log(sayGoodMorning("Charlie")); // 早上好，Charlie!

全屏/退出全屏

不想手动给函数做柯里化？那我们就写一个辅助函数吧。感觉怎么样？

const curry = (fn) => (...args) =>
    args.length >= fn.length
        ? fn(...args)
        : curry(fn.bind(null, ...args));

// 示例（Example）：
const sum = (a, b, c) => a + b + c;
const curriedSum = curry(sum);

console.log(curriedSum(1)(2)(3)); // 结果为 6
console.log(curriedSum(1, 2)(3)); // 结果为 6
console.log(curriedSum(1)(2, 3)); // 结果为 6

切换到全屏，退出全屏

这里有一个有趣的脑筋急转弯，让你的大脑转转 🧠:

    // 定义一个累加函数
    const add = (a) => (b) => b ? add(a + b) : a;

    // 输出结果为10
    console.log(add(1)(2)(3)(4)());

全屏模式 退出全屏

你觉得结果会是什么呢？下面分享一下你的想法吧！👇

柯里化是一种强大的技术，它可以简化你的代码，使代码更易于重用，并增加了一丝优雅的气息。所以，开始让你的函数进行柯里化吧，让你的 JavaScript 代码充满函数式编程的魅力，就像给代码加了一点香料一样！ 🌶️

编程愉快！💻✨