經常使用的ES6新特性--解構賦值

let和const

因爲var能夠重複聲明，並且沒法限制修改，也沒有塊級做用域，在一些時候不是很合適，因此出現了let和const

• let：不能重複聲明，能夠修改，有塊級做用域，適合for循環等一些場景
• const：不能重複聲明，有塊級做用域，不能夠修改，比較適合作全局

變量的結構賦值

• 數組的解構賦值

  let [a,b,c] = [1,2,3]
  let [d,[[e],f]] = [1,[[2],3]]//d=1,e=2,f=3
  let [x,y,...z] =['a'];//x="a",y=undefined,z=[]  結構不成功變量的值就爲undefined

  不徹底解構

  let [a,[b],c] = [1,[2,3],4];//a=1,b=2,c=4

  對於set結構,可使用數組的解構數組

  let [x,y,z] = new Set(['a','b','c']);//a=a,y=b,z=c

  主要數據結構具備Iterator接口，均可以採用數組形式的解構賦值，以下斐波那契數列的例子，利用generator函數

  function* fibs(){
      let a = 0 ;
      let b = 1;
      while(true){
          yield a;//利用yield返回中間值
          [a,b] = [b,a+b];
      }
  }
  let [first,second,third,fourth,fifth,sixth] = fibs();
  //first=0,second=1,third=1,fourth=2,fifth=3,sixth=5

  默認值

  解構賦值容許指定默認值,es6內部使用嚴格相等運算符===判斷一個位置是否有值，因此只有當一個數組成員嚴格等於undefined，默認值纔會生效;默認值能夠引用解構賦值的其餘變量，但該變量必須已經聲明。

  let [x,y='b'] = ['a'];//x='a',y='b'
  let [x=1] = [undefined];//x=1
  let [x=1] = [null];//x=null
  let [x=1,y=x] = [2];//x=2,y=2   由於先把2解構賦給x，x把值賦給y，因此x，y都爲2
  let [x=1,y=x]=[1,2];//x=1,y=2

• 對象的解構賦值

  數組的解構和對象的解構有一個不一樣，數組的元素按次序排列，變量的取值由其位置決定；而對象的屬性沒有次數，變量必需和屬性同名，才能取得正確的值。

  let {foo:foo,bar:bar} = {foo:'qqq',bar:'www'}//foo=qqq,bar=www
  //嵌套解構
  let obj = {p:['hello',{y:'world'}]};
  let {p:[x,{y}]} = obj//x=hello,y=world  此時p做爲模式不會被賦值
  let {p,p:[x,{y}]} = obj//p=['hello',{y:'world'}]  此時P做爲變量賦值

  如下實例進行了三次解構，分別是對loc,start,line三個屬性，可是最後解構賦值時，只有line是屬性，start和loc都是模式,而不是變量

  const node = {
      loc:{
          start:{
              line:1,
              column:5
          }
      }
  };
  //第一個參數是對loc進行解構，獲得loc = { start: { line: 1, column: 5 } }
  //第二個參數對start進行解構，獲得start = { line: 1, column: 5 }
  //第三個參數對line進行解構，獲得 line = 1
  let{ loc,loc:{start},loc:{start:{line}}} = node;
  console.log(loc);//{ start: { line: 1, column: 5 } }
  console.log(start);    //{ line: 1, column: 5 }
  console.log(line);//1

  嵌套賦值

  let obj = {};
  let arr = [];
  ({foo:obj.prop, bar:arr[0]} = {foo:123,bar:true});
  console.log(obj);//{prop:123}
  console.log(arr);//[true]

  對象的默認值,和數組的默認值類似

  var {x:y=3}={x:5}//y=5
  var {x=3} = {x:undefined}//x=3
  var {x=3} = {x:null}//x=null
  var {foo} = {bar:'bz}//foo=undefined解構失敗變量的值等於undefined

  一些錯誤寫法：

  let _tmp = {baz :'bz'};
  _tmp.foo.baz;//報錯，由於foo已是undefined，再取子屬性會報錯
  let x；
  {x} = {x:1};//會報錯，由於JavaScript引擎會把{x}解釋成代碼塊，只有避免將大括號寫在行首，避免將其解釋成代碼塊，才能避免報錯
  let x;
  ({x} = {x:1});//正確寫法

• 字符串的解構賦值

  const [a,b,c,d,e] = 'hello'//a='h',b='e',....
  let {length:len}='hello'//len=5

• 數值和布爾值的解構賦值

  解構賦值時，若是等號右邊是數值和布爾值，會先轉爲對象；而undefined和null沒法轉爲對象，因此對它們解構賦值會報錯

  let {toString:s} = 123;
  console.log(s === Number.prototype.toString);//true
  let {toString:s} = true;
  console.log(s === Boolean.prototype.toString);//true
  let { prop: x } = undefined; // TypeError
  let { prop: y } = null; // TypeError

• 函數參數的解構賦值

  [[1, 2], [3, 4]].map(([a, b]) => a + b);//[3,7]

  函數參數的解構可使用默認值，可是不一樣的寫法會有區別，有以下兩種狀況，一種是爲函數的參數指定默認值，一種是爲變量指定默認值

  • 變量的默認值

    函數test的參數是一個對象，經過對對象的解構，獲得參數x,y，解構失敗，參數爲默認值

  function test({x=0,y=0} ={}){
      return [x,y];
  }
  console.log(test({x:2,y:5}));//[2,5]
  console.log(test({x:2}));//[2,0]
  console.log(test({}));//[0,0]
  console.log(test());//[0,0]

  • 函數參數的默認值，下面是爲函數的參數指定默認值

  function test({x,y} = {x:0,y:0}){
      return [x,y];
  }
  console.log(test({x:2,y:5}));//[2,5]
  console.log(test({x:2}));//[ 2, undefined ]
  console.log(test({}));//[ undefined, undefined ]
  console.log(test());[0,0]​

變量解構賦值的用途

• 交換變量的值
• 從函數返回多個值
• 函數參數的定義
• 提取JSON數據
• 函數參數的默認值
• 遍歷Map結構
• 輸入模塊的指定方法