函数式 JavaScript(一)简介


Posted in Javascript onJuly 07, 2014

让我们假装现在要完成一个任务:尽可能按照函数式语言的原则来写JavaScript代码。

接下来一系列文章就是为了让你们和我一起开始这样一段旅程。首先,我们需要纠正一些你们脑子中可能有的对函数式语言错误的概念。

JS语言中的函数式被严重误解。

很显然,有相当多的开发者要每天用JavaScript的函数式范式 。我想说有更大一部分JavaScript 开发者没有真正理解这些东西。

我认为造成这个的原因是绝大多数用于Web服务器端的开发语言都是来源于C,而大家都知道这些语言不是函数式语言。

一般有两个层面的困惑。第一层是关于以下示例中的用法,这是jQuery中非常常见的用法:

$(".signup").click(function(event){
    $("#signupModal").show();
    event.preventDefault();
});

在上面这段代码中:我们传了一个匿名函数作为参数,这就是在JavaScript 中臭名昭著的回调函数。这些函数会被调用吗?根本不会!

上面这个例子说明了函数式语言的一个关键特征:函数是一种参数。另一方面,这个例子只用三行代码违反了几乎所有能违反的函数式编程范式。

第二层的疑惑是更微妙的。看看这个:只有少数时髦的JS开发者是这样看自己的:

嗯,真不错!但是我已经完全了解函数式编程,我在所有的项目中都用了Underscore.js。

Underscore.js是一个非常著名并且随处可见的JavaScript 库。举个例子:假设我有一组词,并且我需要每个词对应的前两个字母。这用Underscore.js来写非常简单:

var firstTwoLetters = function(words){
    return _.map(words,function(word){
        return _.first(word,2);
    });
};

看这个JavaScript 例子。我用了函数式中精致又实用的函数:_.map和_.first。对于这个大家有什么想法?

虽然underscore.js和 _.map这样的函数都是很有用的函数式范式,但是像这个例子中这样把这些东西放在一起还是让我感到有些难以理解。我们真的需要这样做吗?

如果我们开始思考怎样才能更加“函数式”,也许我们可以把上面的例子改写成这样:

// ...a little bit of magic
var firstTwoLetters = map(first(2));

仔细想想,这一行代码和上面的5行是一样的效果。很多词只是参数或占位符。真正的逻辑在于把map函数、first函数和常量2用有意义的方式组合在一起。

有些人可能在想:这个例子中的神奇之处在哪里?毕竟,说任何一个例子神奇都有点像吹嘘,对吧?

我正打算用接下来的两篇文章来解释上面这个例子到底神奇在哪,如果你好奇的话,可以继续往下看。

这一系列博客是为了帮助大家怎样把函数式编程的美妙之处应用到你的JavaScript代码中。

下一节中,我将讨论JavaScript 语言中函数式及非函数式的多种元素。有了这些知识,我们可以通过把这些元素整合在一起,慢慢的在脑中形成函数式编程的完整体系,并且理解它们在JavaScript中的表现。

Javascript 相关文章推荐
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 Javascript
原生js实现自定义滚动条组件
Jan 20 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 #Javascript
jquery easyui使用心得
Jul 07 #Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 #Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 #Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 #Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 #Javascript
我的Node.js学习之路(一)
Jul 06 #Javascript
You might like
source.php查看源文件
2006/12/09 PHP
php Undefined index的问题
2009/06/01 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
PHP单链表的实现代码
2016/07/05 PHP
laravel学习教程之存取器
2016/07/30 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
webpack file-loader和url-loader的区别
2019/01/15 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
spyder常用快捷键(分享)
2017/07/19 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
Python 支付整合开发包的实现
2019/01/23 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
一行python实现树形结构的方法
2019/08/09 Python
Wallis官网:英国女装零售商
2020/01/21 全球购物
信访工作者先进事迹
2014/01/17 职场文书
公关活动策划方案
2014/05/25 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
导游词之无锡梅园
2019/11/28 职场文书
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
Python读取和写入Excel数据
2022/04/20 Python