【系统学习ES6】第二节：解构赋值
【系统学习ES6】
本专题旨在对ES6的常用技术点进行系统性梳理，帮助大家对其有更好的掌握，希望大家有所收获。
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构是一种打破数据结构，将其拆分为更小部分的过程。
为何使用解构
传统写法中，从数组或对象中提取特定数据赋值给变量，编写了很多结构相同，变量不同的代码，例如：
let option = { name:'foo', type:'string' }; let name = option.name; let type = option.type;
以上代码的作用是，从option对象中提取name和type两个属性，赋值给变量name和type。此时只有两个变量，想象一下，如果有更多变量，那就要依次追加多句赋值。如果其中包含嵌套结构，那就要深入读取层级，才能找到目标变量。
也许是为了解决这种困扰，所以ES6为对象和数组添加了解构功能，在合适的场景下运用，大大减少代码量，提高工作效率。
解构成功的前提，是左右两侧类型一致，即：如果是对象解构，左侧被赋值变量必须包装在{ }内，同理，数组解构，左侧必须是[ ]。
对象解构
上文强调过：对象的解构，左侧必须是{ }。只要左侧的变量在右侧对象中有，即使位置不同，也可被成功赋值，但如果变量在右侧没有与之对应的属性，则会被赋值为undefined。
let option = { name:'foo', type:'string' };
let { name, type } = option;
// let { type, name } = option; // 此句与上句效果相同
console.log(name); // 'foo'
console.log(type); // 'string'
let { age } = option;
console.log(age); // undefined
let { name } = option;
console.log(name); // 'foo'
注意：对象解构前，必须提供初始值（即右侧的对象）。如果右侧没有值，程序会抛异常。
let { name }; // Uncaught SyntaxError:
为非同名变量赋值
如果变量名与对象属性名不一致，可以通过解构对变量赋值么？ES6的另一个拓展语法可以帮助我们。
let option = { name:'foo', type:'string' };
let { name: attrName, type: attrType} = option;
console.log(attrName); // 'foo'
console.log(attrType); // 'string'
这实际上说明，对象的解构赋值是下面形式的简写：
let { name: attrName, type: attrType} = { name:'foo', type:'string' };
也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
嵌套赋值
可以单层解构赋值，就支持嵌套赋值。前提是左右两边形式一致。
let option = { name: 'foo', type: 'string', start: { row: 1, col: 0 } }; let { start: { row } } = option; console.log(row); // 1
数组解构
数组的解构与对象有一个重要的不同。对象的解构按属性名决定的，左右两侧变量位置可以不一致，但变量必须与属性同名，才能取到正确的值。
数组的元素是按顺序排列的，变量的取值由它的位置决定。只要等号两边类型相同（都是数组格式），左侧变量会按照位置关系，被赋予右侧数组的同的值。在这个过程中，右侧数组本身不会发生变化。
let [name, type] = ['foo','string']; console.log(name); // 'foo' console.log(type); // 'string'
嵌套赋值
let [a, [b, c] = [1, [2, 3]]; console.log(name); // 1 console.log(type); // 2 console.log(height); // 3
如果左右形式不一致，可能会直接报错：
let [a] = 1; // Uncaught TypeError: 1 is not iterable
如果右侧数组元素数量比左侧变量多，可以解构成功。属于不完全匹配。
let [a, b] = [1, 2, 3]; console.log(a); // 1 console.log(b); // 2
如果右侧数组元素数量比左侧变量少，这种情况属于解构失败，解构失败的变量会被赋值为undefined。
let [a, b] = [1]; console.log(a); // 1 console.log(b); // undefined let [a, b, ...c] = [1]; console.log(a); // 1 console.log(b); // undefined console.log(b); // []
此时，b是undefined理解，那c为什么是数组？这不是解构的锅，相关知识点，后面会讨论到。
默认值设置
不管是数组还是对象，解构赋值都允许指定默认值。只有当右侧相应属性或位置的值全等（===）undefined，默认值才会生效。
数组：
let [a = 1] = []; // a=1 let [a, b = 2] = [1]; // a=1, b=2 let [a, b = 2] = [1, undefined]; // a=1, b=2 let [a, b = 2] = [1, null]; // a=1, b=null let [a, b = 2] = [1, ""]; // a=1, b=""
对象：
let { name, type = 'string' } = { name: 'foo'};
// name:'foo' type:'string'
let { name, type = 'string' } = { name: 'foo', type: undefined};
// name:'foo' type:'string'
let { name, type = 'string' } = { name: 'foo', type: null};
// name:'foo' type:'null'
let { name, type = 'string' } = { name: 'foo', type: ''};
// name:'foo' type:''
圆括号的妙用
（1）如果要将一个已经声明的变量用于解构赋值，要注意一下写法。
let name = 'bar'; { name } = { name: 'foo' }; console.log(name); // SyntaxError: syntax error
上面代码会报错，因为 JavaScript 引擎会将{name}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，才能解决这个问题。于是圆括号来了。数组同理。
let name = 'bar'; ({ name } = { name: 'foo' }); console.log(name); // 'foo'
字符串解构
字符串也可以解构，这是因为，此时字符串被转换成了一个类似数组的对象。
const [a,b,c,d,e]="lemoncool"; console.log(a); // l console.log(b); // e console.log(c); // m console.log(d); // 0 console.log(e); // n .....
混合解构
讨论完对象和数组的解构，其实可以基于二者来创造更复杂的表达式解构。比如json中，数组和对象混杂，此时想解析到某个信息。是否可以实现呢？答案是肯定的，前提是格式要对应正确，篇幅有限，此处不再举例。
解构实用场景
解构，除了基础的变量赋值外，用途还有很多。
1、交换变量的值
let x = 1; let y = 2; [x, y] = [y, x];
上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。
2、返回多个值
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。
function example() { return [1, 2, 3]; } let [a, b, c] = example();
3.引入脚手架中的指定方法
脚手架不想整体引入，可以指定引入某些方法。
import { cloneDeep, random } from 'lodash';
到此，变量解构的使用方法及注意事项已梳理完毕。
下一节我们会一起讨论【拓展运算符和res运算符】，感谢大家支持，希望大家在每一节中都有所得。
公棕号【前端便利贴】记录着一个程序媛的所见所得所想，分享日常技术笔记，内容覆盖了阅读、技术和个人思考~，关注公棕号更早获取更多文章。
觉得有用的话，小手点点【推荐】再走吖~~
