深入学习JavaScript 高阶函数


Posted in Javascript onJune 11, 2019

高阶函数

高阶函数英文叫 Higher-order function,它的定义很简单,就是至少满足下列一个条件的函数:

  • 接受一个或多个函数作为输入
  • 输出一个函数

也就是说高阶函数是对其他函数进行操作的函数,可以将它们作为参数传递,或者是返回它们。 简单来说,高阶函数是一个接收函数作为参数传递或者将函数作为返回值输出的函数。

函数作为参数传递

JavaScript 语言中内置了一些高阶函数,比如 Array.prototype.map,Array.prototype.filter 和 Array.prototype.reduce,它们接受一个函数作为参数,并应用这个函数到列表的每一个元素。我们来看看使用它们与不使用高阶函数的方案对比。

Array.prototype.map

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果,原始数组不会改变。传递给 map 的回调函数(callback)接受三个参数,分别是 currentValue、index(可选)、array(可选),除了 callback 之外还可以接受 this 值(可选),用于执行 callback 函数时使用的this 值。

来个简单的例子方便理解,现在有一个数组 [1, 2, 3, 4],我们想要生成一个新数组,其每个元素皆是之前数组的两倍,那么我们有下面两种使用高阶和不使用高阶函数的方式来实现。

不使用高阶函数

// 木易杨
const arr1 = [1, 2, 3, 4];
const arr2 = [];
for (let i = 0; i < arr1.length; i++) {
arr2.push( arr1[i] * 2);
}
console.log( arr2 );
// [2, 4, 6, 8]
console.log( arr1 );
// [1, 2, 3, 4]

使用高阶函数

// 木易杨
const arr1 = [1, 2, 3, 4];
const arr2 = arr1.map(item => item * 2);
console.log( arr2 );
// [2, 4, 6, 8]
console.log( arr1 );
// [1, 2, 3, 4]

Array.prototype.filter

filter() 方法创建一个新数组, 其包含通过提供函数实现的测试的所有元素,原始数组不会改变。接收的参数和 map 是一样的,其返回值是一个新数组、由通过测试的所有元素组成,如果没有任何数组元素通过测试,则返回空数组。

来个例子介绍下,现在有一个数组 [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4],我们想要生成一个新数组,这个数组要求没有重复的内容,即为去重。

不使用高阶函数

const arr1 = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
const arr2 = [];
for (let i = 0; i < arr1.length; i++) {
if (arr1.indexOf( arr1[i] ) === i) {
arr2.push( arr1[i] );
}
}
console.log( arr2 );
// [1, 2, 3, 5, 4]
console.log( arr1 );
// [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]

使用高阶函数

const arr1 = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
const arr2 = arr1.filter( (element, index, self) => {
return self.indexOf( element ) === index;
});
console.log( arr2 );
// [1, 2, 3, 5, 4]
console.log( arr1 );
// [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]

Array.prototype.reduce

reduce() 方法对数组中的每个元素执行一个提供的 reducer 函数(升序执行),将其结果汇总为单个返回值。传递给 reduce 的回调函数(callback)接受四个参数,分别是累加器 accumulator、currentValue、currentIndex(可选)、array(可选),除了 callback 之外还可以接受初始值 initialValue 值(可选)。

  • 如果没有提供 initialValue,那么第一次调用 callback 函数时,accumulator 使用原数组中的第一个元素,currentValue 即是数组中的第二个元素。 在没有初始值的空数组上调用 reduce 将报错。
  • 如果提供了 initialValue,那么将作为第一次调用 callback 函数时的第一个参数的值,即 accumulator,currentValue 使用原数组中的第一个元素。

来个简单的例子介绍下,现在有一个数组 [0, 1, 2, 3, 4],需要计算数组元素的和,需求比较简单,来看下代码实现。

不使用高阶函数

const arr = [0, 1, 2, 3, 4];
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum += arr[i];
}
console.log( sum );
// 10
console.log( arr );
// [0, 1, 2, 3, 4]

使用高阶函数

无 initialValue 值

const arr = [0, 1, 2, 3, 4];
let sum = arr.reduce((accumulator, currentValue, currentIndex, array) => {
return accumulator + currentValue;
});
console.log( sum );
// 10
console.log( arr );
// [0, 1, 2, 3, 4]

上面是没有 initialValue 的情况,代码的执行过程如下,callback 总共调用四次。

callback accumulator currentValue currentIndex array return value
first call 0 1 1 [0, 1, 2, 3, 4] 1
second call 1 2 2 [0, 1, 2, 3, 4] 3
third call 3 3 3 [0, 1, 2, 3, 4] 6
fourth call 6 4 4 [0, 1, 2, 3, 4] 10

有 initialValue 值

我们再来看下有 initialValue 的情况,假设 initialValue 值为 10,我们看下代码。

const arr = [0, 1, 2, 3, 4];
let sum = arr.reduce((accumulator, currentValue, currentIndex, array) => {
return accumulator + currentValue;
}, 10);
console.log( sum );
// 20
console.log( arr );
// [0, 1, 2, 3, 4]

代码的执行过程如下所示,callback 总共调用五次。

callback accumulator currentValue currentIndex array return value
first call 10 0 0 [0, 1, 2, 3, 4] 10
second call 10 1 1 [0, 1, 2, 3, 4] 11
third call 11 2 2 [0, 1, 2, 3, 4] 13
fourth call 13 3 3 [0, 1, 2, 3, 4] 16
fifth call 16 4 4 [0, 1, 2, 3, 4] 20

函数作为返回值输出

这个很好理解,就是返回一个函数,下面直接看两个例子来加深理解。

isType 函数

我们知道在判断类型的时候可以通过 Object.prototype.toString.call 来获取对应对象返回的字符串,比如:

let isString = obj => Object.prototype.toString.call( obj ) === '[object String]';
let isArray = obj => Object.prototype.toString.call( obj ) === '[object Array]';
let isNumber = obj => Object.prototype.toString.call( obj ) === '[object Number]';

可以发现上面三行代码有很多重复代码,只需要把具体的类型抽离出来就可以封装成一个判断类型的方法了,代码如下。

let isType = type => obj => {
return Object.prototype.toString.call( obj ) === '[object ' + type + ']';
}
isType('String')('123'); // true
isType('Array')([1, 2, 3]); // true
isType('Number')(123); // true

这里就是一个高阶函数,因为 isType 函数将 obj => { ... } 这一函数作为返回值输出。

add 函数

我们看一个常见的面试题,用 JS 实现一个无限累加的函数 add,示例如下:

add(1); // 1
add(1)(2); // 3
add(1)(2)(3); // 6
add(1)(2)(3)(4); // 10 
// 以此类推

我们可以看到结构和上面代码有些类似,都是将函数作为返回值输出,然后接收新的参数并进行计算。

我们知道打印函数时会自动调用 toString()方法,函数 add(a) 返回一个闭包 sum(b),函数 sum() 中累加计算 a = a + b,只需要重写sum.toString()方法返回变量 a 就可以了。

function add(a) {
function sum(b) { // 使用闭包
a = a + b; // 累加
return sum;
}
sum.toString = function() { // 重写toString()方法
return a;
}
return sum; // 返回一个函数
}
add(1); // 1
add(1)(2); // 3
add(1)(2)(3); // 6
add(1)(2)(3)(4); // 10

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 Javascript
详解Node.js使用token进行认证的简单示例
May 25 Javascript
javascript防抖函数debounce详解
Jun 11 #Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 #Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 #Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 #Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 #Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 #Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 #Javascript
You might like
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
CodeIgniter基本配置详细介绍
2013/11/12 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
简单易懂的python环境安装教程
2017/07/13 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
Python中property属性实例解析
2018/02/10 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
最新pycharm安装教程
2020/11/18 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
2014年感恩母亲演讲稿
2014/05/27 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
个人自荐书范文
2015/03/09 职场文书
自荐信格式模板
2015/03/27 职场文书