函数式 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 相关文章推荐
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
js中日期的加减法
May 06 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
vue实现计算器功能
Feb 22 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
php仿discuz分页效果代码
2008/10/02 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
小学教师办公室制度
2014/02/03 职场文书
酒店节能减排方案
2014/05/26 职场文书
学雷锋标语
2014/06/25 职场文书
写得不错的求职信范文
2014/07/11 职场文书
学校与家长安全责任书
2014/07/23 职场文书
保险公司演讲稿
2014/09/02 职场文书
SpringBoot详解自定义Stater的应用
2022/07/15 Java/Android