JavaScript函数式编程-高阶函数filter(一)

**一. 为什么使用函数式编程 **

1. 更少的bug
2. 更容易理解
3. 可以花更少的时间
4. 代码可复用性高

二.什么是高阶函数

• 在通常的编程语言中，函数的参数只能是基本类型或者对象引用，返回值也只是基本数据类型或对象引用。

// 大部分编程语言可以这么写一个函数
function triple(x) {
    return x * 99;
};

//但是JavaScript可以将一个匿名函数声明为一个变量
var triple = function (x) {
    return x * 99;
};

但在JavaScript中函数作为一等公民，既可以当做参数传递，也可以被当做返回值返回。所谓高阶函数就是可以把函数作为参数，或者是将函数作为返回值的函数。

三．filter(可能是最有用的高阶函数)

array1.filter(callbackfn[, thisArg])

参数介绍:对数组array1中的每个元素调用回调函数callbackfn方法，该方法会返回一个在回调函数中返回true的元素的新的集合。可选参数thisArg可以替换回调函数中的this对象.
返回值:一个包含回调函数为其返回 true 的所有值的新数组。如果回调函数为 array1 的所有元素返回 false，则新数组的长度为 0。

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'}
];

// 过滤掉除了species是dog的元素
// 首先使用平常经常使用的for循环来实现

var dogs = [];
for(var i = 0; i < animals.length; i++){
    if(animals[i].species === 'dog'){
        dogs.push(animals[i]);
    }
}
console.log(dogs);
// 输出如下:
// [
//  { name: 'Caro', species: 'dog' },
//  { name: 'Hamilton', species: 'dog' }
// ]

// 使用filter来重写上面的方法,如下:
var dogs = animals.filter(function(animal){
    return animal.species === 'dog';
});
console.log(dogs);
// 输出如下:
// [
//  { name: 'Caro', species: 'dog' },
//  { name: 'Hamilton', species: 'dog' }
// ]

// 将filter中的函数提取出来,如下:
var isDog = function(animal){
    return animal.species === 'dog';
};
var dogs = animals.filter(isDog);
console.log(dogs);
// 输出如下:
// [
//  { name: 'Caro', species: 'dog' },
//  { name: 'Hamilton', species: 'dog' }
// ]

经过几次重写,得到的函数看起来更加简单易懂,符合开头写的那些特点

---

在前端摸爬滚打中,欢迎指正