js函数式编程

更新日期: 2018-12-24阅读量: 1314标签: 函数

定义

函数式编程(Functional Programming,后面简称FP),维基百科的定义是:

是一种编程范型,它将电脑运算视为数学上的函数计算,并且避免使用程序状态以及易变对象。函数编程语言最重要的基础是λ演算(lambda calculus)。而且λ演算的函数可以接受函数当作输入(引数)和输出(传出值)。比起命令式编程,函数式编程更加强调程序执行的结果而非执行的过程,倡导利用若干简单的执行单元让计算结果不断渐进,逐层推导复杂的运算,而不是设计一个复杂的执行过程。

我来尝试理解下这个定义,好像就是说,在敲代码的时候,我要把过程逻辑写成函数,定义好输入参数,只关心它的输出结果。而且可以把函数作为输入输出。感觉好像平常写js时,就是这样的嘛!


特性

网上FP的定义与特性琳琅满目。各种百科、博客、一些老师的网站上都有大同小异的介绍。为了方便阅读,我列下几个好像比较重要的特性,并附上我的第一眼理解。

  1. 函数是一等公民。就是说函数可以跟其他变量一样,可以作为其他函数的输入输出。喔,回调函数就是典型应用。

  2. 不可变量。就是说,不能用var跟let咯。按这要求,我似乎有点难写代码

  3. 纯函数。就是没有副作用的函数。这个好理解,就是不修改函数外部的变量。

  4. 引用透明。这个也好理解,就是说同样的输入,必定是同样的输出。函数内部不依赖外部状态,如一些全局变量。

  5. 惰性计算。大意就是:一个表达式绑定的变量,不是声明的时候就计算出来,而是真正用到它的时候才去计算。


filter的使用

var animals = [
 {name:'Fluffykins',species:'rabbit'},
 {name:'Caro',species:'dog'},
 {name:'Hamilton',species:'dog'},
 {name:'Harold',species:'fish'},
 {name:'Ursula',species:'cat'},
 {name:'Jimmy',species:'fish'}
]

//第一种做法
var dogs = []
for (var i = 0; i < animals.length; i++){
    if(animals[i].species === 'dog'){
        dog.push(animals[i])
    }
}

//第二种做法
var dogs = animals.filter(function(animal){
    return animal.species === 'dog'
})

//优化
let isDog = unction(animal){
    return animal.species === 'dog'
}
var dogs = animals.filter(isDog)

map的使用

var animals = [
 {name:'Fluffykins',species:'rabbit'},
 {name:'Caro',species:'dog'},
 {name:'Hamilton',species:'dog'},
 {name:'Harold',species:'fish'},
 {name:'Ursula',species:'cat'},
 {name:'Jimmy',species:'fish'}
]

//第一种做法
var names = []
for ( var i = 0 ; i < animals.length; i++){
    names.push(animals[i].name)
}

//第二种做法
var names = animals.map(function(animal){
    return animal.name
})

//优化
var names = animals.map((animal) => animal.name)

reduce

var orders = [
 {amount:250},
 {amount:400},
 {amount:100},
 {amount:325}
]

//第一种做法
var totalAmount = 0
for ( var i = 0; i < orders.length; i++){
    totalAmount = orders[i].amount
}

//第二种做法
var totalAmount = orders.reduce(function(sum,order){
    return sum + order.amount
},0)

//优化

var totalAmount = orders.reduce((sum,order) => sum + order.amount
},0)

curry

let dragon = (name,size,element) => 
`${name} is a ${size} dragon that breathes ${element} !`

console.log(dragon('fluffykins','tiny','lightling'))

//curry
let dragon = 
  name => 
    size =>
       element => 
            `${name} is a ${size} dragon that breathes ${element} !`
            
console.log(dragon('fluffykins')('tiny')('lightling'))


//还可以
let dragon = 
  name => 
    size =>
       element => 
            `${name} is a ${size} dragon that breathes ${element} !`
            
let fluffykinDragon =  dragon('fluffykins')

console.log(fluffykinDragon('tiny')('lightling'))

//甚至是这样
let dragon = 
  name => 
    size =>
       element => 
            `${name} is a ${size} dragon that breathes ${element} !`
            
let fluffykinDragon =  dragon('fluffykins')
let tinyDragon = fluffykinDragon('tiny')
console.log(tinyDragon('lightling'))

//使用lodash
import _ from 'lodash'

let dragon =(name,size,element) => (
     `${name} is a ${size} dragon that breathes ${element} !`
)

dragon = _.curry(dragon)

let fluffykinDragon =  dragon('fluffykins')
let tinyDragon = fluffykinDragon('tiny')

console.log(tinyDragon('lightling'))
let dragons = [
 {name:'fluffykins',element:'lightning'},
 {name:'nomi',element:'lightning'},
 {name:'karo',element:'fire'},
 {name:'doomer',element:'timewrap'},
]

let hasElement = (element,obj) => obj.element === element

let lightingDragons = dragons.filter(x => hasElement('lightning',x)

console.log(lightingDragons)

//使用loadash_curry改造
import _ from 'lodash'

let hasElement = _.curry(element,obj) => obj.element === element

let lightingDragons = dragons.filter(hasElement('lightning'))

console.log(lightingDragons)

递归

let categories = [
    {
        id:'animals',
        'parent':null
    },
    {
        id:'mammals',
        'parent':'animals'
    },
    {
        id:'cats',
        'parent':'mammals'
    },
    {
        id:'dogs',
        'parent':'mammals'
    },
    {
        id:'chihuahua',
        'parent':'dogs'
    },
    {
        id:'labrador',
        'parent':'dogs'
    },
    {
        id:'persian',
        'parent':'cats'
    },
    {
        id:'siamese',
        'parent':'cats'
    }
]

let makeTree = (categories,parent) => {
    let node = {
        
    }
    categories.filter(c => c.parent === parent)
    .forEach(c =>
    node[c.id] = makeTree(categories,c.id))
    return node
}


console.log(
    jsON.stringify(
        makeTree(categories,null)
        ,null
        ,2
    )
)
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

js中函数表达式和自执行函数表达式的用法总结

立即调用函数表达式:给函数体加大括号,在有变量声明的情形下,没有任何区别.但是,如果只是【自动执行】的情形下,就会不同,因为,一个匿名函数,不赋值或函数体不加小括号,是不能自动执行的

Js函数表达和闭包

函数声明提升:函数可以先用,声明在下面自动给提到上面来,函数表达式=后面的是匿名函数,又叫拉姆达函数,他一般可以被用来当成值使用(可以用来return),函数自己调用自己就叫递归,没啥好说的。当函数赋值给另一个函数时会导致重新调用函数名称不同而调用失败

浅析js的工厂函数、构造函数

首先,说下工厂函数。顾名思义,就好比一个工厂一样,可以批量制造某种类型的东西。其实说白了就是封装了个方法减少重复工作,相信稍微有点码龄的人都懂。上代码:

js中的立即执行函数的写法,立即执行函数作用是什么?

这篇文章主要讲解:js立即执行函数是什么?js使用立即执行函数有什么作用呢?js立即执行函数的写法有哪些?

Vue.js render函数那些事儿

大多时候,我会使用template, vue单文件去渲染组件。虽然知道Vue中有个render函数,但却很少在项目中去主动使用它。使用最多的地方是在使用一些UI框架的时候,比如iview table中的按钮操作,会使用到render函数

Js函数式编程,给你的代码增加一点点函数式编程的特性

给你的代码增加一点点函数式编程的特性,最近我对函数式编程非常感兴趣。这个概念让我着迷:应用数学来增强抽象性和强制纯粹性,以避免副作用,并实现代码的良好可复用性。同时,函数式编程非常复杂。

注入eval, Function等系统函数,截获动态代码

现在很多网站都上了各种前端反爬手段,无论手段如何,最重要的是要把包含反爬手段的前端javascript代码加密隐藏起来,然后在运行时实时解密动态执行。动态执行js代码无非两种方法,即eval和Function。

Js中document.execCommand()函数的使用

document.execCommand()方法处理Html数据时常用语法格式如下:document.execCommand(sCommand[,交互方式, 动态参数])其中:sCommand为指令参数(如下例中的”2D-Position”),交互方式参数如果是true的话将显示对话框,如果为false的话,则不显示对话框

Js箭头函数适用场景及需要注意的地方

箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下,例如:用在 map、reduce、filter 的回调函数定义中,箭头函数的亮点是简洁,但在有多层函数嵌套的情况下,箭头函数反而影响了函数的作用范围的识别度

JavaScript中怎么调用函数?

JavaScript怎么调用函数?其实在JavaScript中函数有4种调用方式。下面本篇文章就来给大家介绍一下JavaScript函数的4种调用方式,希望对大家有所帮助。

点击更多...

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