1
- # 箭头函数,基础中的基础
1
+ # 箭头函数,基础知识
2
2
3
- 创建函数除了一般的函数表达式以外,还有一另种更好的非常简单和简洁的语法 。
3
+ 创建函数还有另外一种非常简单的语法,并且这种方法通常比函数表达式更好 。
4
4
5
5
它被称为“箭头函数”,因为它看起来像这样:
6
6
7
7
``` js
8
8
let func = (arg1 , arg2 , ... argN ) => expression
9
9
```
10
10
11
- ...这里创建一个函数 ` func ` ,它接受参数 ` arg1..argN ` ,然后使用参数对右侧的 ` expression ` 求值并返回其结果。
11
+ ……这里创建了一个函数 ` func ` ,它接受参数 ` arg1..argN ` ,然后使用参数对右侧的 ` expression ` 求值并返回其结果。
12
12
13
- 换句话说,它是下面版本的缩写 :
13
+ 换句话说,它是下面这段代码的更短的版本 :
14
14
15
15
``` js
16
16
let func = function (arg1 , arg2 , ... argN ) {
@@ -23,7 +23,7 @@ let func = function(arg1, arg2, ...argN) {
23
23
``` js run
24
24
let sum = (a , b ) => a + b;
25
25
26
- /* 这个箭头函数是下面这个函数的缩写 :
26
+ /* 这个箭头函数是下面这个函数的更短的版本 :
27
27
28
28
let sum = function(a, b) {
29
29
return a + b;
@@ -33,22 +33,22 @@ let sum = function(a, b) {
33
33
alert ( sum (1 , 2 ) ); // 3
34
34
```
35
35
36
- 可以看到 ` (a, b) => a + b ` 表示一个函数,该函数接受两个名为 ` a ` 和 ` b ` 的参数。在执行时,它将对表达式 ` a + b ` 求值并返回结果 。
36
+ 可以看到 ` (a, b) => a + b ` 表示一个函数接受两个名为 ` a ` 和 ` b ` 的参数。在执行时,它将对表达式 ` a + b ` 求值,并返回计算结果 。
37
37
38
- - 如果我们只有一个参数,还可以省略掉参数外的圆括号,使其更短 。
38
+ - 如果我们只有一个参数,还可以省略掉参数外的圆括号,使代码更短 。
39
39
40
40
例如:
41
41
42
42
``` js run
43
43
* ! *
44
44
let double = n => n * 2 ;
45
- // 差不多等同于:let double = function(n) { return n * 2 }
45
+ // 差不多等同于:let double = function(n) { return n * 2 }
46
46
*/ ! *
47
47
48
48
alert ( double (3 ) ); // 6
49
49
```
50
50
51
- - 如果没有参数,括号里将是空的 (但括号应该保留):
51
+ - 如果没有参数,括号将是空的 (但括号应该保留):
52
52
53
53
` ` ` js run
54
54
let sayHi = () => alert("Hello!");
@@ -70,42 +70,42 @@ let welcome = (age < 18) ?
70
70
welcome(); // 现在好了
71
71
` ` `
72
72
73
- 一开始,箭头函数可能看起来不熟悉 ,也不容易读懂,但一旦我们的眼睛习惯之后,情况很快会改变 。
73
+ 一开始,箭头函数可能看起来并不熟悉 ,也不容易读懂,但一旦我们看习惯了之后,这种情况很快就会改变 。
74
74
75
- 而且当我们懒得写太多字的时候,箭头函数这种简单的一行操作是非常方便 。
75
+ 箭头函数对于简单的单行动作来说非常方便,尤其是当我们懒得打太多字的时候 。
76
76
77
77
## 多行的箭头函数
78
78
79
79
上面的例子从 ` =>` 的左侧获取参数,然后使用参数计算右侧表达式的值。
80
80
81
- 但有时我们需要更复杂一点的东西,比如多个表达式或语句 。这也是可以做到的,但是我们应该用花括号括起来。然后在返回时使用一个普通的 ` return` 。
81
+ 但有时我们需要更复杂一点的东西,比如多行的表达式或语句 。这也是可以做到的,但是我们应该用花括号括起来。然后使用一个普通的 ` return` 将需要返回的值进行返回 。
82
82
83
83
就像这样:
84
84
85
85
` ` ` js run
86
- let sum = (a, b) => { // 花括号打开一个多行函数
86
+ let sum = (a, b) => { // 花括号表示开始一个多行函数
87
87
let result = a + b;
88
88
*!*
89
- return result; // i如果我们使用花括号 ,那么我们需要一个显式的 “return”
89
+ return result; // 如果我们使用了花括号 ,那么我们需要一个显式的 “return”
90
90
*/!*
91
91
};
92
92
93
93
alert( sum(1, 2) ); // 3
94
94
` ` `
95
95
96
- ` ` ` smart header="More to come "
97
- 在这里,我们赞扬箭头功能的简洁性。但这还不止这些 !
96
+ ` ` ` smart header="更多内容 "
97
+ 在这里,我们赞扬了箭头功能的简洁性。但还不止这些 !
98
98
99
99
箭头函数还有其他有趣的特性。
100
100
101
- 为了更深入地研究它们 ,我们首先需要了解一些 JavaScript 其他方面的知识,因此我们将在后面的 <info:arrow-functions> 一章中再继续研究箭头函数。
101
+ 为了更深入地学习它们 ,我们首先需要了解一些 JavaScript 其他方面的知识,因此我们将在后面的 <info:arrow-functions> 一章中再继续研究箭头函数。
102
102
103
- 现在,我们已经可以将箭头函数用于单行操作和回调了 。
103
+ 现在,我们已经可以用箭头函数进行单行操作和回调了 。
104
104
` ` `
105
105
106
106
## 总结
107
107
108
- 对于一句代码的函数来说 ,箭头函数是相当方便的。它具体有两种:
108
+ 对于一行代码的函数来说 ,箭头函数是相当方便的。它具体有两种:
109
109
110
- 1. 不带花括号:` (...args) => expression` -- 右边是一个表达式:函数计算它并返回结果 。
111
- 2. 带花括号:` (...args) => { body }` -- 花括号允许我们在函数中编写多个语句,但是我们需要显式的返回来 ` return` 一些内容 。
110
+ 1. 不带花括号:` (...args) => expression` — 右侧是一个表达式:函数计算表达式并返回其结果 。
111
+ 2. 带花括号:` (...args) => { body }` — 花括号允许我们在函数中编写多个语句,但是我们需要显式地 ` return` 来返回一些内容 。
0 commit comments