需求：写一个函数，输入 ‘chen’，返回 ‘HELLO, CHEN’。

试一下

  1. const toUpperCase = function (x) {
  2.     return x.toUpperCase();
  3. };
  5. const hello = function (x) {
  6.     return "HELLO, " + x;
  7. };
  9. const greet = function (x) {
  10.     return hello(toUpperCase(x));
  11. };
  13. console.log(greet("chen")); // 'HELLO, KEVIN'

只需两步，首先小写转大写，然后拼接字符串。如果有更多操作，greet 函数里就需要更多的嵌套，类似于 fn3(fn2(fn1(x)))。

compose 函数

功能是这样的：可以接收任意个函数作为参数，返回一个函数，这个函数接收的参数作为最右边函数的参数，而最右边这个函数的返回值作为倒数第二个函数的参数 ….，依此类推。

  1. compose(fn1, fn2, fn3, fn3 ....);
  1. function compose() {
  2.     const args = arguments;
  3.     const start = args.length - 1;
  4.     return function () {
  5.         let i = start;
  6.         let result = args[start].apply(this, arguments);
  7.         while (i--) result = args[i].call(this, result);
  8.         return result;
  9.     };
  10. }

这个 compose 已经是支持多个函数了，然而这个有什么用呢？

先了解一个概念 pointfree。

pointfree

pointfree 指的是函数无须提及将要操作的数据是怎么样的，以一开始的例子来讲解。

  1. // 需求：输入 'kevin'，返回 'HELLO, KEVIN'
  3. // 非 pointfree，因为提到了数据 name
  5. const greet = function (name) {
  6.     return ("hello" + name).toUpperCase();
  7. };
  9. // pointfree
  11. function compose() {
  12.     const args = arguments;
  13.     const start = args.length - 1;
  14.     return function () {
  15.         let i = start;
  16.         let result = args[start].apply(this, arguments);
  17.         while (i--) result = args[i].call(this, result);
  18.         return result;
  19.     };
  20. }
  22. // 先定义基本运算，然后封装起来复用
  24. const toUpperCase = function (x) {
  25.     return x.toUpperCase();
  26. };
  27. const hello = function (x) {
  28.     return "HELLO, " + x;
  29. };
  31. const greet = compose(hello, toUpperCase);
  33. greet("kevin");

再举一个复杂的例子，我们需要一个 curry 函数，在 《javascript 柯里化》有讲。

需求：输入 ‘kevin daisy kelly’，返回 ‘K.D.K’

  1. // 非 pointfree 提及到 name
  3. const initials = function (name) {
  4.     return name.split(" ").map(compose(toUpperCase, head)).join(".");
  5. };
  7. // pointfree
  8. // 先定义基本运算
  10. const split = curry(function (separator, str) {
  11.     return str.split(separator);
  12. });
  13. const head = function (str) {
  14.     return str.slice(0, 1);
  15. };
  16. const toUpperCase = function (str) {
  17.     return str.toUpperCase();
  18. };
  19. const join = curry(function (separator, arr) {
  20.     return arr.join(separator);
  21. });
  22. const map = curry(function (fn, arr) {
  23.     return arr.map(fn);
  24. });
  26. const initials = compose(join("."), map(compose(toUpperCase, head)), split(" "));
  28. initials("kevin daisy kelly");

可以看出利用 curry 和函数组合（compose）非常容易实现 pointfree。

其实这些基本函数已经有一个库已经帮我们做了，这样就不用自己每次都定义一遍，这个库叫 ramda.js。

  1. // ramda.js
  2. const initials = R.compose(R.join('.'), R.map(R.compose(R.toUpper, R.head)), R.split(' '));

pointfree 本质是：使用一些通用的函数，组合出各种复杂的运算。上层运算不要直接操作数据，而是通过底层函数去处理。既不使用所要处理的值，只合成运算过程。

好处：pointfree 模式能够帮助我们减少不必要的命名，让代码保持简洁和通用，更符合语义，更容易复用，测试变得更简答。

实战

假设从服务器获取这样的数据

  1. const data = {
  2.     result: "SUCCESS",
  3.     tasks: [
  4.         {
  5.             id: 104, complete: false, priority: "high",
  6.             dueDate: "2013-11-29", username: "Scott",
  7.             title: "Do something", created: "9/22/2013"
  8.         },
  9.         {
  10.             id: 105, complete: false, priority: "medium",
  11.             dueDate: "2013-11-22", username: "Lena",
  12.             title: "Do something else", created: "9/22/2013"
  13.         },
  14.         {
  15.             id: 107, complete: true, priority: "high",
  16.             dueDate: "2013-11-22", username: "Mike",
  17.             title: "Fix the foo", created: "9/22/2013"
  18.         },
  19.         {
  20.             id: 108, complete: false, priority: "low",
  21.             dueDate: "2013-11-15", username: "Punam",
  22.             title: "Adjust the bar", created: "9/25/2013"
  23.         },
  24.         {
  25.             id: 110, complete: false, priority: "medium",
  26.             dueDate: "2013-11-15", username: "Scott",
  27.             title: "Rename everything", created: "10/2/2013"
  28.         },
  29.         {
  30.             id: 112, complete: true, priority: "high",
  31.             dueDate: "2013-11-27", username: "Lena",
  32.             title: "Alter all quuxes", created: "10/5/2013"
  33.         }
  34.     ]
  35. };

需求：写一个 getIncompleteTaskSummaries 函数，接收一个 userName 的参数，从服务器获取数据，然后筛选出这名用户的未完成的任务的 ids、priorities、titles、和 dueDate 数据，并按照日期升序排序。

以 Scott 为例，最终筛选出的数据为：

  1. [
  2.     {id: 110, title: "Rename everything", 
  3.         dueDate: "2013-11-15", priority: "medium"},
  4.     {id: 104, title: "Do something", 
  5.         dueDate: "2013-11-29", priority: "high"}
  6. ]

过程式编程方法

  1. const fetchData = function () {
  2.     return Promise.resolve(data);
  3. };
  5. const getIncompleteTaskSummaries = function (memberName) {
  6.     return fetchData()
  7.         .then(function (data) {
  8.             return data.tasks;
  9.         })
  10.         .then(function (tasks) {
  11.             return tasks.filter(function (task) {
  12.                 return task.username === memberName;
  13.             });
  14.         })
  15.         .then(function (tasks) {
  16.             return tasks.filter(function (task) {
  17.                 return !task.complete;
  18.             });
  19.         })
  20.         .then(function (tasks) {
  21.             return tasks.map(function (task) {
  22.                 return {
  23.                     id: task.id,
  24.                     dueDate: task.dueDate,
  25.                     title: task.title,
  26.                     priority: task.priority
  27.                 };
  28.             });
  29.         })
  30.         .then(function (tasks) {
  31.             return tasks.sort(function (first, second) {
  32.                 const a = first.dueDate, b = second.dueDate;
  33.                 return a < b ? -1 : a > b ? 1 : 0;
  34.             });
  35.         })
  36.         .then(function (tasks) {
  37.             console.log(tasks);
  38.         });
  39. };
  41. getIncompleteTaskSummaries("Scott");

pointfree 模式

  1. const fetchData = function () {
  2.     return Promise.resolve(data);
  3. };
  5. // 定义基本函数
  7. const prop = curry(function (name, obj) {
  8.     return obj[name];
  9. });
  11. const propEq = curry(function (name, val, obj) {
  12.     return obj[name] === val;
  13. });
  15. const filter = curry(function (fn, arr) {
  16.     return arr.filter(fn);
  17. });
  19. const map = curry(function (fn, arr) {
  20.     return arr.map(fn);
  21. });
  23. const pick = curry(function (args, obj) {
  24.     const result = {};
  25.     for (let i = 0; i < args.length; i++) {
  26.         result[args[i]] = obj[args[i]];
  27.     }
  28.     return result;
  29. });
  31. const sortBy = curry(function (fn, arr) {
  32.     return arr.sort(function (a, b) {
  33.         a = fn(a),
  34.             b = fn(b);
  35.         return a < b ? -1 : a > b ? 1 : 0;
  36.     });
  37. });
  39. const getIncompleteTaskSummaries = function (memberName) {
  40.     return fetchData()
  41.         .then(prop("tasks"))
  42.         .then(filter(propEq("username", memberName)))
  43.         .then(filter(propEq("complete", false)))
  44.         .then(map(pick(["id", "dueDate", "title", "priority"])))
  45.         .then(sortBy(prop("dueDate")))
  46.         .then(console.log);
  47. };
  49. getIncompleteTaskSummaries("Scott");

ramda.js 版本

  1. const fetchData = function () {
  2.     return Promise.resolve(data);
  3. };
  5. const getIncompleteTaskSummaries = function (membername) {
  6.     return fetchData()
  7.         .then(R.prop("tasks"))
  8.         .then(R.filter(R.propEq("username", membername)))
  9.         .then(R.filter(R.propEq("complete", false)))
  10.         .then(R.map(R.pick(["id", "dueDate", "title", "priority"])))
  11.         .then(R.sortBy(R.prop("dueDate")))
  12.         .then(console.log);
  13. };
  15. getIncompleteTaskSummaries("Scott");

使用 compose 的 ramda.js 版本

  1. const fetchData = function () {
  2.     return Promise.resolve(data);
  3. };
  5. const getIncompleteTaskSummaries = function (membername) {
  6.     return fetchData()
  7.         .then(R.compose(
  8.             console.log,
  9.             R.sortBy(R.prop("dueDate")),
  10.             R.map(R.pick(["id", "dueDate", "title", "priority"])
  11.             ),
  12.             R.filter(R.propEq("complete", false)),
  13.             R.filter(R.propEq("username", membername)),
  14.             R.prop("tasks"),
  15.         ));
  16. };
  18. getIncompleteTaskSummaries("Scott");

参考：

[1] JavaScript专题之函数组合
[2] 完整版例子