函数式 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 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
jquery创建div 实现代码
Apr 27 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 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
短波问题解答
2021/02/28 无线电
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
python算法学习之计数排序实例
2013/12/18 Python
Python flask框架post接口调用示例
2019/07/03 Python
基于python实现计算两组数据P值
2020/07/10 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
植物选择:Botanic Choice
2017/02/15 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
班组长工作职责
2013/12/25 职场文书
打架检讨书800字
2014/01/10 职场文书
执行总经理岗位职责
2014/02/03 职场文书
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
军训个人总结
2015/03/03 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
检举信的写法
2019/04/10 职场文书
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电