update: 解构赋值
This commit is contained in:
parent
54963f4918
commit
ea62903be5
@ -187,25 +187,43 @@ ES6中引入了**模板字面量**,让我们省去了字符串拼接的烦恼
|
|||||||
|
|
||||||
### 在模板字符串中插入变量
|
### 在模板字符串中插入变量
|
||||||
|
|
||||||
举例:
|
以前,让字符串进行拼接的时候,是这样做的:(传统写法的字符串拼接)
|
||||||
|
|
||||||
```js
|
```javascript
|
||||||
let name = 'qianguyihao';
|
var name = 'smyhvae';
|
||||||
|
var age = '26';
|
||||||
// 下面这一行是模板字面量,注意语法格式
|
console.log('name:' + name + ',age:' + age); //传统写法
|
||||||
console.log(`我是${name}`); // 打印结果:我是 qianguyihao
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
这种写法,比较繁琐,而且容易出错。
|
||||||
|
|
||||||
|
现在,有了 ES6 语法,字符串拼接可以这样写:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var name = 'qianguyihao';
|
||||||
|
var age = '26';
|
||||||
|
|
||||||
|
console.log('我是' + name + ',age:' + age); //传统写法
|
||||||
|
|
||||||
|
console.log(`我是${name},age:${age}`); //ES6 写法。注意语法格式
|
||||||
|
```
|
||||||
|
|
||||||
|
**注意**,上方代码中,倒数第二行用的符号是单引号,最后一行用的符号是反引号(在 tab 键的上方)。
|
||||||
|
|
||||||
|
参考链接:
|
||||||
|
|
||||||
|
- [ES6 的 rest 参数和扩展运算符](https://segmentfault.com/a/1190000010222698)
|
||||||
|
|
||||||
### 在模板字面量中插入表达式
|
### 在模板字面量中插入表达式
|
||||||
|
|
||||||
在字符串中插入表达式,以往的写法必须是这样的:
|
以前,在字符串中插入表达式的写法必须是这样的:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const a = 5;
|
const a = 5;
|
||||||
const b = 10;
|
const b = 10;
|
||||||
console.log('this is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
|
console.log('this is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
|
||||||
```
|
```
|
||||||
现在通过模板字面量,我们可以使用一种更优雅的方式来表示:
|
现在,通过模板字面量,我们可以使用一种更优雅的方式来表示:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const a = 5;
|
const a = 5;
|
||||||
|
@ -150,9 +150,42 @@ if (obj.name) {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## 遍历对象的属性名:for in
|
## for of:遍历数组
|
||||||
|
|
||||||
> `for in`主要用于遍历对象,不建议用来遍历数组。
|
|
||||||
|
ES6 中,如果我们要遍历一个数组,可以这样做:
|
||||||
|
|
||||||
|
```js
|
||||||
|
let arr1 = [2, 6, 8, 5];
|
||||||
|
|
||||||
|
for (let value of arr1) {
|
||||||
|
console.log(value);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
打印结果:
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
2
|
||||||
|
6
|
||||||
|
8
|
||||||
|
5
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
for ... of 的循环可以避免我们开拓内存空间,增加代码运行效率,所以建议大家在以后的工作中使用 for…of 遍历数组。
|
||||||
|
|
||||||
|
注意,上面的数组中,`for ... of`获取的是数组里的值;如果采用`for ... in`遍历数组,则获取的是 index 索引值。
|
||||||
|
|
||||||
|
### Map 对象的遍历
|
||||||
|
|
||||||
|
`for ... of`既可以遍历数组,也可以遍历 Map 对象。
|
||||||
|
|
||||||
|
|
||||||
|
## for in:遍历对象的属性名
|
||||||
|
|
||||||
|
> `for ... in`主要用于遍历对象,不建议用来遍历数组。
|
||||||
|
|
||||||
语法:
|
语法:
|
||||||
|
|
||||||
|
@ -36,13 +36,13 @@ var c = arr[2];
|
|||||||
let [a, b, c] = [1, 2, 3];
|
let [a, b, c] = [1, 2, 3];
|
||||||
```
|
```
|
||||||
|
|
||||||
二者的效果是一样的。
|
二者的效果是一样的,但明显后者的代码更简洁优雅。
|
||||||
|
|
||||||
### 未匹配到的情况
|
### 未匹配到的情况
|
||||||
|
|
||||||
数据的结构赋值,是根据位置进行一一对应来赋值的。可如果左边的数量大于右边的数量时(也就是变量的数量大于值的数量时),多余的变量要怎么处理呢?
|
数据的结构赋值,是根据位置进行一一对应来赋值的。可如果左边的数量大于右边的数量时(也就是变量的数量大于值的数量时),多余的变量要怎么处理呢?
|
||||||
|
|
||||||
- 如果变量在一一对应时,没有找到对应的值,那么,**多余的变量会被赋值为 undefined**。
|
答案是:如果变量在一一对应时,没有找到对应的值,那么,**多余的变量会被赋值为 undefined**。
|
||||||
|
|
||||||
### 解构时,左边允许有默认值
|
### 解构时,左边允许有默认值
|
||||||
|
|
||||||
@ -111,18 +111,27 @@ var sex = json.sex;
|
|||||||
现在,有了 ES6 之后,我们可以使用对象解构的方式进行赋值。举例如下:
|
现在,有了 ES6 之后,我们可以使用对象解构的方式进行赋值。举例如下:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const person = { name: 'qianguyihao', age: 28 };
|
const person = { name: 'qianguyihao', age: 28, sex: '男' };
|
||||||
let { name, age } = person; // 对象的结构赋值
|
let { name, age, sex } = person; // 对象的结构赋值
|
||||||
|
|
||||||
console.log(name); // 打印结果:qianguyihao
|
console.log(name); // 打印结果:qianguyihao
|
||||||
console.log(age); // 打印结果:28
|
console.log(age); // 打印结果:28
|
||||||
|
console.log(sex); // 打印结果:男
|
||||||
```
|
```
|
||||||
|
|
||||||
上方代码可以看出,对象的解构与数组的结构,有一个重要的区别:**数组**的元素是按次序排列的,变量的取值由它的**位置**决定;而**对象的属性没有次序**,是**根据键来取值**的。
|
上方代码可以看出,对象的解构与数组的结构,有一个重要的区别:**数组**的元素是按次序排列的,变量的取值由它的**位置**决定;而**对象的属性没有次序**,是**根据键来取值**的。
|
||||||
|
|
||||||
|
|
||||||
|
### 未匹配到的情况
|
||||||
|
|
||||||
|
对象的结构赋值,是根据属性名进行一一对应来赋值的。可如果左边的数量大于右边的数量时(也就是变量的数量大于值的数量时),多余的变量要怎么处理呢?
|
||||||
|
|
||||||
|
答案是:如果变量在一一对应时,没有找到对应的值,那么,**多余的变量会被赋值为 undefined**。
|
||||||
|
|
||||||
|
|
||||||
### 给左边的变量自定义命名
|
### 给左边的变量自定义命名
|
||||||
|
|
||||||
对象的结构赋值里,左边的变量名一定要跟右边的变量名保持一致么?答案是不一定。我们可以单独给左边的变量自定义命名呢?
|
对象的结构赋值里,左边的变量名一定要跟右边的属性名保持一致么?答案是不一定。我们可以单独给左边的变量自定义命名。
|
||||||
|
|
||||||
举例如下:
|
举例如下:
|
||||||
|
|
||||||
@ -171,68 +180,30 @@ console.log(foo); //输出结果:smyhvae
|
|||||||
字符串也可以解构,这是因为,此时字符串被转换成了一个类似数组的对象。举例如下:
|
字符串也可以解构,这是因为,此时字符串被转换成了一个类似数组的对象。举例如下:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
const [a, b, c, d] = 'smyhvae';
|
const [a, b, c, d] = 'hello';
|
||||||
console.log(a);
|
console.log(a);
|
||||||
console.log(b);
|
console.log(b);
|
||||||
console.log(c);
|
console.log(c);
|
||||||
console.log(d);
|
|
||||||
|
|
||||||
console.log(typeof a); //输出结果:string
|
console.log(typeof a); //输出结果:string
|
||||||
```
|
```
|
||||||
|
|
||||||
输出结果:
|
打印结果:
|
||||||
|
|
||||||
![](http://img.smyhvae.com/20180304_1626.png)
|
|
||||||
|
|
||||||
## for of 循环
|
|
||||||
|
|
||||||
ES6 中,如果我们要遍历一个数组,可以这样做:
|
|
||||||
|
|
||||||
```
|
```
|
||||||
let arr1 = [1, 2, 3, 4, 5];
|
h
|
||||||
|
e
|
||||||
for (let value of arr1) {
|
l
|
||||||
console.log(value);
|
string
|
||||||
}
|
|
||||||
```
|
```
|
||||||
|
|
||||||
输出结果:
|
|
||||||
|
|
||||||
![](http://img.smyhvae.com/20180304_2016.png)
|
|
||||||
|
|
||||||
for…of 的循环可以避免我们开拓内存空间,增加代码运行效率,所以建议大家在以后的工作中使用 for…of 循环。
|
## 我的公众号
|
||||||
|
|
||||||
注意,上面的数组中,`for of`获取的是数组里的值;`for in`获取的是 index 索引值。
|
想学习**代码之外的技能**?不妨关注我的微信公众号:**千古壹号**。
|
||||||
|
|
||||||
### Map 对象的遍历
|
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
|
||||||
|
|
||||||
`for of`既可以遍历数组,也可以遍历 Map 对象。
|
![](http://img.smyhvae.com/20200101.png)
|
||||||
|
|
||||||
## 模板字符串
|
|
||||||
|
|
||||||
我们以前让字符串进行拼接的时候,是这样做的:(传统写法的字符串拼接)
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var name = 'smyhvae';
|
|
||||||
var age = '26';
|
|
||||||
console.log('name:' + name + ',age:' + age); //传统写法
|
|
||||||
```
|
|
||||||
|
|
||||||
这种写法,比较繁琐,而且容易出错。
|
|
||||||
|
|
||||||
现在有了 ES6 语法,字符串拼接可以这样写:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var name = 'smyhvae';
|
|
||||||
var age = '26';
|
|
||||||
|
|
||||||
console.log('name:' + name + ',age:' + age); //传统写法
|
|
||||||
|
|
||||||
console.log(`name:${name},age:${age}`); //ES6 写法
|
|
||||||
```
|
|
||||||
|
|
||||||
**注意**,上方代码中,倒数第二行用的符号是单引号,最后一行用的符号是反引号(在 tab 键的上方)。
|
|
||||||
|
|
||||||
参考链接:
|
|
||||||
|
|
||||||
- [ES6 的 rest 参数和扩展运算符](https://segmentfault.com/a/1190000010222698)
|
|
||||||
|
@ -19,6 +19,23 @@ ES6在**函数扩展**方面,新增了很多特性。例如:
|
|||||||
|
|
||||||
## 箭头函数
|
## 箭头函数
|
||||||
|
|
||||||
|
### 定义箭头函数的语法
|
||||||
|
|
||||||
|
语法:
|
||||||
|
|
||||||
|
```js
|
||||||
|
(参数1, 参数2 ...) => { 方法体 }
|
||||||
|
```
|
||||||
|
|
||||||
|
解释:
|
||||||
|
|
||||||
|
- 如果有且仅有1个参数,则`()`可以省略
|
||||||
|
|
||||||
|
- 如果方法体内有且仅有1条语句,则`{}`可以省略,但前提是,这条语句必须是 return。
|
||||||
|
|
||||||
|
|
||||||
|
### 举例
|
||||||
|
|
||||||
定义和调用函数:(传统写法)
|
定义和调用函数:(传统写法)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@ -56,10 +73,6 @@ console.log(fn1(1, 2)); //输出结果:3
|
|||||||
|
|
||||||
上方代码中:
|
上方代码中:
|
||||||
|
|
||||||
- 如果有且仅有1个参数,则`()`可以省略
|
|
||||||
|
|
||||||
- 如果方法体内有且仅有1条语句,则`{}`可以省略,但前提是,这条语句必须是 return。
|
|
||||||
|
|
||||||
### this的指向
|
### this的指向
|
||||||
|
|
||||||
> 箭头函数只是为了让函数写起来更优雅吗?当然不是,还有一个很大的作用是与this的指向有关。
|
> 箭头函数只是为了让函数写起来更优雅吗?当然不是,还有一个很大的作用是与this的指向有关。
|
Loading…
Reference in New Issue
Block a user