update: 解构赋值
This commit is contained in:
@@ -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
|
||||
```
|
||||
|
||||
输出结果:
|
||||
|
||||

|
||||
|
||||
## for of 循环
|
||||
|
||||
ES6 中,如果我们要遍历一个数组,可以这样做:
|
||||
打印结果:
|
||||
|
||||
```
|
||||
let arr1 = [1, 2, 3, 4, 5];
|
||||
|
||||
for (let value of arr1) {
|
||||
console.log(value);
|
||||
}
|
||||
h
|
||||
e
|
||||
l
|
||||
string
|
||||
```
|
||||
|
||||
输出结果:
|
||||
|
||||

|
||||
|
||||
for…of 的循环可以避免我们开拓内存空间,增加代码运行效率,所以建议大家在以后的工作中使用 for…of 循环。
|
||||
## 我的公众号
|
||||
|
||||
注意,上面的数组中,`for of`获取的是数组里的值;`for in`获取的是 index 索引值。
|
||||
想学习**代码之外的技能**?不妨关注我的微信公众号:**千古壹号**。
|
||||
|
||||
### Map 对象的遍历
|
||||
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
|
||||
|
||||
`for of`既可以遍历数组,也可以遍历 Map 对象。
|
||||

|
||||
|
||||
## 模板字符串
|
||||
|
||||
我们以前让字符串进行拼接的时候,是这样做的:(传统写法的字符串拼接)
|
||||
|
||||
```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
|
||||
@@ -56,10 +73,6 @@ console.log(fn1(1, 2)); //输出结果:3
|
||||
|
||||
上方代码中:
|
||||
|
||||
- 如果有且仅有1个参数,则`()`可以省略
|
||||
|
||||
- 如果方法体内有且仅有1条语句,则`{}`可以省略,但前提是,这条语句必须是 return。
|
||||
|
||||
### this的指向
|
||||
|
||||
> 箭头函数只是为了让函数写起来更优雅吗?当然不是,还有一个很大的作用是与this的指向有关。
|
||||
Reference in New Issue
Block a user