js函数式编程

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

定义

函数式编程(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

探讨构造函数内部的方法的问题

使用构造函数的主要问题,就是每个方法都要在实例上重新创建一遍。探讨构造函数内部的方法(或函数)的问题,首先看下两个实例化后的属性或方法是否相等。

你也许不知道的javascript高级函数

高阶函数是对其他函数进行操作的函数,可以将它们作为参数或通过返回它们。简单来说,高阶函数是一个函数,它接收函数作为参数或将函数作为输出返回。例如Array.prototype.map,Array.prototype.filter,Array.prototype.reduce 都是一些高阶函数。

Js高阶函数(Heigher-order function)

满足以下条件:接受一个或多个函数作为输入/输出一个函数;高阶函数一般是那些函数型包含多于函数。在函数式编程中,返回另一个函数的高阶函数被称为Curry化的函数。

js构造函数的方法

类方法是不需要进行实例化就可以使用的方法;反而实例化之后,类方法在实例中不可用。对象方法和原型方法,只有实例化之后才可以使用。

用原生Js实现Jquery函数方法

在本文中我将把自己最常用的 jQuery 函数转换为原生 JavaScript。有时我需要创建一个简单的静态 HTML 或登录页面,而且不想引入任何库或其它依赖。对这种情况,我只使用普通的 JavaScript 来完成工作

js构造函数

JS中的函数即可以是构造函数又可以当作普通函数来调用,当使用new来创建对象时,对应的函数就是构造函数,通过对象来调用时就是普通函数。在我们平时工作中,经常会需要我们创建一个对象,而我们更多的是使用对像直接量,直接创建

JS函数的三种方式

函数,一段能够自动完成某些功能的代码块,函数的出现,既解决了重复使用重一功能的需求,又可以避免代码的臃肿性。使用函数有两个要求:必须调用后才可以执行;函数名不要和关键字以及系统函数相同;

JavaScript 高阶函数快速入门

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

js中HttpServletRequest的使用

HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,开发人员通过这个对象的方法,可以获得客户这些信息。

js类的constructor中不支持异步函数吗?

如果是普通函数,可以用async 和await来解决你的问题。但你这个是在constructor里,constructor 的作用是返回一个对像实例,如果加了async就变成返回一个promise了,所以这个方法行不通

点击更多...

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