js算法初窥06(算法模式03-函数式编程)
在解释什么是函数式编程之前,我们先要说下什么是命令式编程,它们都属于编程范式的一种。命令式编程其实就是一块一块的代码,其中包括了我们要执行的逻辑或者判断或者一些运算。也就是按部就班的一步一步完成我们所需要的逻辑。而函数式编程则是类似于一个函数一个函数的调用。我们来看代码,更清晰的理解一下函数式编程与命令式编程的区别。
//这是命令式
var printArray = function (array) {
for (var i = 0; i < array.length; i++) {
console.log(array[i])
}
}
printArray([1,2,3,4,5]);
//函数式
var forEach = function (array,action) {
for (var i = 0; i < array.length; i++) {
action(array[i])
}
} var logItem = function (item) {
console.log(item)
} forEach([2,3,4,5,6],logItem)
我们先来看看上面的代码做了什么——“遍历数组,然后打印数组的每一项”。在命令式编程中,我们一步一步的完成了这句话。先遍历数组,然后打印每一项元素。那么我们再来看函数式编程,我们先声明了两个函数,一个是遍历数组元素的forEach(这里的action参数其实就是一个回调函数),一个是打印每一项的logItem。我们把每一步骤的需要操作的逻辑都用函数来区分开,最后再调用函数来执行运算。
在有了ES6之后,我们可以更加方便的用函数式编程范式来编写我们的代码,下面我们再来看一个例子。
//找出数组中元素最小的值
//代码十分简单,我们假设数组的第一个元素是最小的并赋值给minVal变量
//遍历除第一项元素以外的所有数组内元素并与minVal比较,如果当前的minVal比array[i]还要大,那么就把minVal替换成array[i];
//最后返回结果
var findMinValInArray = function (array) {
var minVal = array[0];
for (var i = 1; i < array.length; i++) {
if(minVal > array[i]) {
minVal = array[i];
}
}
return minVal;
}
console.log(findMinValInArray([7,8,9,5,31,2]));
//那么我们其实可以更简单的实现上面的方法,比如Math.min以及解构操作符(...)
const _min = function (array) {
return Math.min(...array);
}
console.log(_min([5,6,9,3,1]));
//我们还可以用ES6的箭头函数,让我们的代码更好看一些。
const min = arr => Math.min(...arr);
console.log(min([2,3,9,4,8]))
上面代码中Math.min是一个方法,返回参数中的最小值,参数可以是无限个。那么还有ES6的箭头函数以及扩展运算符(...)。这里不做详细的解释,附上连接地址,大家可以更为详细的知道什么是箭头函数以及扩展运算符。
那么,接下来我们看看如何利用我们前面已经学过的数组方法来让我们的代码更加“函数式”。
//我们先看一个命令式编程的例子
var daysOfWeek = [
{name:"Monday",value:1},
{name:"Tuesday",value:2},
{name:"Wednesday",value:7},
]
var daysOfWeekValues_ = [];
for (var i = 0; i < daysOfWeek.length; i++) {
daysOfWeekValues_.push(daysOfWeek[i].value);
} //再来看看函数式编程的样子
var daysOfWeekValues = daysOfWeek.map(function (day) {
//这个day其实就是数组中的每一项,具体可以去我前面的文章查看map的参数
return day.value;
})
console.log(daysOfWeekValues); //我们还可以使用filter来过滤一个数组的值。
//比如:
//命令式
var positiveNumbers_ = function (array) {
var positive = [];
for (var i = 0; i < array.length; i++) {
if(array[i] >= 0) {
positive.push(array[i]);
}
} return positive;
}
console.log(positiveNumbers_([-1,2,1,-2]));
//函数式
var positiveNumbers = function (array) {
return array.filter(function (num) {
return num >= 0;
})
} console.log(positiveNumbers([1,2,-1,-2,-5])); //我们再来看看reduce函数
//命令式
var sumValues = function (array) {
var total = array[0];
for (var i = 1; i < array.length; i++) {
total += array[i];
}
return total;
}
console.log(sumValues([1,2,3,4,5]));
//函数式
var sum_ = function (array) {
return array.reduce(function (a,b) {
return a + b;
})
} console.log(sum_([1,2,3,4,5]))
//我们还可以用ES6的方法改进一下
var sum = arr => arr.reduce((a,b) => a + b);
console.log(sum([1,2,3,4,5]))
上面我们看了一些函数式编程的例子,代码都不复杂,很容易理解。所以就没做详细的注释。那么我们下面再看最后一个有趣的例子。
//我们来用命令式编程实现一个二维数组合并为一维数组的方法
var mergeArrays_ = function (arrays) {
var count = arrays.length,
newArray = [],
k = 0; for (var i = 0; i < count; i++) {
for (var j = 0; j < arrays[i].length; j++) {
newArray[k++] = arrays[i][j];
}
}
return newArray;
} console.log(mergeArrays_([[1,2,3],[4,5],[6]])); //我们最后再看看函数式的写法
var mergeArraysConcat = function (arrays) {
return arrays.reduce(function (p,n) {
return p.concat(n);
})
};
console.log(mergeArraysConcat([[1,2,3],[4,5],[6],[7]])) //我们再来看看牛逼的方法
const mergeArrays = (...arrays) => [].concat(...arrays);
console.log(mergeArrays([1,2,3],[4,5],[6],[7],[8]));
//这一行代码需要解释下。我们来看看(...arrays)会变成什么
console.log(...[[1,2,3],[4,5],[6],[7],[8]])//一个一个单独的数组
//然后我们再用一个空数组去合并参数中的每一个单独的数组就可以了
到这里我们函数式编程的简单讲解就结束了,上面的内容其实不过万分之一,希望能让大家对代码的编写打开了另一扇窗户,其实函数式编程在我们的实际工作中也是极为有用的。希望大家可以认真对待和学习,最后,附上一个可以学习函数式编程的网址:http://reactivex.io/learnrx/。这是一个外国的练习网站,只要会简单的英语看下来应该是没有问题的。
最后,由于本人水平有限,能力与大神仍相差甚远,若有错误或不明之处,还望大家不吝赐教指正。非常感谢!
js算法初窥06(算法模式03-函数式编程)的更多相关文章
- js算法初窥05(算法模式02-动态规划与贪心算法)
在前面的文章中(js算法初窥02(排序算法02-归并.快速以及堆排)我们学习了如何用分治法来实现归并排序,那么动态规划跟分治法有点类似,但是分治法是把问题分解成互相独立的子问题,最后组合它们的结果,而 ...
- js算法初窥01(排序算法01-冒泡、选择、插入)
排序,我想大家一定经历过或者正在经历着.或许你不懂算法,对排序算法一无所知,但是你一定用过一些第三方库的api来一键排序,那么,在你享受便捷的同时,你是否想过它的底层是如何实现的?这样的算法实现方式是 ...
- Python <算法思想集结>之初窥基础算法
1. 前言 数据结构和算法是程序的 2 大基础结构,如果说数据是程序的汽油,算法则就是程序的发动机. 什么是数据结构? 指数据在计算机中的存储方式,数据的存储方式会影响到获取数据的便利性. 现实生活中 ...
- js算法初窥03(简单搜索及去重算法)
前面我们了解了一些常用的排序算法,那么这篇文章我们来看看搜索算法的一些简单实现,我们先来介绍一个我们在实际工作中一定用到过的搜索算法--顺序搜索. 1.顺序搜索 其实顺序搜索十分简单,我们还是以第一篇 ...
- js算法初窥03(搜索及去重算法)
前面我们了解了一些常用的排序算法,那么这篇文章我们来看看搜索算法的一些简单实现,我们先来介绍一个我们在实际工作中一定用到过的搜索算法——顺序搜索. 1.顺序搜索 其实顺序搜索十分简单,我们还是以第一篇 ...
- js算法初窥04(算法模式01-递归)
终于来到了有点意思的地方--递归,在我最开始学习js的时候,基础课程的内容就包括递归,但是当时并不知道递归的真正意义和用处.我只是知道,哦...递归是自身调用自身,递归要记得有一个停止调用的条件.那时 ...
- js算法初窥02(排序算法02-归并、快速以及堆排序)
上一篇,我们讲述了一些简单的排序算法,其实说到底,在前端的职业生涯中,不涉及node.不涉及后台的情况下,我目前还真的没想到有哪些地方可以用到这些数据结构和算法,但是我在前面的文章也说过了.或许你用不 ...
- js算法初窥07(算法复杂度)
算法复杂度是我们来衡量一个算法执行效率的一个度量标准,算法复杂度通常主要有时间复杂度和空间复杂度两种.时间复杂度就是指算法代码在运行最终得到我们想要的结果时所消耗的时间,而空间复杂度则是指算法中用来存 ...
- 如何编写高质量的 JS 函数(4) --函数式编程[实战篇]
本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/ZoXYbjuezOWgNyJKmSQmTw作者:杨昆 [编写高质量函数系列],往期精彩内容: ...
随机推荐
- 课程5:Spring框架2016版视频--视频列表目录
\day01视频\01-今天内容介绍.avi; \day01视频\02-spring的相关概念.avi; \day01视频\03-spring的ioc底层原理(一).avi; \day01视频\04- ...
- SSH开发环境搭建
断断续续学习hibernate也有一段时间了,在这里研究一下SSH开发环境的搭建过程,自己简单的搭建一个SSH的开发环境.采用maven搭建. 0.项目结构: 1.导包:(maven项目) pom.x ...
- Netty+SpringBoot写一个基于Http协议的文件服务器
本文参考<Netty权威指南> NettyApplication package com.xh.netty; import org.springframework.boot.SpringA ...
- 基于Python的机器学习实战:AadBoost
目录: 1. Boosting方法的简介 2. AdaBoost算法 3.基于单层决策树构建弱分类器 4.完整的AdaBoost的算法实现 5.总结 1. Boosting方法的简介 返回目录 Boo ...
- Dubbo启动时检查
Dubbo在启动时会检查服务提供者所提供的服务是否可用,默认为True. (1).单个服务关闭启动时检查(check属性置为false) 1).基于xml文件配置方式 <!--3.声明需要调用的 ...
- Python中【__all__】的用法
Python中[__all__]的用法 转:http://python-china.org/t/725 用 __all__ 暴露接口 Python 可以在模块级别暴露接口: __all__ = [&q ...
- freeRTOS中文实用教程3--中断管理之中断服务例程中使用队列
1.前言 消息队列不仅可以用于事件通信,还可以用来传递数据 2.实例说明消息队列的执行过程 3.主要API API名称 说明 参数 返回值 xQueueSendFromISR()完全等同于 xQueu ...
- ubuntu 删除自带软件的方法
$ sudo dpkg -l | grep -i "need2del" $ sudo dpkg -P 或者: $ sudo apt-get --purge remove need2 ...
- telnet不能用!!!提示:-bash: telnet: command not found
1.[root@localhost ~]# telnet 2. 查询了是否安装Telnet包,结果如下: telnet-server-0.17-47.el6.i686 [xinetd (pid ...
- Python-2d形变 动画 表格
一.形变 /*1.形变参考点: 三轴交界点*/ transform-origin: x轴坐标 y轴坐标; /*2.旋转 rotate deg*/ transform: rotate(720deg); ...