javascript - redux中的compose函数遇到的问题

Question

这是redux的compose函数源码：

export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  const last = funcs[funcs.length - 1]
  const rest = funcs.slice(0, -1)
  return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
}

不明白最后一行： (composed, f) => f(composed), last(...args) 的箭头函数中的返回语句中用逗号分隔f(composed)和last(...args)，这里是怎么执行的？

谢谢。

Answer 1

上面说的没错，是逗号表述式的简写法，我只是来补充的。

逗号表述式是一种特殊的简写法，它可以让原本只能用一个表述式的地方，插入多个表述式。

通常会出现在有return值的函式中，像问题中的例子一样。它是为了简化语句而使用的，例如下面的范例:

function f(){
  if(x){
   foo();
   return bar();
  }else{
   return 1;
  }
}

经过压缩工具(Closure Compiler)后会变成这样:

function f(){return x?(foo(),bar()):1}

三元运算子(?:)在这里被用来简化，三元运算子中的(foo(),bar())即是组合了原本的二个表述式(语句)，并按顺序执行。

逗号表述式很少在一般的撰写代码中见到，有个原因是它的阅读性不高，但在压缩工具(或编译器)中很常用到，因为它可以减少语句。

有个语句会看到逗号表述式的运用，就是在for语句的圆括号(())里，像下面的范例:

for (var i = 0, j = 9; i <= 9; i++, j--){
    //...
}

但一般常见的变量宣告像下面这样，并不是逗号表述式，var语句对逗号的行为有另外的方式处理。

var x=0, y=1;

//相等于
var x=0;
var y=1;

一般情况很少用，我们写的代码尽可能追求容易阅读，不差那一两个语句，至于要减少代码字数这件事是编译器或压缩工具的事。

当然，这是个函式库源码去了，高手在写代码的水平自然不会和一般人(像我)一样，用的都是高超的简洁语法。

Answer 2

这称之为逗号表达式。语句以逗号分隔顺序执行，返回最后一个的结果。这样就不用写完整函数了。

Answer 3

reduce、reduceRight函数是数组的新的遍历方法，类似map、forEach但又不同
reduce(function(previousValue,currentValue,currentIndex,array),initialValue)、
reduceRight(function(previousValue,currentValue,currentIndex,array),initialValue)
其中function是遍历函数，参数中previousValue是之前的执行过function的返回值（第一次遍历时取initialValue），currentValue是正在遍历的值，如

let arr=[1,2,3,4,5];
let sum=arr.reduce(function(pre,cur){
  return pre+cur;
},0);
console.log(sum);

将会在控制台打印15

reduce顺序遍历数组，reduceRight逆序遍历数组

Answer 4

rest.reduceRight((composed, f) => f(composed), last(...args))

1. 这是一个方法。

2. (composed, f) => f(composed) //这是第一个参数（方法）

3. last(...args) //这是第二个参数

4. Object.Array.reduceRight //去查查这个方法就懂了

5. 这里用到了很多函数式编程比如“高级函数”、“复合函数”、“柯里化”

骚年还是多读书吧！！！ 不要听人瞎忽悠！

Answer 5

这个跟逗号表达式一点关系都没有，这个跟数组的reduceRight方法定义有关，你看它定义：
array.reduceRight(function (preValue,curValue,index,array) { return xxxx; }, initialValue);
其实，last(...args)就是它的initialValue。(composed, f) => f(composed) 就是 function 的实现。
preValue:composed
curValue:f
用数组的反向累加器reduceRight实现的compose.