ES6系統學習----從Apollo Client看解構賦值

一：背景

在前一篇關於Apollo Client 的博客中已經說明了Apollo Client 是一個強大的JavaScript GraphQL 客戶端。既然是一個JavaScript的客戶端，他確定就要遵照ES的規範。
下面是Apollo Client的Query的代碼：

<Query query={CURRENT_PERSON}>
      {({ loading, error, data }) => {
        if (loading) return <Text>Loading...</Text>
        if (error) return <Text>`Error!: ${error}`</Text>
        const { currentPerson } = data
        return (
          // 向子組件中傳遞currentPerson
        )
      }}
</Query>

分析：
這段Query是用來獲取當前登錄用戶的信息。在Apollo Client封裝好的Query組件中有一個箭頭函數，箭頭函數的函數體主要是用來執行React-Native渲染頁面的。看一下官網中在Mutation中對於解構賦值的描述。

爲了便於在UI中跟蹤Mutation結果，在渲染時將Mutation的結果解構成loading， error。

這就說明了，在箭頭函數的參數中{ loading, error, data }是一個解構賦值的表達式，將QueryResult解構賦值成data 或 loading 或 error。只要QueryResult中有一個結果，那麼在表達式中就會將這個值解構賦值出來。 這樣在函數體中就會根據解析的結果不一樣執行不一樣的操做。

二：解構賦值

在ES6中容許按照必定的模式從數組和對象等中提取值，而後對變量進行賦值，這被稱爲解構賦值。通常是經過模式匹配的方式進行賦值。
目前所接觸到的解構賦值的場景一共有五類，以後有新認識的會進行不斷的補充。
第一類：數組的解構賦值

1. 等號左邊必須採用方括號的形式進行接收解構的值
2. 等號左邊的數組的每一項要和等號右邊的解構目標中的每一項相匹配，同順序。

let [a,b] = [1,2]  // a爲1，b爲2
let [b,a] = [1,2]  // a爲2，b爲1

1. 若是解構不成功，那麼等號左側接收變量的那部分值就爲undefined

let [a,b,c] = [1,2]  // a爲1，b爲2，c爲undefined

1. 使用...的形式是ES6的延展操做符，在開發中常用，尤爲是在React-Native中使用延展操做符從父組件向子組件傳遞數據是很是方便的，不須要將全部的屬性都點出來並接收以後再傳遞。

let [a, ...b] = [1,2,3,4]  // a爲1，b爲[2,3,4]

1. 不徹底解構：即左側的接收變量能夠比右側的項少。但左側若比右側的多就會形成多的變量爲undefined，同第3項。

let [a] = [1,2]  // a爲1

1. 嵌套解構： 若存在多維數組，只要等號左邊的模式相匹配也是能夠解構出來的。

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

1. 使用默認值：在解構賦值的過程當中出現上邊第五種狀況，即左側定義的接收變量數目比右側要解構的單項多，那麼此時就可使用默認值【注意：生效的前提是默認值所在的位置必須嚴格等於undefined】

let [x=1] = [null]
console.log(x)  //爲null

在這裏x輸出的值不是undefined，而是null，他解構的目標就是不存在的，是null，不是未定義undefined。所以他的輸出值爲null。

第二類：對象的解構賦值

1. 等號左邊必須採用花括號的形式進行接收
2. 只要等號左側的變量名與等號右側對象的屬性名相同，不論順序，均可以接收到相應的值。【這一條就和前面開頭的背景同樣使用對象的屬性名進行接收，不管位置，均可以進行接收】

let {second,first} = { first: "ff", second:"ss" }   //  second爲ss， first爲ff

1. 對象的解構賦值也至關因而模式匹配。它內部的工做機制是，先找到相應的同名屬性，再賦值給相應的變量。

let {first：second } = { first: "ff", second:"ss" }  
 //  second爲ff， first報錯：first is not defined

1. 一樣的對象的解構賦值也能夠適用於嵌套結構

let person = { firstPeple: {name: "zs", age: 22} } 
let { firstPeple:{ name, age } } = person
console.log(name) // zs
console.log(age)  // 22

1. 使用默認值，生效的前提是對象的屬性值嚴格等於undefined，解釋說明和數組的默認值相似。

第三類：字符串的解構賦值
字符串在處於解構賦值的環境中時被暫時看做是一個相似數組的對象，所以他的每個字符均可以當作數組的每一項。這裏就再也不解釋說明了。

第四類：布爾值和數值的解構賦值
這類解構賦值目前爲止我並未在實際開發中遇到，之後遇到會結合實際狀況進行說明。
解構賦值時，若是等號的郵編時數值或者是布爾值，那麼他就會先轉換成對象，再進行解構賦值。

let {toString: a} = 123
console.log(a)
console.log(Number.prototype.toString)
console.log(Number.prototype.toString === a)   // true

在這裏，轉換成的對象都具備toString屬性，所以相應的變量均可以取到值。
第五類：函數參數的解構賦值

function add([x + y]){
console.log(x+y) // 輸出3
}

add([1,2])

上邊的普通函數是將一個數組進行的解構賦值。一樣的在函數的參數中還能夠放對象的解構賦值。在開頭的背景中，就是在箭頭函數的參數中對一個Query查詢的返回值對象進行解構賦值。

最後的話

從實際應用中去學習，複習，雖然所遭遇的坑會很是多。可是這一路走來，收穫的將會很是的多。