ES6系统学习----从Apollo Client看解构赋值

妖狐艹你老母 2022-03-20 05:44 200阅读 0赞

## 一：背景 ##

在前一篇关于`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`中对于解构赋值的描述。  
![在这里插入图片描述][20190212094335829.png]  
**为了便于在`UI`中跟踪`Mutation`结果，在渲染时将`Mutation`的结果解构成`loading， error`。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]  
这就说明了，在箭头函数的参数中`{ 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`查询的返回值对象进行解构赋值。

## 最后的话 ##

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

[20190212094335829.png]: /images/20220320/9b6aa4e68cd141c49a6b9153e9985bce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]: /images/20220320/3459514b4da843959c2636d50bee3d1f.png