讀書筆記：深入理解ES6 (五)

第五章 解構：使數據訪問更便捷

第1節 爲什麼使用解構功能？

　　在ES5中，開發者們從對象、數組中獲取特定數據並賦值給變量，編寫了很多看起來同質化的代碼。例如：

let options = {
     repeat: true,
    save: false
};
 
//從對象中提取數據
let repeat = options.repeat,
    save = options.save;

　　解構功能的目的就是爲了簡化獲取信息的過程。

 

第2節 對象解構

　　1. 對象解構的語法是在一個賦值操作符的左邊，設置一個對象字面量。舉例：

let node = {
     type: "Identifier",
     name: "foo"
}

let {type, name} = node;
 
console.log(type); // "Identifier"
console.log();    //"foo"

　　2. 默認值。

　　對解構賦值中不存在的屬性可以隨意定義一個默認值。舉例：

 let node = {
     type: "Identifier",
     name: "foo"
 }

 let {type, name, value=true} = node;

 console.log(type); //"Identifier"
 console.log(name); //"foo"
 console.log(value); //true

　　3. 爲非同名局部變量賦值。

　　　　如果希望用不同命名的局部變量來存儲對象屬性的值，可以用這樣一個擴展語法來實現。舉例：

 let node = {
     type: "Identifier",
     name: "foo"
 }
 
 let {type:localType, name:localName} = node;
 
 console.log(localType); //"Identifier"
 console.log(localName); //"foo"

　　4. 嵌套對象解構。

　　解構嵌套對象與對象字面量的語法相似。可以拆解以獲取想要的信息。舉例：

 let node = {
     type: "Identifier",
     name: "foo",
     loc: {
          start: {
             line: 1,
              column: 1
          },
         end: {
             line: 1,
             column: 4
         }
    }
 };
 
 let { loc: {start} } = node;
 
 console.log(start.line); //1
 console.log(start.column); // 1

 

第3節 數組解構

　　1. 數據解構和對象解構類似，看一個例子：

 let colors = [ "red", "green", "blue" ];
 let [firstColor, secondColor] = colors;
 console.log(firstColor); //"red"
 console.log(secondColor); // "green"

　　2. 解構賦值。舉例：

 let colors = [ "red", "green", "blue" ],
     firstColor = "black";
     secondColor = "purple";
 
 let [firstColor, secondColor] = colors;
 
 console.log( firstColor ); //"red"

　　3. 設定默認值。

　　也就是可以爲不存在的屬性添加默認值。舉例：

 let colors = ["red"];
 let [firstColor, secondColor="green"] = colors;
 
 console.log(firstColor); //"red"
 console.log(secondColor); //"green"

　　4. 嵌套類數據解構。

　　與嵌套對象解構語法類似，在原有的數組模式中插入另一個數組模式。舉例：

 let colors = [ "red", ["green", "lightgreen"], "blue" ];
 let [firstColor, [secondColor]] = colors;
 
 console.log(firstColor); //"red"
 console.log(secondColor); //"green"

　　5. 不定元素。

　　在數組中，可以通過 “...” 語法，將數組中的其餘元素賦值給一個特定的變量。舉例：

 let colors = [ "red", "green", "blue" ]；
 let [firstColor, ...restColors] = colors;
 
 console.log(firstColor); //"red"
 console.log(restColors.length); //2
 console.log(restColors[0]); //"green"
 console.log(restColors[1]); //"blue"

 

第4節 混合解構

　　混合了對象解構和數組解構的解構方法。大體與上面對象解構和數組解構的方法類似。詳細信息請見該書P.101。

 

第5節 解構參數

　　1. 解構參數，即將參數，尤其是對象數據類型的參數解構爲更加易讀的代碼。舉例：

　　有一個最開始的函數，如下：

  function setCookie(name, value, options) {
      options = options || {};
  
      let secure = options.secure,
          path = options.path,
          domain = options.domain,
          expires = options.expires
  
      //設置cookie代碼
 }
 
 //第三個參數映射到options中
 setCookie("type", "js", {
     secure: true,
     expires: 60000
 });

　如果我們來解構參數的話，可以這麼寫：

 function setCookie(name, value, {secure, path, domain, expires}) {
     //設置cookie代碼
 }
 setCookie("type", "js", {
     secure: true,
     expires: 60000
 });

　　但是這種情況下，如果不傳遞參數會報錯，所以我們可以將其優化爲：

 function setCookie( name, value, {secure, path, domain, expires} = {} ) {
     //設置cookie代碼
 }
 setCookie("type", "js", {
     secure: true,
     expires: 60000
 });

　　這樣，即使不傳參數，那麼也有一個默認的空對象供使用，程序就不會拋出錯誤了。

 

　　2. 爲了防止解構參數報錯，還可以使用給解構參數賦默認值的做法，但是實際應用過程中可能用的地方不太多。有興趣的讀者可以參考該書的P.104、P105。

 

（本節完）