es6解构简述

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
一、数组的解构赋值
完全解构：左边的变量和右边的值一一匹配的关系

let [a,b,c] = ['tom',20,true];
console.log(a,b,c);//tom 20 true

不完全解构：左边的变量只匹配右边值的一部分

let [a,b,c] = ['tom',20,true,11,[]];
console.log(a,b,c);//tom 20 true

解构不成功: 左边的一部分变量匹配右边的值,剩下的变量为undefined

let [a,b,c,d,e] = [1,2,3];
console.log(a,b,c,d,e);//1 2 3 undefined undefined

集合解构

let [a,b,[...c]] = [1,2,[3,4,5]];
console.log(a,b,c);//1 2 [ 3, 4, 5 ]

如果左边的变量有默认值，只要变量的内容发生改变,那么默认值就会被覆盖，当变量匹配到的值为undefined的时候,默认值才会生效

let [a=4,b=5,c=6,d=7] = [1,2];
console.log(a,b,c,d);//1 2 6 7

默认值也可以为函数

let f = () =>{
    return 2
}
let [x,y = f()] = [1]; 
console.log(x,y);//1 2

数组嵌套对象

let [a,{username:user}] = ['hello',{username:'tom'}];
console.log(a,user);//hello tom

二、对象的解构赋值

let {a:a,b:b} = {a:10,b:20};
console.log(a,b);//10 20

如果属性名和变量名相同可以进行简写

let {a,b} = {a:10,b:20};
console.log(a,b);//10 20

如果变量名与属性名不同，则需要注意值赋给了谁

let {a:c,b:d} = {a:10,b:20};
console.log(c,d);//10 20

嵌套解构

let obj = {p:['Hello',{y:'World'}]}; 
 let {p:[x,{y}]} = obj;
 console.log(x,y) ;//Hello World

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

let [a,b,c,d,e]='hello';
console.log(a,b,c,d,e);//h e l l o

也可以对数组的属性解构

let {length:len}='hello'; 
console.log(len);//5
let {trim} = 'hello';
console.log(trim === String.prototype.trim);//true

四、数值和布尔值解构
无法被解构，不具备迭代器

let {a,b,c} = 123;
console.log(a,b,c);//undefined undefined undefined
let {a,b,c} = true;
console.log(a,b,c);//undefined undefined undefined
let [a,b,c] = 123;
console.log(a,b,c);//报错is not iterable
let [a,b,c] = true；
console.log(a,b,c);//报错is not iterable

五、函数参数的解构赋值

let add = ({a,b}) =>{
    return a+b
}
let res = add({a:1,b:1});
console.log(res);//2

解构中用来交换两个变量的最简单的方法：

let a = 1;
let b = 2;
[a,b] = [b,a];
console.log(a,b);//2 1

注意let b=2后面一定要加分号，不然会报错。