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

Miyang 发布于2019-08-23 15:12 / 2040人阅读

摘要：第四类布尔值和数值的解构赋值这类解构赋值目前为止我并未在实际开发中遇到，以后遇到会结合实际情况进行说明。解构赋值时，如果等号的邮编时数值或者是布尔值，那么他就会先转换成对象，再进行解构赋值。

一：背景

在前一篇关于Apollo Client 的博客中已经说明了Apollo Client 是一个强大的JavaScript GraphQL 客户端。既然是一个JavaScript的客户端，他肯定就要遵守ES的规范。
下面是Apollo Client的Query的代码：


      {({ loading, error, data }) => {
        if (loading) return Loading...
        if (error) return `Error!: ${error}`
        const { currentPerson } = data
        return (
          // 向子组件中传递currentPerson
        )
      }}

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

最后的话

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

GPU云服务器云服务器解构赋值从哪里看大数据从哪里看快删除的域名阿里云的服务器密码从哪里看

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101684.html

React项目中出现频率较高的ES6语法

摘要：学习过程中，发现无论是上的还是相关文档，语法都有大量的使用。如下使用语法来定义一个组件有几个注意点使用了的继承语法，关键字这里使用了上面说的语法方法名的简写，注意方法之间不加是构造函数，可以替代。内需要调用父类的构造函数即，否则就会报错。学习React过程中，发现无论是github上的Demo还是React相关文档，ES6语法都有大量的使用。如果不了解一些ES6语法，很难学习下去。如...

ZHAO_ 2019-08-19 18:32 评论0 收藏0
21 分钟学 apollo-client 系列：获取数据

摘要：分钟学是一个系列，简单暴力，包学包会。一旦组件挂载后，会自动进行数据请求，前提是客户端提供的和后端的相符。如果回调返回直接不作请求。在组件内进行分页请求之前提到了，这个装饰器为添加了对象，其中有个函数为。 21 分钟学 apollo-client 是一个系列，简单暴力，包学包会。搭建 Apollo client 端，集成 redux使用 apollo-client 来获取数据修改本...

robin 2019-08-22 11:10 评论0 收藏0
Sentinel Client: 整合Apollo规则持久化

摘要：这样做的方式是简单，缺点是无法及时获取变更推模式规则中心统一推送，客户端通过注册监听器的方式时刻监听变化，比如使用等配置中心。在前面的学习过程中，Sentinel 的规则，也就是我们之前定义的限流规则，是通过代码的方式定义好的。这是初始化时需要做的事情，Sentinel 提供了基于API的方式修改规则： FlowRuleManager.loadRules(List rules); /...

plus2047 2019-08-16 16:16 评论0 收藏0
2019 - Web开发技术指南和趋势

摘要：以下内容来自我特别喜欢的一个频道这是一个年你成为前端，后端或全栈开发者的进阶指南你不需要学习所有的技术成为一个开发者这个指南只是通过简单分类列出了技术选项我将从我的经验和参考中给出建议首选我们会介绍通用的知识最后介绍年的的一些趋势基础前端开以下内容来自我特别喜欢的一个Youtube频道: Traversy Media 这是一个2019年你成为前端，后端或全栈开发者的进阶指南: 你...

sourcenode 2019-08-23 14:14 评论0 收藏0
新手快速学习ES6语法,用最快的速度入门ES6就看这里

摘要：的作用域与命令相同只在声明所在的块级作用域内有效。数值和布尔值的解构赋值解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。上面代码中，数值和布尔值的包装对象都有属性，因此变量都能取到值。默认值解构赋值允许指定默认值。最近正在学习ES6,对于ES6的语法有一些自己的理解, 想写这篇文章帮助跟我一样的新手快速入门ES6而不至于连代码都看不懂. 至于开发环境的搭建什么...

vspiders 2019-08-20 16:50 评论0 收藏0