js回调函数

我们都知道，函数在js中是十分重要的一个功能，它可以体现出我们封装的思想，同时函数允许我们将可复用的代码块封装在一个单独的实体中。当您需要多次执行相同的操作时，可以调用该函数而不必重复编写完整的代码。这样可以提高代码的可维护性和可扩展性，而回调函数则是其中的一种特殊的用法。

请看下面代码：

var persons = [{
    name: '张三',
    age: '18',
    sex: '男'
}, {
    name: '李四',
    age: '28',
    sex: '女'
}, {
    name: '王五',
    age: '18',
    sex: '女'
}, {
    name: '赵六',
    age: '18',
    sex: '男'
},];
//1. 得到所有的男生
//2. 得到20岁以下的女生
//3. 找到姓赵的人
// ....

这是一些很简单但却实用的需求，相信有些人可能第一时间会写出如下代码：

//1. 得到所有的男生
var res1 = [];
for (var i = 0; i < persons.length; ++i) {
    if (persons[i].sex === '男') {
        res1.push(persons[i]);
    }
}
console.log(res1);
//2. 得到20岁以下的女生
var res2 = [];
for (var i = 0; i < persons.length; ++i) {
    if (persons[i].sex === '女' && persons[i].age < 20) {
        res2.push(persons[i]);
    }
}
console.log(res2);
//3. 找到姓赵的人
var res3 = [];
for (var i = 0; i < persons.length; ++i) {
    if (persons[i].name[0] === '赵') {
        res3.push(persons[i]);
    }
}
console.log(res3);

是的，这样写没有任何问题，但我们再细细观察，可以发现每个问题的代码的“长相”都差不多，只不过是if里面的条件不一样而已，那么我们是否可以考虑将其封装成为一个公共的函数呢，我们可以做出如下改动：

function filter(arr, fn) {
    var result = [];
    for (var i = 0; i < arr.length; ++i) {
        if (fn(arr[i])) {
            result.push(arr[i]);
        }
    }
    return result;
}
//1. 得到所有的男生
var res1 = filter(persons, function (e) {
    return e.sex === '男';
})
//2. 得到20岁以下的女生
var res2 = filter(persons, function (e) {
    return e.sex === '女' && e.age < 20;
})
//3. 找到姓赵的人
var res3 = filter(persons, function (e) {
    return e.name[0] === '赵';
})
console.log(res1, res2, res3);

可以看到，回调函数的便利之处便体现了出来，把“长相相同”的部分提取成为了一个公共的filter函数，通过把函数作为参数传递给filter使其成为if中的条件便可以很好的解决不同问题不同条件的矛盾。

在这里，小编只是举了一个十分简单的例子来展现回调函数的作用，实际上，它还在一些防抖、异步、定时器等诸多场景都有广泛的运用，能够给我们的开发带来很大的便利。