ES6系统学习----从Apollo Client看解构赋值
栏目: JavaScript · 发布时间: 5年前
内容简介:在前一篇关于下面是分析:
一:背景
在前一篇关于 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
查询的返回值对象进行解构赋值。
最后的话
从实际应用中去学习,复习,虽然所遭遇的坑会非常多。但是这一路走来,收获的将会非常的多。
以上所述就是小编给大家介绍的《ES6系统学习----从Apollo Client看解构赋值》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
微信小程序入门指南
知晓程序 / 电子工业出版社 / 2017-6-1 / 49
《知晓程序:微信小程序入门指南》是一本分析小程序生态、解读小程序产品设计与开发的入门图书。全书共 9 章,全面讲解了小程序的基本知识、大家如何看待小程序、小程序对行业的影响、小程序对开发者的影响、小程序对用户的影响、开发小程序需要的准备工作等内容,并深入解读了小程序的官方文档。 读者在阅读《知晓程序:微信小程序入门指南》之后可以清楚小程序与订阅号、服务号的区别,了解小程序适用的场景,认识小程......一起来看看 《微信小程序入门指南》 这本书的介绍吧!