解構賦值

數組的解構賦值

• ES 6 中支持的數組解構賦值 var [a,b,c] = [4,5,6];、let [foo,[xxx,yyy]]=[45,[12,46]];,只須要等號兩邊的模式相同，變量就會被賦予對應的值。
• 如果解構不成功，變量的值就等於undefined。
• 不徹底解構的狀況，也能夠進行賦值let [x,y] = [1,2,6]; 或者 let [x,y,z] = [4,[4,9,3],8,9];。
• 若等號的右邊，不是可遍歷的結構，使用解構賦值時候將會發生報錯。
• 只要某種數據具備Iterator接口均可以以數組的形式進行解構賦值。例如let [x,y,z] = new Set ([4,5,6]);，以及ES 6 中的generator函數，也能夠做爲解構表達式的賦值內容。

解構賦值中的默認值

• let [foo = true,ofo = false ,mobike = "fake"] = [456,undefined,null];只有當一個數組成員被賦予的值全等於undefined，默認值纔會生效。(注：這裏的null並不全等於undefined,因此mobike的值爲null)。
• 解構賦值中的默認值賦值表達式，只有在「有必要(即所賦值爲undefined)」的時候纔會執行。例如let [foo = fun()] = ["Crazy-Web-2"];這裏的fun()方法將不被觸發。
• 使用默認值時，所賦值的內容，必須是已被聲明的變量 例如let [x=y,y=1]=[];，給x賦默認值的時候，仍未被聲明。

對象的解構賦值

• 變量名稱的次序不要求與賦值名稱的次序相同，只要鍵名相對應便可。
• 對於var {foo: baz } = { foo:"aaa",bar :"bbb"};,被賦值的是變量baz而不是鍵名foo
• 使用let關鍵字進行對象解構賦值的時候，一樣須要注意不能重複聲明。
• 和數組的相似，對象的解構賦值，也能夠進行復雜的嵌套結構
• 若解構失敗，變量的值被賦予undefined
• 若使用解構的方式，將一個已經聲明的某個變量賦值，例如:({x} = { x : x:1});，須要十分注意，要使用圓括號括起來。
• 能夠利用已知的JS內置對象的鍵名，去獲取JS內置對象的方法，例如let { log, sin, cos } = Math;，可以，直接使用log()、sin()、cos()便可。

字符串的解構賦值

• 字符串通常能夠當作一個相似數組同樣的對象，可將數組中的元素內容按序賦值。
• 也能夠將字符串對象的屬性用於賦值，例如，類數組對象都有一個length屬性，字符串對象也不列外。

其餘基本對象的解構賦值

結構的規則通常是，若等號右邊不是數組或者JS對象，就將其轉化爲對象，而後將其當作一個完整的對象，進行對象屬性的對照，再進行結構賦值。

• Number對象、Boolean對象都會解構成通常的對象，擁有對象的基本屬性。
• undefined和null都沒法轉換爲JS對象，因此對他們進行結構賦值的時候，都會報錯。

函數參數的解構賦值

• 函數調用進行傳參的時候，也是一個解構賦值的過程
• 在給解構賦值設定默認值的時候，要與函數設定默認值的狀況區分開來：
  例如

  function move({x = 0, y = 0} = {}) {
  
  return [x, y];
  
  }
  

  

  與

  function move({x, y} = { x: 0, y: 0 }) {
  
  return [x, y];
  
  }
  

  

  區別就是在於，調用時傳入的值爲undefined時，解構默認值會被觸發，而函數參數默認值不會。

使用解構賦值的注意點

• 在聲明語句中，不可以使用圓括號
• 函數設定參數的時候，也不可以使用圓括號
• 賦值語句中，不能將整個模式，或嵌套模式中的一層，放在圓括號之中。

  // 報錯
  
  ({ p: a }) = { p: 42 };
  
  ([a]) = [5];
  
  [({ p: a }), { x: c }] = [{}, {}];
  

  


解構賦值的用途

• 不借助中間值，實現兩個變量值互換。

  let x = 1;
  
  let y = 2;
  
  [x, y] = [y, x];
  

• 從函數中返回多個值，可使用返回數組/對象的形式，例如return [1, 2, 3];或return { foo: 1, bar: 2 };，return獲得的函數值，能夠直接賦值給解構相相似的對象。
• 使用JS對象傳參的時候，能夠實現變量無序傳參。function f({x, y, z}) { ... }; f({z: 3, y: 2, x: 1});
• JSON數據實現「鍵名」快速提取，由於JSON對象和JS對象的結構徹底一致，可使用鍵名直接提取，不須要像之前同樣進行循環操做。
• 能夠實現模擬函數參數值

  let x = 1;
  
  jQuery.ajax = function (url, {
  
  async = true,
  
  beforeSend = function () {},
  
  cache = true,
  
  complete = function () {},
  
  crossDomain = false,
  
  global = true,
  
  // ... more config
  
  }) {
  
  // ... do stuff
  
  };
  

• 遍歷Map結構(有待補充)