ES6的解构赋值

解构赋值是对赋值运算符的扩展

它是一种针对数组或对象进行模式匹配，然后对其中的变量进行赋值

在代码书写航简洁且易读，语义更加清晰明了，也方便了复杂对象中数据字段获取

在结构中，有下面两部分参与：

解构的源：解构赋值表达式的右边部分

解构的目标：解构赋值表达式的左边部分

一.  对数组的解构

1.数组解构下等号右边的值必须是可以遍历的

2. ...解构的时候，只能卸载尾部，不能写在中间

3. 解构赋值的默认值，只有对应的位置为undefined，才可以用默认值

例子1：

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

例子2：可嵌套

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

例子3：可忽略

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

例子4：不完全解构

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

 例子5：剩余运算符

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

例子6：结构字符串

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

例子7：解构默认值

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

注意：当解构模式有匹配结果，且匹配结果是undefined时，会触发默认值作为返回结果；

二.对对象解构

1.{}(字面量)是不可以遍历的

2.object结构重命名

例子1：基础

let {foo,bar} = {foo:'aaa',bar:'bbb'};
consolel.log(foo,bar);//foo='aaa',bar='bbb'
let {ba2:foo} = {ba2:'ddd'}
console.log(foo);//'ddd'

例子2：解构重命名

let {x:str,y:num} = {y:'123',x:'abc'};
console.log(str,num);//atr='abc',num='123'

例子3：默认值会被覆盖

let {y:str,x:num,z=100} = {x:'123',y:'abc',z:22};
console.log(z);//22

例子4：不完全解构

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

例子5：

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

三. 数组也是一种对象

例子1：根据索引取数组

let arr = [1,2,3];
let {0:first,[arr.length-1]:last} = arr;
console.log(first,last);//first=1,last=3

错误写法：

let x;
{x} = {x:1};//js会认为是代码块，索引会报错
({x}={x:1})//加上小括号执行

四. 字符串解构

例子1：

const [a,b,c,d,e] = 'hello';

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

例子2：

const {length} = 'hello';//length= 5;

例子3：

let {toString:s} = 123;//数字上的toString()方法重命名
console.log(s);//'123'

例子4：

let {random,sin,cos} = Math;
console.log(random());//0.8051133247020075

例子5：

let {log} = console
log('aa');

五. 函数也可以用解构去写

例子1：

//老写法
function fn(person){
     let name = person.name;
     let age = person.age;
     console.log(person.name,person.age);
}
fn({name:'张三',age:15});//'张三',15
//新写法
function fn(name,age){
    console.log(name,age);  
}
fn({name:'张三',age:18});

例子2：默认参数通常应该在最后

function fn(a=1,b,c=3){//不报错，但是不好
   console.log(a,b,c);
}
function fn1(a,b=2,c=3){//不报错，但是不好
  console.log(a,b,c);
}
let [,a] = [1,2];//这种形式数组不报错
fn(,30);//报错，和解构数组不一样
//...rest运算符放在函数内取剩余参数，只能用在最后一个位置上

例子3：

//老写法
function sum(){
   let s = 0;
   [...arguments].forEach(function(n){

       s += n;
   })
   return s;
}
sum(20,29,44,86,78);//257
//新写法
function sum(...number){
   let s = 0;
   number.forEach(function(n){
         s += n;
   });
   return s;
}
sum(20,29,44,86,78);//257

例子4：

function sayHi(...persons,greeting){}//报错
function fn(...a){console.log(a)}
fn();//空数组