javascript es6 双箭头函数

Question

我想更好地理解 es6 箭头函数。

举个例子：

    export default function applyMiddleware(...middlewares) {
      return (createStore) => (reducer, preloadedState, enhancer) => {
        // snip actual enhancer logic

        return {
            ...store,
            dispatch
        }
    }
}

用文字描述以上内容：

1. 我们的导出函数 (applyMiddleware) 采用一个带有 spread 的数组参数。
2. 然后applyMiddleware返回一个带createStore参数的无名函数，这次又返回了一个带三个参数的无名函数。

所以如果没有箭头，它看起来像这样：

export default function applyMiddleware(...middlewares) {
  return function(createStore){
      return function(reducer,preloadedState,enhancer){
        //some logic

          return{...store,dispatch}
      }
    }
}

我的问题：

1. 我说的对吗？
2. 我们在这里看到的常见用例/代码范例是什么？

Answer 1

您的第一个问题的答案或多或少（请参阅我的评论）。第二个问题的答案是您看到的模式是使用closure 和currying 的组合。导出函数的原始参数被收集到一个名为“中间件”的数组中，返回的函数关闭（即可以访问）。然后可以使用另一个参数“createStore”再次调用该函数，然后返回另一个可以接受更多参数的函数。这允许人们部分应用参数。举一个更简单（也许更容易理解）的例子，让我们用一个名为“add”的函数来添加两个数字：

let add = (x, y) => x + y;

不是很有趣。但是让我们把它分解，这样它就可以接受第一个数字并返回一个接受第二个数字的函数：

let add = x => y => x + y;
let add3 = add(3);
let seven = add3(4); // 7

对于我们的 add 函数来说，这似乎不是一个很大的胜利，但您从一个更合理的真实示例开始。此外，与其手动进行 curry，不如使用 curry 函数为您执行此操作是可能的（并且是可取的），许多流行的库（lodash、underscore、ramda）为您实现了 curry。一个使用 Ramda 的例子：

let add = R.curry((x, y) => x + y);
let add3 = add(3);
let five = add3(2);
let also5 = add(3, 2);
let still5 = add(3)(2); // all are equivalent.

Answer 2

这个答案是针对那些对双箭头功能仍有疑问的人。让我们深入挖掘它。

const doubleArrowFunc = param1 => param2 => {
   console.log('param1', param1);
   console.log('param2', param2);
}

如果你调用这个函数

const executeFunc = doubleArrowFunc('Hello');

如果你在控制台打印executeFunc，你会得到这样的输出

ƒ (param2) {
    console.log('param1', param1);
    console.log('param2', param2);
  }

现在这就像一个执行了一半的代码。如果你想完全执行它，你必须这样做

executeFunc('World');
//And the output will be 
param1 Hello
param2 World

如果你想要更多的理解。我可以在没有箭头功能的情况下执行相同的操作

function doubleArrowFunc(param1) {
    return function innerFunction(param2) {
       console.log('param1', param1);
       console.log('param2', param2);
    }
}