Question

我在javascript中阅读以下源代码：

const switchTo = (menu, select) => (e) => {
  e.preventDefault();
  select(e.target.value);
  action(() => _.map(menu, ($val, $key) => _.set(menu, $key, false)))();
  action(() => _.set(menu, e.target.value, true))();
};

我不明白的是包含两个=>运算符的第一行。这个语法是什么意思？我们是否有名字？我甚至不知道如何搜索这种语法。

Answer 1

() => {}与function() {}几乎相同。请记住，在箭头函数中，有一个隐式的返回调用。此外，当箭头函数调用只是一个语句时，您将不需要括号，并且它们具有隐式返回调用（感谢@Pineda）。

例如，这个表达式：() => _.map(menu, ($val, $key) => _.set(menu, $key, false))

可替换为：

function() {
  return _.map(menu, function($val, $key) {
    return _.set(menu, $key, false)
  }
}

此外，请记住箭头函数为lexically scoped，因此this具有不同的含义。

Answer 2

以下语法描述了一个接受a和b并返回两者之和的函数：

const sum = (a, b) => a + b;

传统上看起来像：

function sum(a, b) {
    return a + b;
}

在您的情况下，链式() =>表示使用返回的() => { }语法的另一个函数：

const x = (a, b) => (c) => {
    //              ^^^^^^^^   The returned function.
    //
};

传统上看起来像：

function x(a, b) {
    return function(c) {
        //
    }
}

Answer 3

它是higher-order function，因为它返回另一个函数。一旦习惯了这种表示法，这实际上很容易阅读。当您看到多个=>时，请阅读每个return a function，但最后一个为=>。无论=>的左侧是什么，都可以关闭，以便在返回的函数中说明。最后switchTo是您要执行的实际操作。

您的示例中的

switchTo(myMenuElement, mySelectElement)，如下所示：

onclick

生成一个事件处理程序，例如，可以附加到元素的click事件。在响应a e事件时调用，它将像往常一样传递事件arg myMenuElement。除了mySelectElement之外，唯一的区别在于处理程序现在能够识别e和public class ResultOfOperation { public string Message1 { get; set; } public string Message2 { get; set; } public string Message3 { get; set; } }并且可以对它们执行某些操作。

Answer 4

=＆gt; 是arrow function expression的一部分。第一个=＆gt;创建一个函数，返回用另一个=＆gt;创建的第二个函数。

您的代码已转换为Babel REPL的纯JavaScript：

var switchTo = function switchTo(menu, select) {
  return function (e) {
    e.preventDefault();
    select(e.target.value);
    action(function () {
      return _.map(menu, function ($val, $key) {
        return _.set(menu, $key, false);
      });
    })();
    action(function () {
      return _.set(menu, e.target.value, true);
    })();
  };
};

如何理解链多个=＆gt;在javascript中

4 个答案: