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查询的返回值对象进行解构赋值。

最后的话

从实际应用中去学习，复习，虽然所遭遇的坑会很是多。可是这一路走来，收获的将会很是的多。