箭头函数，基础知识

还有一种非常简单且简洁的语法来创建函数，它通常比函数表达式更好。

它被称为“箭头函数”，因为它看起来像这样

let func = (arg1, arg2, ..., argN) => expression;

这会创建一个函数 func，它接受参数 arg1..argN，然后使用它们计算右侧的 expression 并返回其结果。

换句话说，它是以下内容的简短版本

let func = function(arg1, arg2, ..., argN) {
  return expression;
};

我们来看一个具体的例子

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

/* This arrow function is a shorter form of:

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

如你所见，(a, b) => a + b 表示一个接受两个名为 a 和 b 的参数的函数。在执行时，它计算表达式 a + b 并返回结果。

• 如果我们只有一个参数，那么可以省略参数周围的括号，从而使它更短。

  例如

  let double = n => n * 2;
  // roughly the same as: let double = function(n) { return n * 2 }
  
  alert( double(3) ); // 6

• 如果没有任何参数，括号是空的，但必须存在

  let sayHi = () => alert("Hello!");
  
  sayHi();

箭头函数可以像函数表达式一样使用。

例如，动态创建函数

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  () => alert('Hello!') :
  () => alert("Greetings!");

welcome();

箭头函数最初看起来可能不熟悉且不太好读，但当眼睛习惯了结构后，情况会很快发生改变。

当我们懒得写很多字时，它们非常适合简单的单行操作。

多行箭头函数

我们到目前为止看到的箭头函数非常简单。它们从 => 的左侧获取参数，求值并使用它们返回右侧表达式。

有时我们需要更复杂的函数，其中包含多个表达式和语句。在这种情况下，我们可以用大括号将它们括起来。主要区别在于大括号需要在其内部使用 return 来返回值（就像普通函数一样）。

像这样

let sum = (a, b) => {  // the curly brace opens a multiline function
  let result = a + b;
  return result; // if we use curly braces, then we need an explicit "return"
};

alert( sum(1, 2) ); // 3

总结

箭头函数适用于简单的操作，尤其是单行操作。它们有两种类型

1. 没有大括号：(...args) => expression - 右侧是一个表达式：函数对其进行求值并返回结果。如果只有一个参数，例如 n => n*2，则可以省略括号。
2. 带大括号：(...args) => { body } - 括号允许我们在函数内部编写多个语句，但我们需要明确的 return 来返回内容。