This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
There's another very simple and concise syntax for creating functions, that's often better than Function Expressions.
创建函数还有另外一种非常简单的语法,并且这种方法通常比函数表达式更好。
It's called "arrow functions", because it looks like this:
它被称为“箭头函数”,因为它看起来像这样:
```js
let func = (arg1, arg2, ...argN) => expression
```
...This creates a function `func` that accepts arguments `arg1..argN`, then evaluates the `expression` on the right side with their use and returns its result.
As you can, see `(a, b) => a + b` means a function that accepts two arguments named `a` and `b`. Upon the execution, it evaluates the expression `a + b` and returns the result.
可以看到 `(a, b) => a + b` 表示一个函数接受两个名为 `a` 和 `b` 的参数。在执行时,它将对表达式 `a + b` 求值,并返回计算结果。
- If we have only one argument, then parentheses around parameters can be omitted, making that even shorter.
- 如果我们只有一个参数,还可以省略掉参数外的圆括号,使代码更短。
For example:
例如:
```js run
*!*
let double = n => n * 2;
// roughly the same as: let double = function(n) { return n * 2 }
- If there are no arguments, parentheses will be empty (but they should be present):
- 如果没有参数,括号将是空的(但括号应该保留):
```js run
let sayHi = () => alert("Hello!");
sayHi();
```
Arrow functions can be used in the same way as Function Expressions.
箭头函数可以像函数表达式一样使用。
For instance, to dynamically create a function:
例如,动态创建一个函数:
```js run
let age = prompt("What is your age?", 18);
Expand All
@@ -67,45 +67,45 @@ let welcome = (age < 18) ?
() => alert('Hello') :
() => alert("Greetings!");
welcome(); // ok now
welcome(); // 现在好了
```
Arrow functions may appear unfamiliar and not very readable at first, but that quickly changes as the eyes get used to the structure.
一开始,箭头函数可能看起来并不熟悉,也不容易读懂,但一旦我们看习惯了之后,这种情况很快就会改变。
They are very convenient for simple one-line actions, when we're just too lazy to write many words.
箭头函数对于简单的单行动作来说非常方便,尤其是当我们懒得打太多字的时候。
## Multiline arrow functions
## 多行的箭头函数
The examples above took arguments from the left of `=>` and evaluated the right-side expression with them.
上面的例子从 `=>` 的左侧获取参数,然后使用参数计算右侧表达式的值。
Sometimes we need something a little bit more complex, like multiple expressions or statements. It is also possible, but we should enclose them in curly braces. Then use a normal `return` within them.
let sum = (a, b) => { // the curly brace opens a multiline function
let sum = (a, b) => { // 花括号表示开始一个多行函数
let result = a + b;
*!*
return result; // if we use curly braces, then we need an explicit "return"
return result; // 如果我们使用了花括号,那么我们需要一个显式的 “return”
*/!*
};
alert( sum(1, 2) ); // 3
```
```smart header="More to come"
Here we praised arrow functions for brevity. But that's not all!
```smart header="更多内容"
在这里,我们赞扬了箭头功能的简洁性。但还不止这些!
Arrow functions have other interesting features.
箭头函数还有其他有趣的特性。
To study them in-depth, we first need to get to know some other aspects of JavaScript, so we'll return to arrow functions later in the chapter <info:arrow-functions>.
For now, we can already use arrow functions for one-line actions and callbacks.
现在,我们已经可以用箭头函数进行单行操作和回调了。
```
## Summary
## 总结
Arrow functions are handy for one-liners. They come in two flavors:
对于一行代码的函数来说,箭头函数是相当方便的。它具体有两种:
1. Without curly braces: `(...args) => expression` -- the right side is an expression: the function evaluates it and returns the result.
2. With curly braces: `(...args) => { body }` -- brackets allow us to write multiple statements inside the function, but we need an explicit `return` to return something.
2. 带花括号:`(...args) => { body }` — 花括号允许我们在函数中编写多个语句,但是我们需要显式地 `return` 来返回一些内容。
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Arrow functions, the basics #537
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Uh oh!
There was an error while loading. Please reload this page.
Arrow functions, the basics #537
Filter by extension
Viewed files
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
There are no files selected for viewing