函数式 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常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
JS运算符简单用法示例
Jan 19 Javascript
js实现计算器功能
Aug 10 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 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
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
JavaScript中的其他对象
2008/01/16 Javascript
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
python的urllib模块显示下载进度示例
2014/01/17 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
python 输出所有大小写字母的方法
2019/01/02 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
信息服务专业毕业生求职信
2014/03/02 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
自我推荐信怎么写
2015/03/24 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
react合成事件与原生事件的相关理解
2021/05/13 Javascript
JS的深浅复制详细
2021/10/16 Javascript
js 数组 fill() 填充方法
2021/11/02 Javascript
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS