JavaScript函数式编程

更新日期: 2019-07-24阅读: 2.2k标签: 编程

1:基本概念

函数式编程是一种编程思维方式,并不是一些语法规则,对于复用性高的功能代码进行一定的函数封装,实现了代码的高可复用性(主要目的)。

函数式编程的特点:

函数是第一等公民,因为叫函数式编程,因此函数的地位是最高的,也就是说比起变量函数的地位更高一点。
只用表达式而不用语句,表达式就是声明式的意思,语句就是命令式的,尽量使用表达式或者是声明式的代码来组织逻辑。
没有副作用的代码,也叫做纯函数或者在一些开发框架中也叫作纯主键,纯的意思是输入一定那么输出也一定。
不修改状态。
引用透明。


2:函数是一等公民

理解:函数在整个JavaScript代码里面一般来讲有四种,第一种叫做声明函数、然后是表达式函数、匿名函数以及自执行函数。

为什么函数是一等公民?

函数声明优先级高于变量声明和函数表达式
console.log(getName);
​
getName();
​
var getName;
getName = 'Eric';
function getName(){
    console.log('function getName');
}
​
console.log(getName);
​
//ƒ getName(){
    console.log('function getName');
  }
// function getName
// Eric
函数应用
//声明函数
function getName(){
}
​
//表达式函数(直接赋给一个变量)
var getName = function(){
}
​
//匿名函数(没有名字)
setTimeout(function(){
},1000);
​
//自执行函数(IIFE)
(function(){
})();

3:纯函数

特点:对于相同的输入,永远会得到相同的输出

function getNumber(num){
    return num + Math.random();
}
不改变输入值
function getGirlGift(list){
    // 输入值改变
    list = list.map(girl => {
        girl.gift = girl.age > 18 ? 'big' : 'small';
    });
    return list;
}
不包含副作用(网络、I/O)
var array = \[1,2,3,4,5\];
array.slice(0,3);
array.slice(0,3);
// \[1, 2, 3\]
​
// 改变原数组
array.splice(0,3);
array.splice(0,3);
// \[4, 5\]
​
//网络请求
asiox.get('https://www.xxxx.com').then(res => {
    
})
​
//时间
function getDate(){
    return new Date();
}
Array函数举例
以数组为例,纯与不纯函数有哪些:
//不纯:调用数组之后改变了原数组。
array.push();       数组尾部插入
array.pop();        删除并返回数组最后一个元素
array.unshift();    数组头部插入
array.shift();      删除并返回数组第一元素
array.splice();     删除元素,并向数组添加元素
array.reverse();    颠倒数组元素的顺序
array.sort();       排序数组元素
​
​
//数组纯函数:调用数组的方法不改变原数组。
array.slice();      数组中返回选定的元素
array.concat();     连接数组,并发挥新数组
array.join();       按分隔符连接数组,返回字符串


4:函数柯里化

定义:传递给函数的一部分参数来调用它,让它返回一个函数去处理剩下的参数。

柯里化是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。例如:

// 普通的add函数
function add(x, y) {
    return x + y
}
add(1,2);
// 3
​
// 柯里化改编后
function addX(y) {
    return function (x) {
        return x + y;
    }
}
addX(2)(1);
// 3
​
// 函数不纯 \- 硬编码 \- 依赖min参数 
var min = 90; 
var isWell = score => score > min;
​
// 柯里化改编 
var min = 90; 
var chekoLevel = baseLine => (score => score > baseLine);
var isWell = chekoLevel(90);
// isWell(90)
   false
// isWell(940)
   true
​
//实际上就是把add函数的x,y两个参数变成了先用一个函数接收x然后返回一个函数去处理y参数。现在思路应该就比较清晰了,就是只传递给函数一部分参数来调用它,让它返回一个函数去处理剩下的参数。

一种对参数的缓存

用在一些区分环境的函数预缓存
已获取某些耗时操作结果缓存

5:函数组合

在函数式编程思想之前,出现过一个函数嵌套的现象,函数嵌套是一个函数的执行结果它是另外一个函数的入参,一般来讲是两层,但是两层以上或者更多也是可能的。比如下面的代码,它的意思是function13的结果作为function2的入参,然后function2的结果又作为function1的入参。这样的写法不太好理解而且容易混乱,因此在这个基础上,衍生了函数式编程的另外一个思想,叫做函数组合。

函数组合是通过另外一个函数去组合嵌套函数,但是函数本身的嵌套关系,依赖关系是不会改变的。只不过是通过另外一个函数完成一个组装。

函数嵌套
function1(function2(function13(x)));
函数组合
var compose = (function1, function2) => (x => function1(function2(x)));
​
var function1 = param => param + 1;
var function2 = param => param + 2;
var final = compose(function1, function2);
final(1);
​
// 4

6:Point Free

不要命名转瞬即逝的中间变量。

var getSplitWord = str => str.toUpperCase().split(' ');

//柯里化封装
var toUpperCase = word => word.toUpperCase();
var split = x => str => str.split(x);
var getSplitWord = compose(split(' '), toUpperCase);

7:声明式代码

var students = \[{
    name: 'Eric',
    score: 99,
    },
    {
        name: 'Iven',
        score: 59,
    }
}\];
​
//命令式
const getWell =students => {
    let result = \[\];
    for (let i = 0; i < students.length; i++){
        if (students\[i\].score >= 90){
            result.push(students\[i\])
        }
    }
    return result;
}
​
//声明式
const getWell = students => return students.filler(student => students.score >= 90);


8:高阶函数

把函数当参数,把传入的函数做一个封装。

function add(x,y,f){
    return f(x) + f(y);
}

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

常见的高阶函数有:

Array.map

var array = \[1,2,3\];
array.map(s => s + 1);
// \[2, 3, 4\]

Array.sort(排序)

Array.filter(过滤)


链接: https://www.fly63.com/article/detial/4350

程序员的笔记,编程写软件学到的 7 件事

如果你真的做出了一些东西,在面对那些令人眼花缭乱的理论知识,或是和你相似甚至比你做的更糟糕的人时大可不必谦虚。在一天结束之时,正是那些在战壕中的开发者——构建、测试和开发了代码的人,真正做了事情。

自学编程的六个技巧总结

这些事情可以帮助新手在他们漫长的旅程中学习编程。我知道我还有更多东西需要学习,并将继续学习如何永远地学习。最重要的事情说三遍,请继续,不要放弃,不要放弃,不要放弃。

谈谈Javascript异步代码优化

Javascript代码异步执行的场景,比如ajax的调用、定时器的使用等,在这样的场景下也经常会出现这样那样匪夷所思的bug或者糟糕的代码片段,那么处理好你的Javascript异步代码成为了异步编程至关重要的前提

编程到底难在哪里?

以买苹果为例说明程序员如何解决问题。程序员需要对问题进行透彻的分析,理清其涉及的所有细节,预测可能发生的所有意外与非意外的情况,列出解决方案的所有步骤,以及对解决方案进行尽量全面的测试。而这些正是我认为编程难的地方。

Blockly - 来自Google的可视化编程工具

Google Blockly 是一款基于Web的、开源的、可视化程序编辑器。你可以通过拖拽块的形式快速构建程序,而这些所拖拽的每个块就是组成程序的基本单元。可视化编程完成

我真是受够编程了

成为伟大的程序员,需要付出许多编程之外的努力。我们的大脑是有限的,每天要应付的问题复杂到足以让人精神崩溃。当工作不顺利时,多少都会有些冒名顶替症候群的感觉。

前端的编程软件哪些比较好用?

推荐8款最好用的前端开发工具供美工或者前端开发人员使用,当然若你是NB的全栈工程师也可以下载使用。Web前端开发最常见的编程软件有以下几种: 在前端开发中,有一个非常好用的工具,Visual Studio Code,简称VS code

如何保持学习编程的动力

学编程现在看起来挺简单,因为网上有丰富的各种资源。然而当你实际去学的时候就发现,还是很难!对我来说也一样。但从某天起,我决定认认真真学编程一年。后来又过了一年,又过了一年又一年……我好像有点感悟。

编程小技巧

命名最好遵循驼峰法和下划线法,并且要清楚的表达变量的意思。相对于驼峰法而言,我更喜欢下划线法。下划线法可以更清楚的看出这个变量表示的意思。比如aBigGreenBanana和一个a_big_green_banana。

CSS并不是真正的编程语言

每隔几个月就会出现一篇文章表明:CSS并不是真正的编程语言。以编程语言的标准来说,CSS过于困难。使用这门语言会很有创造性:事实确实如此,CSS不同于传统的编程,且具有缺陷,同任何标准化编程语言相比

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!