es6-解構賦值

littlebirdflying發表於2018-09-15
賦值

什麼是解構賦值

左右一一對應進行賦值。

解構賦值的分類

  • 陣列解構賦值，左右都是陣列
  • 物件解構賦值，左右都是物件
  • 字串解構賦值，左邊是陣列，右邊是字串
  • 布林值解構賦值，物件解構賦值的一種
  • 函式引數解構賦值，陣列解構賦值在函式引數的應用
  • 數值解構賦值，物件解構賦值的一種

陣列解構賦值

基本使用方法

{ 
  let a,b,rest;
  [a,b]=[1,2];
  console.log(a,b); // 1 2
}
複製程式碼
{ 
  let a,b,rest;
  [a,b,...rest]=[1,2,3,4,5,6];
  console.log(a,b,rest); // 1 2 [3,4,5,6]
}
複製程式碼

預設值

{ 
  let a,b,c,rest;
  [a,b,c=3]=[1,2]; // 如果沒成功配對，預設值 undefined
  console.log(a,b,c); // 1 2 3
}
複製程式碼

使用場景

變數交換

{ 
  let a=1;
  let b=2;
  [a,b]=[b,a];
  console.log(a,b); // 2 1
}
複製程式碼

接收函式返回的陣列

{ 
  function f(){
    return [1,2]
  }
  let a,b;
  [a,b]=f();
  console.log(a,b); // 1 2
}
複製程式碼

選擇性接收函式返回的陣列

{ 
  function f(){
    return [1,2,3,4,5]
  }
  let a,b,c;
  [a,,,b]=f();
  console.log(a,b); // 1 4
}
複製程式碼

選擇性接收函式返回的未知長度的陣列

{ 
  function f(){
    return [1,2,3,4,5]
  }
  let a,b,c;
  [a,,...b]=f();
  console.log(a,b); // 1 [3,4,5]
}
複製程式碼

物件解構賦值

基本使用方法

{ 
  let o={p:42,q:true};
  let {p,q}=o;
  console.log(p,q); // 42 true
}
複製程式碼

預設值

{ 
  let {a=10,b=5}={a:3};
  console.log(a,b); // 3 5
}
複製程式碼

使用場景

解析函式返回的物件

前後端通訊，解析JSON物件

{ 
  let metaData={
    title:'abc',
    test:[{
      title:'test',
      desc:'description'
    }]
  }
  let {title:esTitle,test:[{title:cnTitle}]}=metaData;
  console.log(esTitle,cnTitle); // abc test
}
複製程式碼

相關文章