XDM,JS如何函数式编程?看这就够了!(一)

简介: 本瓜将借助《JavaScript 轻量级函数式编程》一书带领你先透析它的落脚点函数式编程,然后再看看 JS 为什么被称为是 “轻量的”!

image.png

盲猜一个:如果你有看过



这两篇文章,你一定会对 JS 的【函数】有更多兴趣!

如果你没兴趣?那我走?

image.png


皮一下,很舒服~ 没错!JS 就是轻量级的函数式编程!

拆解一下这句话,品味一下~


本瓜将借助《JavaScript 轻量级函数式编程》一书带领你先透析它的落脚点函数式编程,然后再看看 JS 为什么被称为是 “轻量的”


此篇是《JS如何函数式编程?看这就够了!》系列的第一篇,点赞👍关注👀持续追踪!


FP 概览



重要性


函数式编程(FP),不是一个新的概念,它几乎贯穿了整个编程史。直到最近几年,函数式编程才成为整个开发界的主流观念。


函数式编程有完善且清晰的原则,一旦我们知道这些原则,我们将能更加快速地读懂代码,定位问题。这是为什么函数式编程重要的原因!


比如:你可能写过一些命令式的代码,像 if 语句和 for 循环这样的语句。这些语句旨在精确地指导计算机如何完成一件事情。而声明式代码,以及我们努力遵循函数式编程原则所写出的代码,更专注于描述最终的结果。


函数式编程以另一种方式来思考代码应该如何组织才能使数据流更加明显,并能让读者很快理解你的思想。


记住,你编写的每一行代码之后都要有人来维护,这个人可能是你的团队成员,也可能是未来的你。


最初的函数


函数式编程不是仅仅用 function 这个关键词来编程,就像面向对象编程不仅仅是用了对象就算是。


函数的真正意义是什么?


回到最初的起点,我们心中的函数一定是这样的:

f(x) = 2x2 + 3,这是数学上真正的函数。那这和函数式编程有什么关系呢?

函数的本质是【映射】。以一个优雅的方式来描述一组值和另一组值的映射关系,即函数的输入值与输出值之间的关联关系。


在编程中,它或许有许多个输入值,或许没有。它或许有一个输出值( return 值),或许没有。


如果你计划使用函数式编程,你应该尽可能多地使用函数,而不是程序。你所有编写的 function 应该接收输入值,并且返回输出值。(这么做的原因是多方面的,后续会一一介绍)


这里,输入值就是函数传参,输出值就是return的东西。(如果你没有 return 值,或者你使用 return;,那么则会隐式地返回 undefined 值。)


思考“return”


  • 思考以下代码:
function foo(x) {
    if (x > 10) return x + 1;
    var y = x / 2;
    if (y > 3) {
        if (x % 2 == 0) return x;
    }
    if (y > 1) return y;
    return x;
}


foo(2) 返回什么? foo(4) 返回什么? foo(8), foo(12) 呢?

  • 将上述代码变形,请思考:
function foo(x) {
    var retValue;
    if (retValue == undefined && x > 10) {
        retValue = x + 1;
    }
    var y = x / 2;
    if (y > 3) {
        if (retValue == undefined && x % 2 == 0) {
            retValue = x;
        }
    }
    if (retValue == undefined && y > 1) {
        retValue = y;
    }
    if (retValue == undefined) {
        retValue = x;
    }
    return retValue;
}


这样写会更容易理解吗?


在每个 retValue 可以被设置的分支, 这里都有个守护者以确保 retValue 没有被设置过才执行。(?)


相比在函数中提早使用 return,我们更应该用常用的流控制( if 逻辑 )来控制 retValue 的赋值。到最后,我们 return retValue。

用 return 来实现流控制,会创造更多的隐含意义。

  • 再来思考以下代码:
// 通过一个函数修改变量 y 的值
var y;
function foo(x) {
    y = (2 * Math.pow( x, 2 )) + 3;
}
foo( 2 );
y;    


但是我们也可以这样写:

function foo(x) {
    return (2 * Math.pow( x, 2 )) + 3;
}
var y = foo( 2 );
y; 


后一个版本更有优势吗?

答案是肯定的:有!


后一个版本中的 return 表示一个显式输出,而前者的 y 赋值是一个隐式输出。

通常,开发人员喜欢显式模式而不是隐式模式。


为什么说后者 return 出来的就是显式的?而前者的 y 赋值是隐式的?

这个例子可以给你答案:

function sum(list) {
    var total = 0;
    for (let i = 0; i < list.length; i++) {
        if (!list[i]) list[i] = 0; // list 使用了 nums 的引用,不是对 [1,3,9,..] 的值复制,而是引用复制。
        total = total + list[i];
    }
    return total;
}
var nums = [ 1, 3, 9, 27, , 84 ];
sum( nums );            // 124


这段代码,除了 return 的输出,还有没有其它输出可能改变到函数外部参数 nums 的值?


是有的!就是在注释的一行,我们无意中改变了 nums 。


console.log(nums) // [1, 3, 9, 27, 0, 84]


JS 对数组、对象和函数都使用引用和引用复制,我们可以很容易地从函数中创建输出,即使是无心的。


这个隐式函数输出在函数式编程中有一个特殊的名称:副作用。

没有副作用的函数也有一个特殊的名称:纯函数,这个概念十分重要,后面对有更多讨论!


高阶函数


一个函数如果可以接受或返回一个甚至多个函数,它被叫做高阶函数。

其中最强大的就是:【闭包】。


我们将在的后续举例中大量使用闭包。它可能是所有函数式编程中最重要的基础。

此处举一小例:


假设你需要将两个值相加,一个你已经知道,另一个还需要后面才能知道,你可以使用闭包来记录第一个输入值:


function makeAdder(x) {
    return function sum(y){
        return x + y;
    };
}
//我们已经分别知道作为第一个输入的 10 和 37
var addTo10 = makeAdder( 10 );
var addTo37 = makeAdder( 37 );
// 紧接着,我们指定第二个参数
addTo10( 3 );            // 13
addTo10( 90 );            // 100
addTo37( 13 );            // 50


这种在连续函数调用中指定输入,是函数式编程中非常普遍的形式。

它可分为两类:偏函数应用柯里化。后续会展开。


具名函数


我们提倡要用具名函数,而不是匿名函数,这更有利于我们语义化代码,比如getPreferredName(..),操作意图很明确,并且可以很好的回溯问题,防止出现 (anonymous function)


但是 => 箭头函数除外,箭头函数还是得有效利用。

=> 箭头函数令人兴奋的地方在于它几乎完全遵循函数的数学符号,特别是像 Haskell 这样的函数式编程语言。它能简化、优化代码片段中的空间。


丢掉“this"

JavaScript 中的 this 绑定规则是真的难记,好消息是我们将把 this 丢弃掉,不去理会它。


这样做的内核原因是:this 是函数的一个隐式的输入参数。前面我们提到通常,开发人员喜欢显式模式而不是隐式模式。,这样的隐式输入违背了我们的原则。


阶段小结



函数是强大的!


  1. 我们学习函数式编程的全部理由是为了书写更具可读性的代码。
  2. 程序中,函数不仅仅是一个语句或者操作的集合,而是需要一个或多个输入(理想情况下只需一个!)和一个输出。开发人员喜欢显式输入输出而不是隐式输入输出。
  3. 函数内部的函数可以取到闭包外部变量,并记住它们以备日后使用。这是所有程序设计中最重要的概念之一,也是函数式编程的基础。
  4. 要警惕匿名函数,特别是 => 箭头函数。虽然在编程时用起来很方便,但是会对增加代码阅读的负担。
  5. 别用 this 敏感的函数。这不需要理由。


感谢阅读



我是掘金安东尼,公众号【掘金安东尼】,关注前端,也关注生活,持续输出ing......


相关文章
|
前端开发 JavaScript 数据处理
深入学习JavaScript ES8函数式编程:特性与实践指南
深入学习JavaScript ES8函数式编程:特性与实践指南
85 0
|
5月前
|
存储 JavaScript 前端开发
JavaScript——函数式编程Functor(函子)
JavaScript——函数式编程Functor(函子)
30 0
|
7月前
|
前端开发 JavaScript 开发者
函数式编程在JavaScript中的应用
【6月更文挑战第10天】本文探讨了函数式编程在JavaScript中的应用,介绍了函数式编程的基本概念,如纯函数和不可变数据。文中通过示例展示了高阶函数、不可变数据的使用,以及如何编写纯函数。此外,还讨论了函数组合和柯里化技术,它们能提升代码的灵活性和可重用性。掌握这些函数式编程技术能帮助开发者编写更简洁、可预测的JavaScript代码。
|
8月前
|
JavaScript 前端开发
JavaScript 的数组方法 map()、filter() 和 reduce() 提供了函数式编程处理元素的方式
【5月更文挑战第11天】JavaScript 的数组方法 map()、filter() 和 reduce() 提供了函数式编程处理元素的方式。map() 用于创建新数组,其中元素是原数组元素经过指定函数转换后的结果;filter() 则筛选出通过特定条件的元素生成新数组;reduce() 将数组元素累计为单一值。这三个方法使代码更简洁易读,例如:map() 可用于数组元素乘以 2,filter() 用于选取偶数,reduce() 计算数组元素之和。
53 2
|
8月前
|
JavaScript 前端开发 测试技术
JavaScript中的函数式编程:纯函数与高阶函数的概念解析
【4月更文挑战第22天】了解JavaScript中的函数式编程,关键在于纯函数和高阶函数。纯函数有确定输出和无副作用,利于预测、测试和维护。例如,`add(a, b)`函数即为纯函数。高阶函数接受或返回函数,用于抽象、复用和组合,如`map`、`filter`。函数式编程能提升代码可读性、可维护性和测试性,帮助构建高效应用。
|
8月前
|
JavaScript 前端开发 索引
JavaScript函数式编程【进阶】
JavaScript函数式编程【进阶】
61 1
|
8月前
|
存储 JavaScript 前端开发
JavaScript函数式编程[入门]
JavaScript函数式编程[入门]
59 1
|
8月前
|
前端开发 JavaScript 数据处理
深入学习JavaScript ES8函数式编程:特性与实践指南
深入学习JavaScript ES8函数式编程:特性与实践指南
125 0
|
缓存 JavaScript 前端开发
带你读《现代Javascript高级教程》十四、JavaScript函数式编程(1)
带你读《现代Javascript高级教程》十四、JavaScript函数式编程(1)
|
JavaScript 前端开发 测试技术
带你读《现代Javascript高级教程》十四、JavaScript函数式编程(2)
带你读《现代Javascript高级教程》十四、JavaScript函数式编程(2)
下一篇
开通oss服务