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

最后的话

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