es6箭头功能说明

Question

{
  getter: {
    myThing: state => lookup => {
      return state.things[lookup];
    },
    myThings: state => {
      return state.things;
    }
  }
}

给定上述两个函数，下列函数是否等价？

{
  getter: {
    myThing: (state, lookup) => {
      return state.things[lookup];
    },
    myThings: (state) => {
      return state.things;
    }
  }
}

Answer 1

(state) => {…}和state => {…}是等效的，因为在箭头函数中的单个参数周围的圆括号是可选的。

state => lookup => {…}和(state, lookup) => {…}是而不是的等价物。

第一个表达式是一个接受一个参数的函数，并返回另一个也接受一个参数的函数，而第二个表达式是一个接受两个参数的函数。

例如a => b => {return a + b;}这样的表达式就是一种表示货币的方法。您可以像这样使用这两种变体：

const add = a => b => (a + b);
add(2)(3); // 5
add(2); // function add/<() // This refers to the `b => (a + b)` part
add(2, 3); // function add/<() // Like above, because the second argument is ignored

const add2 = (a, b) => (a + b);
add2(2)(3); // TypeError: add2(...) is not a function
add2(2); // NaN // b isn’t provided
add2(2, 3); // 5

(state) => (lookup) => {…}将等同于第一个表达式。

注：(state) => (lookup) => {…}需要显式return来返回值；省略大括号{…}不需要。