解構賦值是對賦值運算子的擴充套件

它是一種針對陣列或物件進行模式匹配，然後對其中的變數進行賦值

在程式碼書寫航簡潔且易讀，語義更加清晰明瞭，也方便了複雜物件中資料欄位獲取

在結構中，有下面兩部分參與：

解構的源：解構賦值表示式的右邊部分

解構的目標：解構賦值表示式的左邊部分

一. 對陣列的解構

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();//空陣列