ES6学习day02：变量的解构赋值

出差了一个月，所以这么久未更博，期间的学习笔记都是记录在纸质笔记本上，由此可见，不管去哪里，带上一支笔和一个笔记本的重要性。今天起会把纸质笔记本上记录的ES6知识点一点点搬到这里。今天先搬移变量的解构赋值。

解构的定义：

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

变量的解构赋值主要学习了以下五个部分：

• 数组的解构赋值
• 对象的解构赋值
• 字符串的解构赋值
• 函数参数的解构赋值
• 解构的用途

1.数组的解构赋值

es6的数组解构赋值写法如下：

本质上，这种写法属于“模式匹配”。

等号两边的模式要相同，左边的变量才会被赋给对应的值。

如果解构不成功，变量的值就等于undefined。如下：

• 1.不完全解构：

等号左边的模式，只匹配一部分等号右边的数组。这种情况，解构依然可以成功，如下：

• 2.指定默认值：

1.ES6内部使用严格相等运算符(===)判断一个位置是否有值。所以，如果一个数组成员不严格相等于undefined，默认值是不会生效的。

上面代码中，如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。

2.解构赋值允许指定默认值。

3.如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。

4.默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

• 3.哪些可以使用数组的解构赋值？(let和const命令)：

1.只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值。

2.对于set和map结构也乐意使用数组的解构。

3.不是可遍历结构，将会报错。

2.对象的解构赋值

对象的解构与数组不同。数组的元素是按次序排列的，变量的取值是由它的位置决定的；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

• 1.实质上，对象的解构赋值是下面形式的简写。

上面代码可以看出：对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

• 2.避免变量名与属性名不一致时出错，可写成下面这样：

• 3.对象的解构也可以设置默认值，同数组。

• 4.默认值生效的条件是，对象的属性值严格等于undefined。

• 5.由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

3.字符串的解构

1.字符串解构赋值时，字符串被转换成了一个类似数组的对象。

如下：

2.类似数组的对象都有一个length属性，可以对这个属性解构赋值。

如下：

4.函数参数的解构

1.函数的参数也可以使用解构。

用法如下：

在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。

2.函数参数的解构也可以使用默认值。

如下：

3.是对函数参数指定默认值，而不是为变量x和y指定默认值。

5.解构的用途

变量的解构用途很多，详细参考阮一峰老师的ES6入门中的变量的解构一节。

• 1.交换变量的值

  let x = 1;
  let y = 2;
  
  [x, y] = [y, x];
  

• 2.从函数返回多个值。

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值很方便。

• 3.函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来。

• 4.提取JSON数据

• 5.函数参数的默认值

• 6.遍历map结构

任何部署了 Iterator 接口的对象，都可以用for…of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便

• 7.输入模块的指定方法