javascript es6双箭头功能

Question

我试图将我的头脑包裹在一些反应和它的工具中非常常见的箭头函数上.

给出以下示例:

    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

你的第一个问题的答案或多或少(见我的评论).你的第二个问题的答案是你看到的模式是使用闭合和currying的组合.导出函数的原始参数被收集到一个名为"中间件"的数组中,返回的函数将关闭(即可以访问).然后可以使用另一个参数'createStore'再次调用该函数,然后返回另一个可以接受更多参数的函数.这允许人们部分地应用参数.对于一个更简单(也许更容易理解)的例子,让我们采用一个名为'add'的函数来添加两个数字:

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

不是很有趣.但是让我们分解它以便它可以取第一个数字并返回一个接受第二个的函数:

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

这对我们的添加功能来说似乎不是一个大赢家,但是你从一个更合理的现实世界的例子开始.此外,不是手动调度,而是可以(并且需要)使用咖喱功能为您完成,许多流行的库(lodash,下划线,ramda)为您实现咖喱.使用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);
    }
}