webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update:箭头函数

Browse Source
This commit is contained in:
qianguyihao 2019-09-04 13:01:02 +08:00
parent 4b62e3e5d7
commit 57be9b64b2
1 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
10-ES6/04-ES6：变量、函数扩展.md
View File

@ -173,7 +173,7 @@ let 和 const 的作用如下：
``` ```
**代码2**、上面的代码中，如果我们用 let 定义变量 i： **代码2**、上面的代码中，如果我们改为用 let 定义变量 i：
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
@ -237,7 +237,6 @@ ES6允许我们，通过数组或者对象的方式，对一组变量进行赋
二者的效果是一样的。 二者的效果是一样的。
**解构的默认值：** **解构的默认值：**
在解构赋值时，是允许使用默认值的。举例如下： 在解构赋值时，是允许使用默认值的。举例如下：
@ -293,7 +292,19 @@ ES6允许我们，通过数组或者对象的方式，对一组变量进行赋
### 对象的解构赋值 ### 对象的解构赋值
我们同样可以针对对象，进行结构赋值。 通常情况下，我们从接口拿到json数据后，一般这么赋值：
```javascript
var a = json.a;
var b = json.b;
bar c = json.c;
```
上面这样写，过于麻烦了。
现在，我们同样可以针对对象，进行结构赋值。
**举例如下：** **举例如下：**
@ -331,7 +342,6 @@ ES6允许我们，通过数组或者对象的方式，对一组变量进行赋
字符串也可以解构，这是因为，此时字符串被转换成了一个类似数组的对象。举例如下： 字符串也可以解构，这是因为，此时字符串被转换成了一个类似数组的对象。举例如下：
```javascript ```javascript
const [a, b, c, d] = 'smyhvae'; const [a, b, c, d] = 'smyhvae';
console.log(a); console.log(a);
@ -500,13 +510,12 @@ for…of 的循环可以避免我们开拓内存空间，增加代码运行效
``` ```
注意，上方代码中，倒数第二行用的是单引号，最后一行用的是反引号（在tab键的上方）。 **注意**，上方代码中，倒数第二行用的符号是单引号，最后一行用的符号是反引号（在tab键的上方）。
参考链接： 参考链接：
- [ES6的rest参数和扩展运算符](https://segmentfault.com/a/1190000010222698) - [ES6的rest参数和扩展运算符](https://segmentfault.com/a/1190000010222698)
## 箭头函数 ## 箭头函数
需要说明的是，ES6中，函数新增了很多特性。例如： 需要说明的是，ES6中，函数新增了很多特性。例如：
@ -525,7 +534,6 @@ for…of 的循环可以避免我们开拓内存空间，增加代码运行效
这一段，我们来讲一下箭头函数。 这一段，我们来讲一下箭头函数。
定义和调用函数：（传统写法） 定义和调用函数：（传统写法）
```javascript ```javascript
@ -538,7 +546,7 @@ console.log(fn1(1, 2)); //输出结果：3
定义和调用函数：（ES6中的写法） 定义和调用函数：（ES6中的写法）
``` ```javascript
var fn2 = (a, b) => a + b; var fn2 = (a, b) => a + b;
@ -546,12 +554,10 @@ console.log(fn1(1, 2)); //输出结果：3
``` ```
二者的效果是一样的。
上方代码中，箭头后面的内容，就相当于 return 的内容（**返回值**）。
在箭头函数中，如果方法体内有两句话，那就需要在方法体外边加上{}括号。如下： 在箭头函数中，如果方法体内有两句话，那就需要在方法体外边加上{}括号。如下：
```javascript ```javascript
var fn2 = (a, b) => { var fn2 = (a, b) => {
console.log('haha'); console.log('haha');
@ -563,6 +569,12 @@ console.log(fn1(1, 2)); //输出结果：3
从上面的箭头函数中，我们可以很清晰地找到函数名、参数名、方法体。 从上面的箭头函数中，我们可以很清晰地找到函数名、参数名、方法体。
上方代码中：
- 如果有且仅有1个参数，则`()`可以省略
- 如果方法体内有且仅有1条语句，则`{}`可以省略，但前提是，这条语句必须是 return。
### 参数默认值 ### 参数默认值
当然，在 ES6 中定义方法时，我们还可以给方法里的参数加一个**默认值**（缺省值）： 当然，在 ES6 中定义方法时，我们还可以给方法里的参数加一个**默认值**（缺省值）：
@ -573,7 +585,6 @@ console.log(fn1(1, 2)); //输出结果：3
如下： 如下：
```javascript ```javascript
var fn2 = (a, b = 5) => { var fn2 = (a, b = 5) => {
console.log('haha'); console.log('haha');
@ -609,8 +620,7 @@ console.log(fn1(1, 2)); //输出结果：3
ES5中，this指向的是函数被调用的对象；而ES6的箭头函数中，this指向的是函数被定义时。 ES5中，this指向的是函数被调用的对象；而ES6的箭头函数中，this指向的是函数被定义时。
所以说，箭头韩注重，一定要注意this的指向。 所以说，箭头函数，一定要注意this的指向。
## 模块化 ## 模块化