Eloquent JavaScript 笔记 五: High-Order Functions

High-order function 中文译作“高阶函数”。不论是英文名还是中文名，都不直观，单纯通过名字无法想象它是个什么东西。其实它就是 “把function作为参数，或者返回值为function的函数”。

函数，本质上来讲，是把一组行为抽象成一个概念。这种抽象有两个好处：

一、便于理解代码的意图（前提是有一个合适的函数名）。

二、便于复用。

既然函数是一个概念，或者说，是一个抽象、一个变量，那么，把它作为其他函数的参数也就没什么奇怪的了。

高阶函数、函数式编程、lamda表达式等，其实都是一码事。而且，已经成了开发语言的标配。swift、kotlin这些新秀就不必说了，比较“现代”的开发语言对此都有完整的支持。

当年用C语言时，偶尔也会定义函数类型的变量，一直记不清楚需要写几个括号。

1. Abstraction

例子，对1-10 求和。  

方法一：

var total = 0, count = 1;while (count <= 10) {  total += count;  count += 1;}console.log(total);

方法二：

console.log(sum(range(1, 10)));

方法二的写法更清晰，不过，实际上用到的代码更多，因为sum和range这两个函数的代码要超过“方法一”的代码行数。

虽然方法二的代码会多一些，但我们更倾向于用这种方法。 因为，它抽象出来两个概念：range 和 sum，让代码更清晰，更不容易出Bug。

2. Abstracting Array Traversal

例子，逐个打印数组中的元素：

var array = [1, 2, 3];for (var i = 0; i < array.length; i++) {  var current = array[i];  console.log(current);}

我们可以抽象出来一个概念：logEach

function logEach(array) {    for (var i=0; i<array.length; i++) {        console.log(array[i]);    }}

这样，以后再遍历打印别的数组时，就可以用这个函数了，不用每次写那么些代码。

但，这个logEach的通用性比较差，只能log，通过增加一个参数action，我们可以让它更通用一些。

function forEach(array, action) {    for (var i = 0; i < array.length; i++) {        action(array[i]);    }}forEach(["Wampeter", "Foma", "Granfalloon"], console.log);

这个例子还是在逐个打印数组元素。

看一个不一样的：求和。

var numbers = [1, 2, 3, 4, 5], sum = 0;forEach(numbers, function(number) {  sum += number;});console.log(sum);

等等，跨度有点大，function(number) 这个number是哪来的？

forEach 的第二个参数是个action，也就是这个function：

function(number) {  sum += number;}

在forEach内部，给action函数传递的参数是 array[i] ，所以，这个number 就是数组的一个元素。

3. Higher-Order Functions

把function作为参数，或者返回值为function的函数，叫做higher-order function。

例1：

function greaterThan(n) {  return function(m) { return m > n; };}var greaterThan10 = greaterThan(10);console.log(greaterThan10(11));

例2:

function noisy(f) {  return function(arg) {    console.log("calling with", arg);    var val = f(arg);    console.log("called with", arg, "- got", val);    return val;  };}noisy(Boolean)(0);// → calling with 0// → called with 0 - got false

例3:

function unless(test, then) {  if (!test) then();}function repeat(times, body) {  for (var i = 0; i < times; i++) body(i);}repeat(3, function(n) {    unless(n % 2, function() {        console.log(n, "is even");    });});// → 0 is even// → 2 is even

4. JSON

JavaScript Object Notation

JSON.stringify( )

JSON.parse( )

本章源码中有个ancestry.js, 包含这个文件之后，可以用 JSON.parse(ANCESTRY_FILE) 得到一个家族树中所有人员的数组。

var ancestry = JSON.parse(ANCESTRY_FILE);

后面代码中遇到的ancestry 变量都是这个。

5. Filtering an Array

用test函数来过滤一个数组，所有通过test的元素会构建一个新的数组。

function filter(array, test) {    var passed = [];    for (var i = 0; i < array.length; i++) {        if (test(array[i]))             passed.push(array[i]);    }    return passed;}ancestry.filter(function(person){    return person.father == "Carel Haverbeke";});

6. Transforming with Map

用transform函数，改变数组元素的类型。

function map(array, transform) {    var mapped = [];    for (var i = 0; i < array.length; i++) {        mapped.push(transform(array[i]));    }    return mapped;}ancestry.map(function(person) {    return person.name; });

7. Summarizing with Reduce

function reduce(array, combine, start) {    var current = start;    for (var i = 0; i < array.length; i++) {        current = combine(current, array[i]);    }    return current;}[1,2,3,4].reduce(function(a,b) {    return a+b;});ancestry.reduce(function(min, cur) {   if(cur.born < min.born)        return cur;   else        return min;});

JavaScript 标准库中的reduce方法，提供了一个便利的功能，那就是，可以省略 start 参数。 默认把数组的第一个参数作为start。

8. Composability

function average(array) {    function plus(a, b) { return a + b; }    return array.reduce(plus) / array.length;}function age(p) { return p.died - p.born; }function male(p) { return p.sex == "m"; }function female(p) { return p.sex == "f"; }var maleAverageAge = average(ancestry.filter(male).map(age));var femaleAverageAge = average(ancestry.filter(female).map(age));

很神奇啊，写了多年的代码，已经习惯了从问题域出发，按照人类思维一行一行的顺序写代码。 要做到这种抽象层次，还要做很多练习才行。

9. The Cost

相比于直接使用循环，上面的方法比较低效，因为，它们增加了很多的函数调用，函数调用本身会增加内存和CPU的负载。

但，现在的计算机都非常快，这些性能上的损耗可以忽略不计。

10. Binding

每个function 都有一个bind方法。 这句话有点奇怪哈。 可以认为 function 是一种对象，它也有一些内置的成员函数，其中一个成员函数叫bind。

bind会生成一个函数。本质上来讲，bind是另外一种使用函数的方法，这一章讲的不清楚，没看懂，下一章还会仔细讲。先看个例子：

var theSet = ["Carel Haverbeke", "Maria van Brussel",              "Donald Duck"];function isInSet(set, person) {  return set.indexOf(person.name) > -1;}console.log(ancestry.filter(function(person) {  return isInSet(theSet, person);}));// → [{name: "Maria van Brussel", …},//    {name: "Carel Haverbeke", …}]console.log(ancestry.filter(isInSet.bind(null, theSet)));// → … same result

11. 练习一、Flattening

使用reduce，把一个多维数组转换成一维数组。例如：

var arrays = [[1, 2, 3], [4, 5], [6]];

// → [1, 2, 3, 4, 5, 6]

arrays.reduce(function(a,b){

    return a.concat(b);

});

12. 练习二、计算母子年龄差的平均值

用reduce计算平均值：

function average(array) {    function plus(a, b) { return a + b; }    return array.reduce(plus) / array.length;}

用forEach生成一个 name - person 映射，便于查找母亲：

var byName = {};ancestry.forEach(function(person) {    byName[person.name] = person;});

计算一个人的母子年龄差：

function diff(person) {    var mother = byName[person.mother];        if (mother) {        return person.born - mother.born;        }    else        return null;}

用map 把person转换成母子年龄差，用filter过滤掉找不到母亲的人，然后计算平均值：

var diff = average(ancestry.map(diff).filter(function (diffAge) {    return diffAge != null;}));console.log(diff);

13. 练习三、计算家族树中每个世纪的平均寿命

var centuryGroup = [];ancestry.forEach(function (person) {    var century = Math.ceil(person.died/100);        var age = person.died-person.born;    if (century in centuryGroup) {        centuryGroup[century].push(age);        }    else {        centuryGroup[century] = [age];    }});for(var century in centuryGroup) {    console.log(century + ': ' + average(centuryGroup[century]));}

14. 练习四、every and some

针对array，JavaScript标准库中提供了两个函数every 和 some。

例如：

    [2,3,NaN].some(isNaN);

    [2,3,4].every(isNaN);

自己写代码实现这两个函数，但不要作为array的方法，而是把array作为它们的参数。

function some(array, action) {    var ret = false;    for (var i=0; i<array.length; i++) {        if (action(array[i])) {            ret = true;            break;        }    }    return ret;}function every(array, action) {    var ret = true;        for (var i=0; i<array.length; i++) {        if (!action(array[i])) {            ret = false;                        break;        }    }    return ret;}