update: 解构赋值

This commit is contained in:
qianguyihao 2020-07-13 21:07:43 +08:00
parent 54963f4918
commit ea62903be5
4 changed files with 102 additions and 67 deletions

View File

@ -187,25 +187,43 @@ ES6中引入了**模板字面量**,让我们省去了字符串拼接的烦恼
### 在模板字符串中插入变量
举例
以前让字符串进行拼接的时候是这样做的传统写法的字符串拼接
```js
let name = 'qianguyihao';
// 下面这一行是模板字面量,注意语法格式
console.log(`我是${name}`); // 打印结果:我是 qianguyihao
```javascript
var name = 'smyhvae';
var age = '26';
console.log('name:' + name + ',age:' + age); //传统写法
```
这种写法比较繁琐而且容易出错
现在有了 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
const a = 5;
const b = 10;
console.log('this is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
```
现在通过模板字面量我们可以使用一种更优雅的方式来表示
现在通过模板字面量我们可以使用一种更优雅的方式来表示
```js
const a = 5;

View File

@ -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 的循环可以避免我们开拓内存空间增加代码运行效率所以建议大家在以后的工作中使用 forof 遍历数组
注意上面的数组中`for ... of`获取的是数组里的值如果采用`for ... in`遍历数组则获取的是 index 索引值
### Map 对象的遍历
`for ... of`既可以遍历数组也可以遍历 Map 对象
## for in遍历对象的属性名
> `for ... in`主要用于遍历对象不建议用来遍历数组
语法

View File

@ -36,13 +36,13 @@ var c = arr[2];
let [a, b, c] = [1, 2, 3];
```
二者的效果是一样的
二者的效果是一样的但明显后者的代码更简洁优雅
### 未匹配到的情况
数据的结构赋值是根据位置进行一一对应来赋值的可如果左边的数量大于右边的数量时也就是变量的数量大于值的数量时多余的变量要怎么处理呢
- 如果变量在一一对应时没有找到对应的值那么**多余的变量会被赋值为 undefined**
答案是如果变量在一一对应时没有找到对应的值那么**多余的变量会被赋值为 undefined**
### 解构时左边允许有默认值
@ -111,18 +111,27 @@ var sex = json.sex;
现在有了 ES6 之后我们可以使用对象解构的方式进行赋值举例如下
```js
const person = { name: 'qianguyihao', age: 28 };
let { name, age } = person; // 对象的结构赋值
const person = { name: 'qianguyihao', age: 28, sex: '男' };
let { name, age, sex } = person; // 对象的结构赋值
console.log(name); // 打印结果qianguyihao
console.log(age); // 打印结果28
console.log(sex); // 打印结果:男
```
上方代码可以看出对象的解构与数组的结构有一个重要的区别**数组**的元素是按次序排列的变量的取值由它的**位置**决定**对象的属性没有次序****根据键来取值**
### 未匹配到的情况
对象的结构赋值是根据属性名进行一一对应来赋值的可如果左边的数量大于右边的数量时也就是变量的数量大于值的数量时多余的变量要怎么处理呢
答案是如果变量在一一对应时没有找到对应的值那么**多余的变量会被赋值为 undefined**
### 给左边的变量自定义命名
对象的结构赋值里左边的变量名一定要跟右边的变量名保持一致么答案是不一定我们可以单独给左边的变量自定义命名呢
对象的结构赋值里左边的变量名一定要跟右边的属性名保持一致么答案是不一定我们可以单独给左边的变量自定义命名
举例如下
@ -171,68 +180,30 @@ console.log(foo); //输出结果smyhvae
字符串也可以解构这是因为此时字符串被转换成了一个类似数组的对象举例如下
```javascript
const [a, b, c, d] = 'smyhvae';
const [a, b, c, d] = 'hello';
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(typeof a); //输出结果string
```
输出结果
![](http://img.smyhvae.com/20180304_1626.png)
## for of 循环
ES6 如果我们要遍历一个数组可以这样做
打印结果
```
let arr1 = [1, 2, 3, 4, 5];
for (let value of arr1) {
console.log(value);
}
h
e
l
string
```
输出结果
![](http://img.smyhvae.com/20180304_2016.png)
forof 的循环可以避免我们开拓内存空间增加代码运行效率所以建议大家在以后的工作中使用 forof 循环
## 我的公众号
注意上面的数组中`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)

View File

@ -19,6 +19,23 @@ ES6在**函数扩展**方面,新增了很多特性。例如:
## 箭头函数
### 定义箭头函数的语法
语法
```js
(参数1, 参数2 ...) => { 方法体 }
```
解释
- 如果有且仅有1个参数`()`可以省略
- 如果方法体内有且仅有1条语句`{}`可以省略但前提是这条语句必须是 return
### 举例
定义和调用函数传统写法
```javascript
@ -56,10 +73,6 @@ console.log(fn1(1, 2)); //输出结果3
上方代码中
- 如果有且仅有1个参数`()`可以省略
- 如果方法体内有且仅有1条语句`{}`可以省略但前提是这条语句必须是 return
### this的指向
> 箭头函数只是为了让函数写起来更优雅吗当然不是还有一个很大的作用是与this的指向有关