update:箭头函数
This commit is contained in:
qianguyihao
parent
4b62e3e5d7
commit
57be9b64b2
@ -173,7 +173,7 @@ let 和 const 的作用如下：
|
||||
```
|
||||
|
||||
|
||||
**代码2**、上面的代码中，如果我们用 let 定义变量 i：
|
||||
**代码2**、上面的代码中，如果我们改为用 let 定义变量 i：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -207,7 +207,7 @@ let 和 const 的作用如下：
|
||||
|
||||
|
||||
|
||||
上面这个运行结果，才是我们预期的效果。我们用 let 定义变量i，在循环的过程中，每执行一次循环体，就会诞生一个新的 i。循环体执行4次，就会有四个 i。
|
||||
上面这个运行结果，才是我们预期的效果。我们用 let 定义变量 i，在循环的过程中，每执行一次循环体，就会诞生一个新的 i。循环体执行4次，就会有四个 i。
|
||||
|
||||
## 变量的解构赋值
|
||||
|
||||
@ -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
|
||||
const [a, b, c, d] = 'smyhvae';
|
||||
console.log(a);
|
||||
@ -500,13 +510,12 @@ for…of 的循环可以避免我们开拓内存空间，增加代码运行效
|
||||
|
||||
```
|
||||
|
||||
注意，上方代码中，倒数第二行用的是单引号，最后一行用的是反引号（在tab键的上方）。
|
||||
**注意**，上方代码中，倒数第二行用的符号是单引号，最后一行用的符号是反引号（在tab键的上方）。
|
||||
|
||||
参考链接：
|
||||
|
||||
- [ES6的rest参数和扩展运算符](https://segmentfault.com/a/1190000010222698)
|
||||
|
||||
|
||||
## 箭头函数
|
||||
|
||||
需要说明的是，ES6中，函数新增了很多特性。例如：
|
||||
@ -525,7 +534,6 @@ for…of 的循环可以避免我们开拓内存空间，增加代码运行效
|
||||
|
||||
这一段，我们来讲一下箭头函数。
|
||||
|
||||
|
||||
定义和调用函数：（传统写法）
|
||||
|
||||
```javascript
|
||||
@ -538,7 +546,7 @@ console.log(fn1(1, 2)); //输出结果：3
|
||||
|
||||
定义和调用函数：（ES6中的写法）
|
||||
|
||||
```
|
||||
```javascript
|
||||
|
||||
var fn2 = (a, b) => a + b;
|
||||
|
||||
@ -546,12 +554,10 @@ console.log(fn1(1, 2)); //输出结果：3
|
||||
|
||||
```
|
||||
|
||||
|
||||
上方代码中，箭头后面的内容，就相当于 return 的内容（**返回值**）。
|
||||
二者的效果是一样的。
|
||||
|
||||
在箭头函数中，如果方法体内有两句话，那就需要在方法体外边加上{}括号。如下：
|
||||
|
||||
|
||||
```javascript
|
||||
var fn2 = (a, b) => {
|
||||
console.log('haha');
|
||||
@ -563,6 +569,12 @@ console.log(fn1(1, 2)); //输出结果：3
|
||||
|
||||
从上面的箭头函数中，我们可以很清晰地找到函数名、参数名、方法体。
|
||||
|
||||
上方代码中：
|
||||
|
||||
- 如果有且仅有1个参数，则`()`可以省略
|
||||
|
||||
- 如果方法体内有且仅有1条语句，则`{}`可以省略，但前提是，这条语句必须是 return。
|
||||
|
||||
### 参数默认值
|
||||
|
||||
当然，在 ES6 中定义方法时，我们还可以给方法里的参数加一个**默认值**（缺省值）：
|
||||
@ -573,7 +585,6 @@ console.log(fn1(1, 2)); //输出结果：3
|
||||
|
||||
如下：
|
||||
|
||||
|
||||
```javascript
|
||||
var fn2 = (a, b = 5) => {
|
||||
console.log('haha');
|
||||
@ -609,8 +620,7 @@ console.log(fn1(1, 2)); //输出结果：3
|
||||
|
||||
ES5中，this指向的是函数被调用的对象；而ES6的箭头函数中，this指向的是函数被定义时。
|
||||
|
||||
所以说，箭头韩注重，一定要注意this的指向。
|
||||
|
||||
所以说，箭头函数，一定要注意this的指向。
|
||||
|
||||
## 模块化
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user