关闭

js函数式编程

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

定义

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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

浅谈JavaScript的防抖与节流

在前端开发的过程中,我们经常会需要绑定一些持续触发的事件,如 resize、scroll、mousemove 等等,但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。这时候就用到防抖与节流。

js中 is_NaN()函数的使用

isNaN() 函数用于检查其参数是否是非数字值。它是JavaScript提供的一个内置函数。这个函数使用了Number() 去转换需要判断的值。Number() 去转换值,如果有任意非数值字符存在则就不是一个数值

JavaScript 高阶函数快速入门

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

JS高阶编程技巧--惰性函数

在vue、react等框架大量应用之前,我们需要使用jQuery或者原生js来操作dom写代码,在用原生js进行事件绑定时,我们可以应用DOM2级绑定事件的方法,即:元素.addEventListener(),因为兼容性,还有:

JavaScript 函数式编程

我理解的 JavaScript 函数式编程,都认为属于函数式编程的范畴,只要他们是以函数作为主要载体的。

js中的toString和valueOf

基本上,所有JS数据类型都拥有valueOf和toString这两个方法,null除外。它们俩解决javascript值运算与显示的问题。所有对象继承了两个转换方法:每个JavaScript固有对象的 valueOf 方法定义不同。

js声明函数

JS声明函数的三种方式:函数表达式: function操作符创建函数, 表达式可以存储在变量或者对象属性里. 往往被称为匿名函数, console.log(h.name); 可以看到打印为空;函数声明: 具名函数, 且函数能在其所在作用域的任意位置被调用

css中calc()函数

css3中函数:用于动态计算长度值。(注意事项:运算符前后都需要保留一个空格,例如:width: calc(100% - 10px));任何长度值都可以使用calc()函数进行计算;

js函数内部两个特殊的对象之arguments和this

arguments是一个类数组对象。包含着传入函数中的所有参数。但这个对象还有一个名叫callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数。this引用的是函数执行的环境对象(当在网页的全局作用域中调用函数时,this对象引用的就是window)

JavaScript函数内部属性

函数内部有两个特殊对象,this、arguments,其中arguments是一个类数组对象,包含着传入函数中的所有参数,主要用来保存函数参数。arguments对象还有一个callee属性,callee是一个指针,指向拥有这个arguments对象的函数。

点击更多...

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