js函数式编程

时间: 2018-12-24阅读: 1235标签: 函数

定义

函数式编程(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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

JS常用函数原理的实现

本文针对目前常见的面试题,实现了相应方法的核心原理,部分边界细节未处理。后续也会持续更新,希望对你有所帮助。实现一个call函数;实现一个apply函数

Js中函数的5个高级技巧

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。函数对任何一门语言来说都是一个核心的概念,在javascript中更是如此。本文将深入介绍函数的5个高级技巧。

“箭头函数”和“函数”是否等效/可互换?

ES2015 中的箭头函数提供了更简洁的语法。我现在可以用箭头函数替换我所有的函数声明/表达式吗?我需要注意什么?

js中浏览器兼容startsWith 、endsWith 函数

在做js开发的时候用到了startsWith函数时,发现各个浏览器不兼容问题,因为对开发来说,chrome浏览器最好用,就一直在chrome浏览器中使用这两个函数没有任何问题,但在ie浏览器访问就直接报错,因为ie没有这两个函数,要么修改方法,换别的方法,但是一两个还好改,多了就不好改

JavaScript 高阶函数快速入门

把函数以数据的形式去使用,并解锁一些强大的模式。接受和/或返回另外一个函数的函数被称为高阶函数。之所以是高阶,是因为它并非字符串、数字或布尔值,而是从更高层次来操作函数。

Generator函数的语法和应用

状态机,封装了多个内部状态;返回一个遍历器对象,通过改对象可以一次遍历Generator函数内部的每一个状态;带*号,yeild表达式定义不同的内部状态;调用 Generator 函数后,该函数并不执行,返回的也不是函数运行结果

“回调函数”超难面试题!!

进来的小伙伴可以先自己思考一下 。对于还属于小白的我来说扫了一眼这些代码的反应是:这都是什么鬼?但是我也比较喜欢钻研~ 仔细看了第二眼的反应是:这回调函数也太回调了吧

前端常用的js函数方法整理

判断js类型: js有自己判断方法 typeof 但是当他遇到引用类型的时候得到的结果往往不是我们想要的,有没有时候后台返回的参数是null或者undefined然后就被丢到了页面上,很难看,要每一个地方都去处理

ES6函数的扩展

在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。与解构赋值默认值结合使用参数默认值可以与解构赋值的默认值结合使用。

js之惰性函数

惰性函数是js函数式编程的另一个应用,惰性函数表示函数执行的分支只会在函数第一次调用的时候执行,他的应用情景在于当我们遇到一个需要判断场景去调用不同的方法时,避免重复进入函数内的if判断,也就是说if判断只进行一次,之后函数就会被分支里的代码替换掉

点击更多...

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