• 【我的前端】面向 JavaScript 开发:前端必学的4种函数式编程技术


    【我的前端】面向 JavaScript 开发:前端必学的4种函数

    函数式编程技术是现代 Wed 开发中的热门话题。这一切都是关于将应用程序框架设计为简单功能的组合,一边写更多可扩展的代码。它允许您简单的交换任何功能而不会破坏程序的另一部分,并且更容易理解和调试程序。

    在本文中我们将讨论7种可用于 JavaScript 的函数式编程技术,让您更好地了解如何在Web开发项目中应用函数式编程。

    💖💖💖💕💕💕欢迎来到本博客💕💕💕💖💖💖

    🎁支持:如果觉得博主的文章写得还说得过去或者博客对您有帮助的话,可以关注一下博主,如果三连收藏支持就更好啦!这就是给予我最大的支持!

    🎉🎉Welcome to my blog!🎉🎉

    📃个人CSDN博客主页:热爱科技的刘同学🌈🌈🌈

    1、纯函数

    如果我们发送相同的参数,纯函数会返回相同的结果。他们只是返回他们的操作结果,不看范围之外的任何东西。除了返回他们的返回值之外,纯函数不会影响任何东西。

    const helloworld = (name) => 'Hi ${name}';
    helloworld('Piumi');
    
    • 1
    • 2

    副作用是函数式编程中的一个概念,当当一个函数不尽返回一个值,而且在后台更该组件时,它就会发生,当一个函数执行时,它有可能修改一些东西。最好减少副作用。这就是纯函数的一个优点,因为它的副作用很小。

    2、避免程序循环

    纯函数式编程的一个显著特征是不变性。您将不得不抛弃标准的循环方法,例如for、while和do-while,以避免在变量初始化后发生变异(例如循环计数器)。相反,JavaScript提供了诸如map、filter、reduce和foreach等高阶函数抽象迭代过程。

    我在这里分别为foreach、map、filter和reduce各举一个例子:

    foreach:为数组中的每一个元素调用一个函数。

    let sum = 0;
    const numbers = [10, 25, 73, 84];
    numbers.forEach(addNumbers);
    
    function addNumbers(numbers) {
        sum += numbers;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    map:每个数组项映射到一个函数,函数调用的返回值帮助我们创建一个新数组,映射器函数将数组项作为输入并返回输出。

    array.map(mapper)
    
    • 1

    filter:根据条件过滤数组。在这种情况下,条件是一个函数,它获取数组中的每个元素并决定是否保存它,并且返回真实的布尔值。

    array.map(condition);
    
    • 1

    reduce:将数组减少为单个值的函数。

    array.map(reduce);
    
    • 1

    3、函数链

    在JavaScript中,函数链接是一种允许在同一对象上按照顺序调用多个函数的模式。我们可以使用这种技术使用相同的对象调用多个函数,它是代码更具可读性,并减少了冗余代码的数量。

    var obj = {
        output: 0,
        addNumber: function (p, q) {
            this.output = p + q;
            return this;
        },
        multiplyNumber: function (p){
            this.output = this.output * p;
            return this;
        } 
    };
    
    obj.addNumber(10, 20).multiplyNumber(10)
    console.log(obj.output)
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在上面的代码示例中,由于addNumber函数反映了当前的obj对象,因此返回值包含了附加的函数。我们在同一对象运行第二个函数multiplyNumber以便于它们链接在一起。

    4、Currying

    Currying是将多参数函数分解为一元(单参数)高阶函数序列的过程。

    function fsum (a, b) { 
        return a + b
    }
    
    // Currying functions
    function fsum_curry (a, b) {
        return function(b){
            return a + b
        }
    }
    fsum(10, 2) // 12
    fsum_curry(10)(2) // 12
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    这里柯里化的好处是记忆。我们现在可以记住函数调用中的某些参数,以便以后重用他们,而无需复制和重新计算。

    结论

    函数式编程在JavaScript开发人员中越来越流行,因为它简化了复杂应用程序的实用,是它们更具可读性。

    感谢您的阅读!学到了吗?记得点赞支持❤

  • 相关阅读:
    Ubuntu 20.04部署Promethues
    集合框架----源码解读HashSet篇
    RabbitMQ初步到精通-第十章-RabbitMQ之Spring客户端源码
    【电商项目实战】用户注册(详细篇)
    【从0-1成为架构师】高可用架构
    MybatisPlus使用
    TensorFlow2.0教程3-CNN
    C++笔记之C语言中常见的文件操作函数汇总
    Linux:用户态与内核态
    【各exporter、prometheus、grafana、alertManager】架构与部署
  • 原文地址:https://blog.csdn.net/weixin_41102528/article/details/126629273