前言
ES6允许按照一定模式从数组和对象中提取值再对变量赋值，这被称为解构。这种新模式会映射出正在解构的数据结构，只有那些与模式相匹配的数据才会被提取出来。
一、数组的解构赋值
ECMAScript语法规范中的数组解构赋值基本是按照等号左边与等号右边进行匹配的。
数组解构时数组的元素是按次序排列的，变量取值由其位置决定。
1.模式匹配
这种方式的数组解构是等号两边的模式相同，左边的变量就会被赋予对应的值。
let [a,b,c]=[1,2,3];//解构后a=1,b=2,c=3
2.嵌套方式
嵌套数组进行解构，支持任意深度的嵌套。
let[a,[[b],c]]=1,2,3;//解构后a=1,b=2,c=3
3.不完全解构
当等号左边的模式只匹配等号右边的数组的一部分时，这种情况就是不完全解构，但是仍能解构成功。
let[a,,c]=[1,2,3];//解构后a=1,c=3
4.省略号解构
在ECMAScript语法规范中，可用带省略号的方式进行匹配，但是要求带有省略号的变量放到最后，否则解构无效。
let[head,...tail]=[1,2,3];//解构后head=1,tail=[2,3]
5.含有默认值的解构
在ECMAScript语法规范中，左侧数组中是可以有默认值的。右侧数组中是undefined或没有左侧对应的值时默认值生效，否则默认值不生效，左侧就用右侧数组的值。
let[a=0,b=1,c=2]=[1,undefined];//解构后a=1,b=1,c=2
6.字符串解构处理
在ECMAScript语法规范中，右侧可以是字符串，把字符串的每一个字符解构到相对应等号左边的变量中。
var[a,b,c]='hello';//解构后a='h',b='e',c='l'
注：数组解构失败后是undefined，即let [a,b]=[1];则a=1,b值是undefined
二、对象的解构赋值
对象的解构赋值与数组的解构赋值的区别是：数组是按照位置次序进行匹配的，而对象是按照属性的名称进行匹配的，不一定按照属性出现的次序先后。
1.基本形式
左边只有key，其实是key与value相同的简写。（与数组一样，解构失败也是undefined）
let {fo,ba}={fo:'aaa',ba:'bbb'};//解构后fo='aaa',ba='bbb' let {ba,fo}={fo:'aaa',ba:'bbb'};//解构后fo='aaa',ba='bbb' let {fo}={ba:'bbb'};//解构后fo值是undefined;
2.左边变量是key:value形式
let {foo:baz}={foo='aaa',ba:'bbb'};//解构后baz='aaa' let obj={first:'hello',last:'world'}; let {first:f,last:g}=obj;//解构后f='hello',g='world'
对象的解构赋值是内机制，是先找到同名属性，然后再赋给相应的变量，真正被赋值的是前者，而不是后者
三、解构赋值的主要用途
1.从函数返回多个值
function example1() { return [1, 2, 3]; } let [a, b, c] = example1(); console.log(a, b, c); //1,2,3 function example2() { return { fo: 1, ba: 2 }; } let { fo, ba } = example2(); console.log(fo, ba); //1,2
2.函数参数的定义
function arrSum([x, y, z]) { return x + y + z; } console.log(arrSum([1, 2, 3])); function objSum({ x, y, z }) { return x + y + z; } console.log(objSum({ z: 1, x: 2, y: 3 }));
3.提取键值对形式对象的数据
window.onload = function() { let jData = { name: '王五', age: 20, like: ['篮球', '乒乓球'] }; let { name, age, like: mylike } = jData; console.log(name, age, mylike); }
3.遍历Map
window.onload = function() { const map = new Map(); map.set('name', '王五'); map.set('age', 20); for (let [key, value] of map) { console.log(key + ":" + value); } for (let [key] of map) { console.log(key); } for (let [, value] of map) { console.log(value); } }
总结
以上就是对解构赋值的讲诉以及用处的归纳。
