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/。这是一个外国的练习网站,只要会简单的英语看下来应该是没有问题的。

  

  最后,由于本人水平有限,能力与大神仍相差甚远,若有错误或不明之处,还望大家不吝赐教指正。非常感谢!

转载于:https://www.cnblogs.com/zaking/p/9085235.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/250197.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[mmdetection] - win10配置mmdetection(1.1和2.0) + 训练网络(faster-rcnn、mask-rcnn)

pytorch配置 - 参考 mmdetextion 配置(win10) mmdetection训练faster-rcnn (win10) mmdetection训练mask-rcnn (win10) mmdetection 2.0配置(win10) mmdetection 2.0训练Faster-RCNN&#xff08;win10) mmdetection 2.0全家桶训练&#xff08;终结版) labelme安装教程 l…

13、Spring Boot 2.x 多数据源配置

1.13 Spring Boot 2.x 多数据源配置 完整源码&#xff1a; Spring-Boot-Demos转载于:https://www.cnblogs.com/Grand-Jon/p/9999779.html

[pytorch、学习] - 3.5 图像分类数据集

参考 3.5. 图像分类数据集 在介绍shftmax回归的实现前我们先引入一个多类图像分类数据集 本章开始使用pytorch实现啦~ 本节我们将使用torchvision包,它是服务于PyTorch深度学习框架的,主要用来构建计算机视觉模型。torchvision主要由以下几部分构成: torchvision.datasets: …

python自动化第三周---文件读写

1.python文件对象提供了三个“读”方法&#xff1a; read()、readline() 和 readlines()。每种方法可以接受一个变量以限制每次读取的数据量。 read() 每次读取整个文件&#xff0c;它通常用于将文件内容放到一个字符串变量中。如果文件大于可用内存&#xff0c;为了保险起见&a…

最详细的java泛型详解

来源&#xff1a;最详细的java泛型详解 对java的泛型特性的了解仅限于表面的浅浅一层&#xff0c;直到在学习设计模式时发现有不了解的用法&#xff0c;才想起详细的记录一下。 本文参考java 泛型详解、Java中的泛型方法、 java泛型详解 1. 概述 泛型在java中有很重要的地位&a…

[pytorch、学习] - 3.6 softmax回归的从零开始实现

参考 3.6 softmax回归的从零开始实现 import torch import torchvision import numpy as np import sys sys.path.append("..") import d2lzh_pytorch as d2l3.6.1. 获取和读取数据 batch_size 256 train_iter, test_iter d2l.load_data_fashion_mnist(batch_si…

Django基础必备三件套: HttpResponse render redirect

1. HttpResponse : 它的作用是内部传入一个字符串参数, 然后发给浏览器 def index(request):return HttpResponse(ok) 2. render : 可以接收三个参数, 一是request参数, 二是待渲染的 html 模板文件, 三是保存具体数据的字典参数 def index(request):return render(request, …

React 简单实例 (React-router + webpack + Antd )

React Demo Github 地址 经过React Native 的洗礼之后&#xff0c;写了这个 demo &#xff1b;React 是为了使前端的V层更具组件化&#xff0c;能更好的复用&#xff0c;同时可以让你从操作dom中解脱出来&#xff0c;只需要操作数据就会改变相应的dom&#xff1b; 而React Nat…

[pytorch、学习] - 3.7 softmax回归的简洁实现

参考 3.7. softmax回归的简洁实现 使用pytorch实现softmax import torch from torch import nn from torch.nn import init import numpy as np import sys sys.path.append("..") import d2lzh_pytorch as d2l3.7.1. 获取和读取数据 batch_size 256 train_iter…

【模板】NTT

NTT模板 #include<bits/stdc.h> using namespace std; #define LL long long const int MAXL22; const int MAXN1<<MAXL; const int Mod998244353; int rev[MAXN],A[MAXN],B[MAXN],C[MAXN]; int fast_pow(int a,int b){int ans1;while(b){if(b&1)ans1ll*ans*a%…

centos 7 php7 yum源

rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpmrpm -Uvh https://mirror.webtatic.com/yum/el7/webtatic-release.rpm 转载于:https://www.cnblogs.com/myJuly/p/10008252.html

[pytorch、学习] - 3.9 多重感知机的从零开始实现

参考 3.9 多重感知机的从零开始实现 import torch import numpy as np import sys sys.path.append("..") import d2lzh_pytorch as d2l3.9.1. 获取和读取数据 batch_size 256 train_iter, test_iter d2l.load_data_fashion_mnist(batch_size)3.9.2. 定义模型参…

C语言逗号运算符和逗号表达式基础总结

逗号运算符的作用&#xff1a; 1&#xff0c;起分隔符的作用&#xff1a; 定义变量用于分隔变量&#xff1a;int a,b输入或输出时用于分隔输出表列 printf("%d%d",a,b) 2,用于逗号表达式的顺序运算符 语法&#xff1a;表达式1&#xff0c;表达式2&#xff0c;...,表达…

java基础-泛型举例详解

泛型 泛型是JDK5.0增加的新特性&#xff0c;泛型的本质是参数化类型&#xff0c;即所操作的数据类型被指定为一个参数。这种类型参数可以在类、接口、和方法的创建中&#xff0c;分别被称为泛型类、泛型接口、泛型方法。 一、认识泛型 在没有泛型之前,通过对类型Object的引用来…

MySQL数据库视图(view),视图定义、创建视图、修改视图

原文链接&#xff1a;https://blog.csdn.net/moxigandashu/article/details/63254901转载于:https://www.cnblogs.com/chrdai/p/9131881.html

[pytorch、学习] - 3.10 多重感知机的简洁实现

参考 3.10. 多重感知机的简洁实现 import torch from torch import nn from torch.nn import init import numpy as np import sys sys.path.append("..") import d2lzh_pytorch as d2l3.10.1. 定义模型 num_inputs, num_outputs, num_hiddens 784, 10, 256 # 参…

【汇编语言】——第三章课后总结

第三章 的书本上主要有以下几个内容&#xff1a; 1.内存中字的存储 字单元&#xff1a;即存放一个字型数据&#xff08;16位&#xff09;的内存单元&#xff0c;由两个地址连续的内存单元组成。 小端法&#xff1a;高地址内存单元中存放字型数据的高位字节&#xff0c;低地址内…

如何从 Android 手机免费恢复已删除的通话记录/历史记录?

有一个有合作意向的人给我打电话&#xff0c;但我没有接听。更糟糕的是&#xff0c;我错误地将其删除&#xff0c;认为这是一个骚扰电话。那么有没有办法从 Android 手机恢复已删除的通话记录呢&#xff1f;” 塞缪尔问道。如何在 Android 上恢复已删除的通话记录&#xff1f;如…

springBoot 登录拦截器

1、首选创建一个继承HandlerInterceptor的拦截器 import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import org.springframework.web.servlet.HandlerInterceptor; import org.springframework.web.servlet.ModelAndView; /*** 拦…

[pytorch、学习] - 3.11 模型选择、欠拟合和过拟合

参考 3.11 模型选择、欠拟合和过拟合 3.11.1 训练误差和泛化误差 在解释上述现象之前&#xff0c;我们需要区分训练误差&#xff08;training error&#xff09;和泛化误差&#xff08;generalization error&#xff09;。通俗来讲&#xff0c;前者指模型在训练数据集上表现…