IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> javascript函数式编程上 -> 正文阅读

[JavaScript知识库]javascript函数式编程上

我们一起来学习javascript函数式编程


前言

我以前听说过函数式编程,但没有系统的学习过函数式编程,知道react 和redux高阶函数用到了函数式编程,函数式编程也是面试官比较感兴趣的话题,所以有必要深入了解一番。


提示:以下是本篇文章正文内容,下面案例可供参考

一、函数式编程是什么?

函数式编程(Function Programming)缩写FP。
函数式编程英文的叫法是Functional Programming 缩写是FP。函数式编程是一种编程范式,我们可以认为他是一种编程的风格,他和面向对象是并列的关系。函数式编程我们可以认为是一种思维的模式,我们常听说的编程范式,还有面向过程变成和面向对象编程。
函数式编程的思维方式,是把现实世界中的事物,和事物之间的联系,抽象到程序世界中。
那这样他跟我们平常写代码有什么区别呢?用函数式编程的时候我们是不可以用if的,也没有else,因为数学中不存在if和else,也没有变量和while,整个都是数学的思维,然后用js的语法来承接。可以使用递归,因为递归是数学的概念。

1.数学中的函数书写分f(x) = y,对于给定的x只会输出唯一的y,不受外部的影响。
2.函数式编程不是用函数来编程,主要将复杂的函数合成简单的函数(计算理论,或者递归论,或者拉姆达演算),运算过程尽量写成一系列嵌套的调用。
3.通俗写法 function xx(){}区别开函数和方法。方法要与指定的对象
绑定、函数可以直接调用。
4.早于第一台计算机的诞生,函数式编程的基础模型来源于 λ
(Lambda x=>x*2)演算。
5.JavaScript 是披着 C 外衣的 Lisp。(1958年,John McCarthy设计了Lisp语言,他的原意只是想做一种理论演算,用更简洁的方式定义图灵机,这种语言本质上不是一种技术,而是数学,包含了9种新思想)
6.真正的火热是随着React的高阶函数而逐步升温。
7.map & reduce他们是最常用的函数式编程的方法
特点
a.函数是”第一等公民”
b. 只用”表达式",不用"语句"
表达式是由运算符构成,并运算产生结果的语法结构。

var a = (5 + 6) / 2; //表达式:(5 + 6) / 2
var b = (function(){ return 25;})(); //表达式: (function(){ return 25;})()
foo(a*b); //表达式:a*b

语句则是由“;(分号)”分隔的句子或命令。

var a = (5 + 6) / 2; //整行,赋值语句
if(a>12) { statements} //条件语句
var o = {}; //赋值语句
(function(obj){ obj.b = 23;})(o||{}); //表达式语句

c. 没有”副作用",因为所有的互动都靠传参数。
d.不修改状态,只返回新的值,不修改系统变量。
e.应用透明,函数的运行不依赖于外部变量或"状态",只依赖于输入的参数,其他类型的语言,函数的返回值往往与系统状态有关,不同的状态之下,返回值是不一样的。这就叫"引用不透明",很不利于观察和理解程序的行为。

二、专业术语

1.纯函数

对于相同的输入,永远会得到相同的输出,而且没有任何可观察的副作用,也不依赖外部环境的状态。

var xs = [1,2,3,4,5];
// Array.slice是纯函数,因为它没有副作用,对于固定的
//输入,输出总是固定的
xs.slice(0,3);//[1, 2, 3]
xs.slice(0,3);//[1, 2, 3]
xs.splice(0,3);//[1, 2, 3]
xs.splice(0,3);//[4, 5]

优点
纯函数不仅可以有效降低系统的复杂度,还有很多很棒的特性,比如可缓存性

import _ from 'lodash';
var sin = _.memorize(x => 
Math.sin(x));
//第一次计算的时候会稍慢一点
var a = sin(1);
//第二次有了缓存,速度极快
var b = sin(1);

缺点
在不纯的版本中,checkage 不仅取决于 age,还有外部依赖的变量 min。纯的 checkage把关键数字 18 硬编码在函数内部,扩展性比较差,柯里化优雅的函数式
解决。

//不纯的
var min = 18;
var checkage = age => age > min;
//纯的,这很函数式
var checkage = age => age > 18;

2.纯度和幂等性

幂等性是指执行无数次后还具有相同的效果,同一的参数运行一次函数应该与连续两次果一致。幂等性在函数式编程中与纯度相关,但有不一致。

Math.abs(Math.abs(-42)) //42
Math.abs(Math.abs(Math.abs(-42))) //42

3.偏应用(partial application)函数

传递给函数一部分参数来调用它,让它返回一个函数去处理剩下的参数。先把部分参数传入,等需要时再调用,使用场景是不确定是否全部调用,但确定的是调用其中一部分。new promise,bind就是偏应用函数。

// 带?个函数参数 和 该函数的部分参数
const partial = (f, ...args) =>
 (...moreArgs) =>
 f(...args, ...moreArgs)
const add3 = (a, b, c) => a + b + c
// 偏应用 `2` 和 `3` 到 `add3` 给你?个单参数的函数
const fivePlus = partial(add3, 2, 3) 
fivePlus(4) //9

//bind实现
const add1More = add3.bind(null, 2, 3) 
add1More(4) //9
//bind()方法主要就是将函数绑定到某个对象,bind()会创建一个函数,函数体内的this对象的值会被绑定到传入bind()中的第一个参数的值,例如:add3.bind(null,2,3),add3函数体内的this指向的是null;
//先传递两个参数2,3,再二次执行传4

4.函数的柯里化

柯里化(Curried) 是偏应用函数的升级,偏应用函数是传多个函数,柯里化是传一个。类似于闭包,一般不应用于业务中,而应用于工具库中。

var checkage = min => (age => age > min);
var checkage18 = checkage(18);//先传一个参数18
checkage18(20);//再执行传20
const curry = (fn, arr = []) => (...args) =>
 (arg => (arg.length === fn.length ? fn(...arg) : 
curry(fn, arg)))([
 ...arr,
 ...args
 ]);
 
let curryTest = curry((a, b, c, d) => a + b + c + d);
curryTest(1, 2, 3)(4); //返回10
//[1, 2, 3].length不等于(a, b, c, d) => a + b + c + d).length,则执行curry(fn,[1,2,3]),curry(fn,[1,2,3])(4),arg现在是[1,2,3,4],arg.length等于(a, b, c, d) => a + b + c + d).length则执行1+2+3+4结果为10
curryTest(1, 2)(4)(3); //返回10
curryTest(1, 2)(3, 4); //返回10

优点
事实上柯里化是一种“预加载”函数的方法,通过传递较少的参数,得到一个已经记住了这些参数的新函数,某种意义上讲,这是一种对参数的“缓存”,是一种非常高效的编写函数的方法
缺点
柯里化的参数列表是从左向右,而setTimeout 参数在右,所以需要额外封装。

5.函数的反柯里化

反柯里化函数,从字面讲,意义和用法跟函数柯里化相比正好相反,扩大适用范围,创建一个应用范围更广的函数。使本来只有特定对象才适用的方法,扩展到更多的对象。

Function.prototype.unCurrying = function() {
//Function.prototype,就是所有函数的原型;
//Function.prototype上面承载了用于继承给所有函数的那些属性,例如:call、bind、apply
 var self = this;
 return function() {
 var obj = Array.prototype.shift.call(arguments);
 return self.apply(obj, arguments);
 };
};
var push = Array.prototype.push.unCurrying(),
 obj = {};
push(obj, "first", "two");
console.log(obj);//{0: 'first', 1: 'two', length: 2}

6.函数组合

柯里化会写出的洋葱代码 h(g(f(x))),为了解决函数嵌套的问题,我们需要用到“函数组合”,函数组合就是为了,柯里化好看。
函数组合的数据流是从右至左,因为最右边的函数首先执行,将数据传递给下一个函数以此类推,有人喜欢另一种方式最左侧的先执行,我们可以实现pipe(可称为管道、序列)来实现。它和compose所做的事情一样,只不过交换了数据方向。

7.函数组合子

命令式代码能够使用if-else和for这样的过程控制,函数
式则不能。所以我们需要函数组合子。其旨在管理函数程序执行流程,并在链式调用中对中间结果进行操作
常见的函数组合子:左偏(partial),柯里化(curry),映射(map),规约(reduce),组合(compose)

8.Point Free

把一些对象自带的方法转化成纯函数,不要命名转瞬即逝的中间变量。不使用所要处理的值,只合成运算过程,译作“无值”风格

const f = str => str.toUpperCase().split(' ');

//简化后,抽离了两个函数toUpperCase和split
var toUpperCase = word => word.toUpperCase();
var split = x => (str => str.split(x));
var f = compose(split(' '), toUpperCase);
//好处 1.toUpperCase,split 函数可以公用,2.更加快速执行和查找方法,使用"."查找方法特别慢,
f("abcd efgh");

9.声明式与命令式代码

我们一般编写一条又一条指令去让计算机执行一些动作,而声明式就要优雅很多了,我们通过写表达式的方式来声明我们想干什么,而不是通过一步一步的指示。

//命令式
let CEOs = [];
for(var i = 0; i < companies.length; i++)
 CEOs.push(companies[i].CEO)
}
//声明式
let CEOs = companies.map(c => c.CEO);

优点
函数式编程的一个明显的好处就是这种声明式的代码,对于无副作用的纯函数,我们完全可以不考虑函数内部是如何实现的,专注于编写业务代码。优化代码时,目光只需要集中在这些稳定坚固的函数内部即可。
不纯的函数式的代码会产生副作用或者依赖外部系统环境,使用它们的时候总是要考虑这些不干净的副作用。在复杂的系统中,这对于程序员的心智来说是极大的负担。

10.类SQL数据:函数即数据

以函数形式对数据建模,也就是函数即数据。

//select p.firstname from persons p where ...group by ..
<script src="lodash.js"></script>
_.mixin({
 "select":_.pluck, "from":_.chain,"where":_.filter,"groupby":_.sortByOrder});const persons = {}
_.from(persons).where().select().vallue();

11.惰性链、惰性求值、惰性函数

不会创建任何变量,并且有效消除所有循环。最后调用函数之前并不会真正的执行任何操作。这就是所谓的惰性链
当输入很大但只有一个小的子集有效时,避免不必要的函数调用
就是所谓的惰性求值
假如同一个函数被大量范围,并且这个函数内部又有许多判断来来检测函数,这样对于一
个调用会浪费时间和浏览器资源,所以当第一次判断完成后,直接把这个函数改写,不在需要判断。则是惰性函数

function createXHR(){
	var xhr=null;
	if(typeof XMLHttpRequest!='undefined'){
		xhr=new XMLHttpRequest();
		createXHR=function(){
			return XMLHttpRequest //直接返回懒函数,这样不必再往下进行。
		}
	}else{...}
}
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-02-07 13:38:22  更:2022-02-07 13:40:49 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 10:42:34-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码