想学变量的解构赋值？看完这一篇就够了

序言

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

数组的解构赋值

基本用法

       像上面的例子，可以从数组中提取值，按照对应位置对变量赋值，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值，如果解构不成功，变量的值就等于undefined

       像上面因为模式并不匹配，所以a,b,c变量并没有解析成功，为undefined
还有一种情况是不完全解构，即等号左边的模式只匹配一部分的等号右边的数组

       事实上，只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值。具体关于Iterator接口，会在后面进行详细解释

默认值

       解构赋值允许指定默认值，但是默认值只在没有赋到值（即为undefined的情况下）生效，如果是null，默认值不生效，因为ES6内部是使用严格相等运算符（===）来判断一个位置是否有值的，null不严格等于undefined，默认值是不会生效的

       如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到时才会求值
默认值可以引用解构赋值的其他变量，但该变量必须已经声明

对象的解构赋值

基本用法

       对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值是由它的位置决定的；而对象的属性没有次序，变量必须与属性同名才能取到正确的值，总而言之，对象的解构赋值的内部机制是先找到同名属性，然后再赋值给对应的变量
同学们可以看下下面的例子体会一下

let { bar, foo} = { foo: 'aaa', bar: 'bbb' };
foo // 'aaa'
bar // 'bbb'
var { foo: baz} = { foo: 'aaa', bar: 'bbb' };
// 等价于baz = 'aaa';

       上例中的第二个解构赋值，真正被赋值的是后者，而不是前者，foo是匹配的模式，baz才是变量，所以要注意对象的解构赋值冒号前的作为模式，只用作匹配，不能被赋值，下面给个稍微复杂的例子，同学们自己结合上面说的理解一下

       这里再次提醒一下，冒号前面的都是模式，不会被解构赋值，只是用于解构赋值的匹配

默认值

       默认值和数组的解构赋值类似，需要对象的属性值严格等于undefined才会生效

字符串的解构赋值

       字符串也可以解构赋值，这是因为此时字符串被转换成了一个类似数组的对象。类似数组的对象都有一个length属性，因此还可以对这个属性进行解构赋值

数值和布尔值的解构赋值

       解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。

       因为123不是对象或数组，所以转化为对象，toStr就赋值了Number.toString()方法。
由于undefined和null无法转为对象，所以对它们进行解构赋值时都会报错

函数参数的解构赋值

圆括号问题

       ES6的规则是，只要有可能导致解构的歧义，就不得使用圆括号，但是这条规则实际上不那么容易辨别，处理起来相当麻烦。因此建议，只要有可能，就不要在模式中放置圆括号

不能使用圆括号的情况

变量声明语句

函数参数

可以使用圆括号的情况

       可以使用圆括号的情况只有一种：赋值语句的非模式部分可以使用圆括号

解构赋值的用途

交换变量的值

let x = 1, y = 2;
[x, y] = [y, x]; //交换x,y的值

从函数返回多个值

function example(){
	return [1, 2, 3];
}
let [a, b, c] = example();

函数参数的定义

function f([x, y, z]){...}
f([1, 2, 3]);

提取JSON数据

let jsonData = {
	id: 42,
	status: "OK",
	data: [867, 5309]
};
let {id, status, data: number} = jsonData;

遍历Map结构

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

var map = new Map();
for(let [key, value] of map){...}

输入模块的指定方法

const {SourceMapConsumer, SourceNode} = require('source-map');

       小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！
       每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！