JS函数式编程实现XDM一


Posted in Javascript onJune 16, 2022

盲猜一个:如果你有看过

《medium 五万赞好文-《我永远不懂 JS 闭包》》

你一定会对 JS 的【函数】有更多兴趣!

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

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

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

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

FP 概览

重要性

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

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

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

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

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

最初的函数

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

函数的真正意义是什么?

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

JS函数式编程实现XDM一

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 是函数的一个隐式的输入参数。前面我们提到通常,开发人员喜欢显式模式而不是隐式模式。,这样的隐式输入违背了我们的原则。

阶段小结

函数是强大的!

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

以上就是JS函数式编程实现XDM一的详细内容,更多关于JS函数式编程XDM的资料请关注三水点靠木其它相关文章!


Tags in this post...

Javascript 相关文章推荐
Javascript 各浏览器的 Javascript 效率对比
Jan 23 Javascript
自己的js工具 Cookie 封装
Aug 21 Javascript
简单的代码实现jquery定时器
Jan 03 Javascript
Android中的jQuery:AQuery简介
May 06 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
原生js简单实现放大镜特效
May 16 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
Vue单文件组件开发实现过程详解
Jul 30 Javascript
正则表达式基础与常用验证表达式
Jun 16 #Javascript
使用compose函数优化代码提高可读性及扩展性
html中两种获取标签内的值的方法
Jun 16 #jQuery
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 #Javascript
vue如何在data中引入图片的正确路径
Jun 05 #Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 #Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 #Vue.js
You might like
提问的智慧
2006/10/09 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
详解React 条件渲染
2020/07/08 Javascript
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
python实现图像识别功能
2018/01/29 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
python 整数越界问题详解
2019/06/27 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
财务副总经理工作职责
2013/11/25 职场文书
信息技术专业个人自我评价
2013/12/11 职场文书
经理秘书找工作求职信
2013/12/19 职场文书
网上签名寄语活动留言
2014/01/18 职场文书
大学生咖啡店创业计划书
2014/01/21 职场文书
演讲开场白台词大全
2015/05/29 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers