一：背景
在前一篇關於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中允許按照一定的模式從數組和對象等中提取值，然後對變量進行賦值，這被稱爲解構賦值。一般是通過模式匹配的方式進行賦值。
目前所接觸到的解構賦值的場景一共有五類，之後有新認識的會進行不斷的補充。
第一類：數組的解構賦值
- 等號左邊必須採用方括號的形式進行接收解構的值
- 等號左邊的數組的每一項要和等號右邊的解構目標中的每一項相匹配，同順序。
let [a,b] = [1,2] // a爲1，b爲2
let [b,a] = [1,2] // a爲2，b爲1- 如果解構不成功，那麼等號左側接收變量的那部分值就爲
undefined
let [a,b,c] = [1,2] // a爲1，b爲2，c爲undefined- 使用
...的形式是ES6的延展操作符，在開發中經常使用，尤其是在React-Native中使用延展操作符從父組件向子組件傳遞數據是非常方便的，不需要將所有的屬性都點出來並接收之後再傳遞。
let [a, ...b] = [1,2,3,4] // a爲1，b爲[2,3,4]- 不完全解構：即左側的接收變量可以比右側的項少。但左側若比右側的多就會造成多的變量爲
undefined，同第3項。
let [a] = [1,2] // a爲1- 嵌套解構： 若存在多維數組，只要等號左邊的模式相匹配也是可以解構出來的。
let[a,[b,c],d] = [1,[2,3],4] //a=1,b=2,c=3,d=4- 使用默認值：在解構賦值的過程中出現上邊第五種情況，即左側定義的接收變量數目比右側要解構的單項多，那麼此時就可以使用默認值【注意：生效的前提是默認值所在的位置必須嚴格等於
undefined】
let [x=1] = [null]
console.log(x) //爲null在這裏x輸出的值不是undefined，而是null，他解構的目標就是不存在的，是null，不是未定義undefined。因此他的輸出值爲null。
第二類：對象的解構賦值
- 等號左邊必須採用花括號的形式進行接收
- 只要等號左側的變量名與等號右側對象的屬性名相同，不論順序，都可以接收到相應的值。【這一條就和前面開頭的背景一樣使用對象的屬性名進行接收，無論位置，都可以進行接收】
let {second,first} = { first: "ff", second:"ss" } // second爲ss， first爲ff- 對象的解構賦值也相當於是模式匹配。它內部的工作機制是，先找到相應的同名屬性，再賦值給相應的變量。
let {first：second } = { first: "ff", second:"ss" }
// second爲ff， first報錯：first is not defined- 同樣的對象的解構賦值也可以適用於嵌套結構
let person = { firstPeple: {name: "zs", age: 22} }
let { firstPeple:{ name, age } } = person
console.log(name) // zs
console.log(age) // 22- 使用默認值，生效的前提是對象的屬性值嚴格等於
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查詢的返回值對象進行解構賦值。
最後的話
從實際應用中去學習，複習，雖然所遭遇的坑會非常多。但是這一路走來，收穫的將會非常的多。