ES6 变量的解构赋值

es6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。本质上，这种写法属于“模式匹配”，等号两边模式相同。

一，数组解构：

根据顺序来赋值

let [a,b,c] = [0,1,2];  // a=0,b=1,c=2
let [a,[b,c],d] = [0,1,2]   // 报错  不对应
let [a,[b,c],d] = [0,[1,2],3]   // a=0,b=1,c=2,d=3
let [ , , third ] = ['foo','bar','baz']
let [head,...tail ] = [1,2,3,4]  // head=1,tail=[2,3,4]
let [x,y,..z] = ['a']    //x=a,y=undefined,z=[ ]

　　

如果解构不成功，变量的值为undefined。

 

默认值

let [foo='true'] = [ ];  // foo=true
let [foo='false'] = [ ]; // foo=false
let [a,b='javascript'] = ['js']; 
console.log(a+b);   // jsJavascript

　

不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。

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

如果等号左边不是可遍历结构，那么会报错

let [foo] = 1/false/NaN/undefined/null /{}

set结构，可使用数组的解构赋值

let [x,y,z] = new set(['a','b','c']); // x = a

事实上，只要某种数据结构具有Iterator接口，都可以解构。

在默认值的情况下，我们必须理解undefined和Null的区别

let [a,b='javascript'] = ['js'，undefined ];
console.log(a+b);  jsJavascript
let [a,b='javascript'] = ['js'，null];
console.log(a+b);  jsnull

默认值可以引用其他变量，但该变量必须已经声明

let [x=1,y=x] = []  //x=1;y=1
let [x=y,y=1] =[]  // 报错 y is not defined

　　

二，对象的解构赋值

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

let {foo,bar} = {foo:'lala',bar:'技术'}；

console.log(foo+bar)  lala技术

若变量名和属性名不一样，则写成：

let obj = {first:'hello',last:'world'};
let {first:f,last:l} = obj          // f=hello,l=world

let foo;
{foo} = {foo:'Lala'};
console.log(foo); 报错

解决是：（{foo} = {foo:'Lala'};） 加上圆括号　　

 

也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应得变量。真正被赋值得是后者，而不是前者。

与数组一样，解构也可以用于嵌套结构的对象。

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

三，字符串的解构

const [ a,b,c,d ] = 'Lava';  //a=L,b=a,c=v,d=a

单引号的解析更快，做好用单引号

字符串的解构赋值，字符串被转换了一个类似数组的对象。
const [a,b,c,d,e] = 'hello';  // a=h,b=e,c=l,d=l,e=o
let {length:len} = 'hello'   // len = 5

关于圆括号和解构赋值的关系：
如果要将一个已经声明的变量用于解构赋值，必须非常小心。
let x;
{x} = {x:1}
因为 JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题。  （建议只要有可能，就不要在模式中放圆括号）。
let x;
({x}={x:1})

由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。
let arr=[1,2,3];
let {0:first,[arr.length-1]:last}= arr;   // fisrt=1 last=3



解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。
let {toString:s} = 123
s === Number.prototype.toString   // true
let {toString:s} = true
s === Boolean.prototype.toString // true

函数的参数也可以解构赋值
function fun([x,y]){return x+y}
fun([1,2]) // 3 

　　

用途：
交换变量的值
从函数返回多个值
解构赋值可以方便地将一组参数与变量名对应起来
提取json数据
函数参数的默认值
遍历Map结构

在实战项目中，json数据格式还是很普遍的，有了es6帮助，可以提高不少效率