如何使用idc_arrow_Arrow Function JavaScript教程–如何使用新的ES6语法声明JS函数

如何使用idc_arrow

You’ve probably seen arrow functions written a few different ways.

您可能已经看过箭头函数以几种不同的方式编写。

//example 1
const addTwo = (num) => {return num + 2;};

//example 2
const addTwo = (num) => num + 2;

//example 3
const addTwo = num => num + 2;
 
//example 4
const addTwo = a => {
 const newValue = a + 2;
 return newValue;
};

Some have parentheses around the parameters, while others don’t. Some use curly brackets and the return keyword, others don’t. One even spans multiple lines, while the others consist of a single line.

有些在参数周围带有括号，而有些则没有。 有些使用大括号和return 关键字，其他则没有。 一个甚至跨越多行，而其他则由一行组成。

Interestingly, when we invoke the above arrow functions with the same argument we get the same result.

有趣的是，当我们使用相同的参数调用上述箭头函数时，会得到相同的结果。

console.log(addTwo(2));
//Result: 4

How do you know which arrow function syntax to use? That’s what this article will uncover: how to declare an arrow function.

您如何知道要使用哪种箭头函数语法？ 这就是本文要揭示的内容：如何声明箭头函数。

主要区别 (A Major Difference)

Arrow functions are another—more concise—way to write function expressions. However, they don’t have their own binding to the this keyword.

箭头函数是另一种(更简洁的)函数表达式编写方式。 但是，它们没有与this关键字的绑定。

//Function expression
const addNumbers = function(number1, number2) {
   return number1 + number2;
};

//Arrow function expression
const addNumbers = (number1, number2) => number1 + number2;

When we invoke these functions with the same arguments we get the same result.

当我们使用相同的参数调用这些函数时，会得到相同的结果。

console.log(addNumbers(1, 2));
//Result: 3

There's an important syntactical difference to note: arrow functions use the arrow => instead of the function keyword. There are other differences to be aware of when you write arrow functions, and that’s what we’ll explore next.

需要注意一个重要的语法差异：箭头函数使用arrow =>代替了function关键字。 在编写箭头函数时，还需要注意其他差异，这就是我们接下来要探讨的内容。

括弧 (Parentheses)

Some arrow functions have parentheses around the parameters and others don't.

一些箭头函数在参数周围带有括号，而其他箭头函数则没有。

//Example with parentheses
const addNums = (num1, num2) => num1 + num2;

//Example without parentheses
const addTwo = num => num + 2;

As it turns out, the number of parameters an arrow function has determines whether or not we need to include parentheses.

事实证明，箭头函数具有的参数数量决定了是否需要包含括号。

An arrow function with zero parameters requires parentheses.

参数为零的箭头函数需要括号。

const hello = () => "hello";
console.log(hello());
//Result: "hello"

An arrow function with one parameter does not require parentheses. In other words, parentheses are optional.

用一个参数的箭头功能不需要括号。 换句话说，括号是可选的。

const addTwo = num => num + 2;

So we can add parentheses to the above example and the arrow function still works.

因此，我们可以在上面的示例中添加括号，并且箭头功能仍然有效。

const addTwo = (num) => num + 2;
console.log(addTwo(2));
//Result: 4

An arrow function with multiple parameters requires parentheses.

具有多个参数的箭头函数需要括号。

const addNums = (num1, num2) => num1 + num2;
console.log(addNums(1, 2));
//Result: 3

Arrow functions also support rest parameters and destructuring. Both features require parentheses.

箭头函数还支持其余参数和解构 。 这两个功能都需要括号。

This is an example of an arrow function with a rest parameter.

这是带有rest参数的箭头函数的示例。

const nums = (first, ...rest) => rest;
console.log(nums(1, 2, 3, 4));
//Result: [ 2, 3, 4 ]

And here’s one that uses destructuring.

这是使用解构的一种。

const location = {
   country: "Greece",
   city: "Athens"
};

const travel = ({city}) => city;

console.log(travel(location));
//Result: "Athens"

To summarize: if there’s only one parameter—and you’re not using rest parameters or destructuring—then parentheses are optional. Otherwise, be sure to include them.

总结一下：如果只有一个参数(并且您没有使用rest参数或进行解构)，则括号是可选的。 否则，请确保包括它们。

功能体 (The Function Body)

Now that we’ve got the parentheses rules covered, let’s turn to the function body of an arrow function.

现在我们已经涵盖了括号规则，接下来我们来看一下箭头函数的函数体。

An arrow function body can either have a “concise body” or “block body”. The body type influences the syntax.

箭头功能体可以具有“简洁体”或“块体” 。 主体类型会影响语法。

First, the “concise body” syntax.

首先，“简洁的主体”语法。

const addTwo = a => a + 2;

The “concise body” syntax is just that: it’s concise! We don’t use the return keyword or curly brackets.

“简洁的主体”语法就是这样：简洁！ 我们不使用return 关键字或大括号。

If you have a one-line arrow function (like the example above), then the value is implicitly returned. So you can omit the return keyword and the curly brackets.

如果您具有单行箭头功能(如上述示例)，则将隐式返回该值。 所以你可以省略return 关键字和大括号。

Now let’s look at “block body” syntax.

现在让我们看一下“块体”语法。

const addTwo = a => {
    const total = a + 2;
    return total;
}

Notice that we use both curly brackets and the return keyword in the above example.

请注意，在上面的示例中，我们同时使用了大括号和return关键字。

You normally see this syntax when the body of the function is more than one line. And that’s a key point: wrap the body of a multi-line arrow function in curly brackets and use the return keyword.

当函数的主体超过一行时，通常会看到此语法。 这就是关键：将多行箭头函数的主体括在大括号中，然后使用return 关键词。

对象和箭头功能 (Objects and Arrow Functions)

There’s one more syntax nuance to know about: wrap the function body in parentheses when you want to return an object literal expression.

还需要了解另一种语法上的细微差别：当您要返回对象文字表达式时，将函数体括在括号中。

const f = () => ({
 city:"Boston"
})
console.log(f().city)

Without the parentheses, we get an error.

没有括号，我们会得到一个错误。

const f = () => {
   city:"Boston"
}
//Result: error

If you find the arrow function syntax a bit confusing, you’re not alone. It takes some time to get familiar with it. But being aware of your options and requirements are steps in that direction.

如果您发现箭头函数语法有点混乱，那么您并不孤单。 花费一些时间来熟悉它。 但是了解您的选择和要求是朝着这个方向迈出的一步。

I write about learning to program and the best ways to go about it (amymhaddad.com).

我写了有关学习编程和实现它的最佳方法的文章( amymhaddad.com )。

翻译自: https://www.freecodecamp.org/news/arrow-function-javascript-tutorial-how-to-declare-a-js-function-with-the-new-es6-syntax/

如何使用idc_arrow