Typescript 解構 、展開

什么是解構、展開？

展開與解構作用相反，簡單來說：

解構：解構賦值允許你使用數組或對象字面量的語法，將數組和對象的屬性付給各種變量。

展開：允許你講一個數組展開為另一個數組，或一個對象展開為另一個對象。

1. 1. 數組解構

      // 1.數組元素的賦值-JavaScript語法
      var first=someArray[0];
      var second=someArray[1];
      var third=someArray[2];
      
      // 2.對比一下TypeScript、ES6提供簡介、高效、可讀的解構語法
      var [first,second,third]=someArray;
      
      // 3. 對任意深度的嵌套數組進行解構
      var [foo,[[bar],baz]]=[1,[[2],3]];
      console.log(foo);//1
      console.log(bar);//2
      console.log(baz);//3
      
      // 4.忽略尾隨元素
      let [first]=[1,2,3,4];
      console.log(first);//1
      
      // 5 .忽略部分元素
      let [,second,,forth]=[1,2,3,4];
      console.log(second);//2
      console.log(forth);//4

   2. 對象解構　

      // 1. 解構對象
      let o={
        a:'foo',
        b:12,      
        c:'bar' 
      };
      let {a,b}=o;
      
      // 2. 沒有聲明的賦值
      ({a,b}={a:'foo',b:12,c:'bar'});//注意此處，需要用括號括起來，因為javascript通常會以{起始的語句作為一個代碼塊。
      
      // 3.對象里面可以使用 ... 語法創建剩余變量
      let {a,...passthrough}=o;
      let total=passthrough.b+passthrough.c.length;
      
      // 4. 屬性重命名
      let {a:newName1,b:newName2}=o;
      
      //a:newName1讀作“a作為newName1”,等價於一下寫法：
      let newName1=o.a;
      let newName2=o.b;
      
      // 5. 指定類型
      let {a,b}:{a:string,b:number}=o;
      
      // 6 .指定默認值(即使b為udefined，obj的屬性a,b也都會有值)
      function keepWhole(obj:{a:string,b?:number}{
         let {a,b=1001}=obj; 
      });

   3. 展開　

      // 1. 數組展開
      let first=[1,2];
      let second=[3,4];
      let all=[0,...first,...second,5];
      console.log(all);//0,1,2,3,4,5
      
      // 2. 對象展開(屬性值覆蓋)
      let default={ food:'spicy',price:'$',drink:'coko'};
      let search={...default,food:'rich'};
      console.log(search);//{food:'rich',price:'$',drink:'coko'}
      
      // 3.對象展開：它只包含自身的可枚舉的屬性。 並且會丟失展開對象的方法：
      class C={p:12,m(){}};
      let c=new C();
      let clone={...c};
      console.log(clone.p);//12
      console.log(clone.m);//error!

       

　　　　　　___end