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