Arrow Functions

JavaScript Arrow Functions （JavaScript箭头函数）

Arrow functions are one of the popular features of ES6 syntax for writing JavaScript function expressions. Arrow function expressions cannot be used as constructors. （箭头函数是ES6语法用于编写JavaScript函数表达式的流行功能之一。箭头函数表达式不能用作构造函数。）

Arrow functions also called “fat arrow” functions, there are a more concise syntax for writing function expressions. By using arrow functions, we avoid having to type the function keyword, return keyword and curly brackets. （箭头函数也称为“胖箭头”函数，有一种更简洁的语法用于编写函数表达式。通过使用箭头函数，我们不必键入function关键字、return关键字和大括号。）

let arrowFunc = (param1, param2, … ,paramN) => expression

This creates a function func that accepts arguments arg1..argN and evaluates the expression on the right side with their use and returns its result. （这将创建一个函数func ，该函数接受参数arg1.. argN ，并在右侧计算表达式的使用情况并返回其结果。）

Briefly, it is the shorter version of:

let func = function (param1, param2, … ,paramN) {
 return expression;
};

Here is a concrete example:

// This arrow function
let multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // 6

//It's a shorter form of this:
let multiply = function (a, b) {
 return a * b;
};
console.log(multiply(2, 3)); // 6

From the example we can understand that (a, b) => a * b is a function that accepts two arguments with names a and b. It evaluates the expression a * b returning the result. （从示例中，我们可以理解(a, b) = > a * b是一个接受两个名为a和b的参数的函数。它计算返回结果的表达式a * b。）

If we have only one argument, parentheses around parameters can be excluded, that makes it shorter:

let sumFunc = (params) => params + 2
// roughly the same as: let sumFunc = function(params) { return params + 2 }
console.log(sumFunc(3)); //5

Parentheses will be empty if there are no arguments:

let welcome = () => console.log("Welcome to w3cdoc!");
welcome();

We can use arrow functions in the same way as Function Expressions. For example, to dynamically create a function:

let number = prompt("Guess the number", "");
let guessNumber = (number == 10) ?
 () => console.log('It’s right') :
 () => console.log('It’s a wrong number')
guessNumber(); // it’s work

Arrow functions can be unfamiliar and not very readable at first, but they are very convenient for simple one-line actions, when we just do not want to write many words. （箭头函数可能不熟悉，一开始不太容易阅读，但对于简单的单行操作来说，它们非常方便，当我们只是不想写太多单词时。）

Multiline arrow functions #

Multiline arrow functions （多行箭头函数）

In the presented above examples you can see that arguments are taken from the left of => and evaluated the right-side expression with them. （在上面的示例中，您可以看到参数取自= >的左侧，并使用它们计算右侧表达式。）

But sometimes we need more complex things, like multiple expressions or statements. It is also possible in case we circle them in curly braces and only after that use a normal return within them. （但有时我们需要更复杂的东西，比如多个表达式或语句。如果我们用大括号将它们圈起来，并且只有在那之后才能在其中使用正常的返回值，这也是可能的。）

Example of the multiple arrow function: #

let multiply = (a, b) => { //a multiline function
 let result = a * b;
 return result; // if we use curly braces, then we need an explicit "return"
};
console.log(multiply(2, 3)); // 6

Arrow functions also have some other interesting features. For studying them in-depth, we need to get to know some other features of JavaScript. We will return to arrow functions later in the chapter Arrow functions revisited. （箭头函数还有一些其他有趣的功能。为了深入研究它们，我们需要了解JavaScript的其他一些功能。我们将在稍后重新讨论箭头函数一章中返回箭头函数。）