資訊專欄INFORMATION COLUMN
摘要：第四類布爾值和數(shù)值的解構(gòu)賦值這類解構(gòu)賦值目前為止我并未在實(shí)際開發(fā)中遇到，以后遇到會(huì)結(jié)合實(shí)際情況進(jìn)行說明。解構(gòu)賦值時(shí)，如果等號(hào)的郵編時(shí)數(shù)值或者是布爾值，那么他就會(huì)先轉(zhuǎn)換成對(duì)象，再進(jìn)行解構(gòu)賦值。
一：背景
在前一篇關(guān)于Apollo Client 的博客中已經(jīng)說明了Apollo Client 是一個(gè)強(qiáng)大的JavaScript GraphQL 客戶端。既然是一個(gè)JavaScript的客戶端，他肯定就要遵守ES的規(guī)范。
下面是Apollo Client的Query的代碼：
{({ loading, error, data }) => { if (loading) return Loading... if (error) return`Error!: ${error}` const { currentPerson } = data return ( // 向子組件中傳遞currentPerson ) }}
分析：
這段Query是用來獲取當(dāng)前登陸用戶的信息。在Apollo Client封裝好的Query組件中有一個(gè)箭頭函數(shù)，箭頭函數(shù)的函數(shù)體主要是用來執(zhí)行React-Native渲染頁面的?？匆幌鹿倬W(wǎng)中在Mutation中對(duì)于解構(gòu)賦值的描述。
為了便于在UI中跟蹤Mutation結(jié)果，在渲染時(shí)將Mutation的結(jié)果解構(gòu)成loading， error。
這就說明了，在箭頭函數(shù)的參數(shù)中{ loading, error, data }是一個(gè)解構(gòu)賦值的表達(dá)式，將QueryResult解構(gòu)賦值成data 或 loading 或 error。只要QueryResult中有一個(gè)結(jié)果，那么在表達(dá)式中就會(huì)將這個(gè)值解構(gòu)賦值出來。 這樣在函數(shù)體中就會(huì)根據(jù)解析的結(jié)果不同執(zhí)行不同的操作。
在ES6中允許按照一定的模式從數(shù)組和對(duì)象等中提取值，然后對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)賦值。一般是通過模式匹配的方式進(jìn)行賦值。
目前所接觸到的解構(gòu)賦值的場(chǎng)景一共有五類，之后有新認(rèn)識(shí)的會(huì)進(jìn)行不斷的補(bǔ)充。
第一類：數(shù)組的解構(gòu)賦值
等號(hào)左邊必須采用方括號(hào)的形式進(jìn)行接收解構(gòu)的值
等號(hào)左邊的數(shù)組的每一項(xiàng)要和等號(hào)右邊的解構(gòu)目標(biāo)中的每一項(xiàng)相匹配，同順序。
let [a,b] = [1,2] // a為1，b為2 let [b,a] = [1,2] // a為2，b為1
如果解構(gòu)不成功，那么等號(hào)左側(cè)接收變量的那部分值就為undefined
let [a,b,c] = [1,2] // a為1，b為2，c為undefined
使用...的形式是ES6的延展操作符，在開發(fā)中經(jīng)常使用，尤其是在React-Native中使用延展操作符從父組件向子組件傳遞數(shù)據(jù)是非常方便的，不需要將所有的屬性都點(diǎn)出來并接收之后再傳遞。
let [a, ...b] = [1,2,3,4] // a為1，b為[2,3,4]
不完全解構(gòu)：即左側(cè)的接收變量可以比右側(cè)的項(xiàng)少。但左側(cè)若比右側(cè)的多就會(huì)造成多的變量為undefined，同第3項(xiàng)。
let [a] = [1,2] // a為1
嵌套解構(gòu)： 若存在多維數(shù)組，只要等號(hào)左邊的模式相匹配也是可以解構(gòu)出來的。
let[a,[b,c],d] = [1,[2,3],4] //a=1,b=2,c=3,d=4
使用默認(rèn)值：在解構(gòu)賦值的過程中出現(xiàn)上邊第五種情況，即左側(cè)定義的接收變量數(shù)目比右側(cè)要解構(gòu)的單項(xiàng)多，那么此時(shí)就可以使用默認(rèn)值【注意：生效的前提是默認(rèn)值所在的位置必須嚴(yán)格等于undefined】
let [x=1] = [null] console.log(x) //為null
在這里x輸出的值不是undefined，而是null，他解構(gòu)的目標(biāo)就是不存在的，是null，不是未定義undefined。因此他的輸出值為null。
第二類：對(duì)象的解構(gòu)賦值
等號(hào)左邊必須采用花括號(hào)的形式進(jìn)行接收
只要等號(hào)左側(cè)的變量名與等號(hào)右側(cè)對(duì)象的屬性名相同，不論順序，都可以接收到相應(yīng)的值?！具@一條就和前面開頭的背景一樣使用對(duì)象的屬性名進(jìn)行接收，無論位置，都可以進(jìn)行接收】
let {second,first} = { first: "ff", second:"ss" } // second為ss， first為ff
對(duì)象的解構(gòu)賦值也相當(dāng)于是模式匹配。它內(nèi)部的工作機(jī)制是，先找到相應(yīng)的同名屬性，再賦值給相應(yīng)的變量。
let {first：second } = { first: "ff", second:"ss" }
// second為ff， first報(bào)錯(cuò)：first is not defined
同樣的對(duì)象的解構(gòu)賦值也可以適用于嵌套結(jié)構(gòu)
let person = { firstPeple: {name: "zs", age: 22} }
let { firstPeple:{ name, age } } = person
console.log(name) // zs
console.log(age) // 22
使用默認(rèn)值，生效的前提是對(duì)象的屬性值嚴(yán)格等于undefined，解釋說明和數(shù)組的默認(rèn)值類似。
第三類：字符串的解構(gòu)賦值
字符串在處于解構(gòu)賦值的環(huán)境中時(shí)被暫時(shí)看作是一個(gè)類似數(shù)組的對(duì)象，因此他的每一個(gè)字符都可以看成數(shù)組的每一項(xiàng)。這里就不再解釋說明了。
第四類：布爾值和數(shù)值的解構(gòu)賦值
這類解構(gòu)賦值目前為止我并未在實(shí)際開發(fā)中遇到，以后遇到會(huì)結(jié)合實(shí)際情況進(jìn)行說明。
解構(gòu)賦值時(shí)，如果等號(hào)的郵編時(shí)數(shù)值或者是布爾值，那么他就會(huì)先轉(zhuǎn)換成對(duì)象，再進(jìn)行解構(gòu)賦值。
let {toString: a} = 123
console.log(a)
console.log(Number.prototype.toString)
console.log(Number.prototype.toString === a) // true
在這里，轉(zhuǎn)換成的對(duì)象都具有toString屬性，因此相應(yīng)的變量都可以取到值。
第五類：函數(shù)參數(shù)的解構(gòu)賦值
function add([x + y]){
console.log(x+y) // 輸出3
}
add([1,2])
上邊的普通函數(shù)是將一個(gè)數(shù)組進(jìn)行的解構(gòu)賦值。同樣的在函數(shù)的參數(shù)中還可以放對(duì)象的解構(gòu)賦值。在開頭的背景中，就是在箭頭函數(shù)的參數(shù)中對(duì)一個(gè)Query查詢的返回值對(duì)象進(jìn)行解構(gòu)賦值。
最后的話從實(shí)際應(yīng)用中去學(xué)習(xí)，復(fù)習(xí)，雖然所遭遇的坑會(huì)非常多。但是這一路走來，收獲的將會(huì)非常的多。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101684.html
摘要：學(xué)習(xí)過程中，發(fā)現(xiàn)無論是上的還是相關(guān)文檔，語法都有大量的使用。如下使用語法來定義一個(gè)組件有幾個(gè)注意點(diǎn)使用了的繼承語法，關(guān)鍵字這里使用了上面說的語法方法名的簡(jiǎn)寫，注意方法之間不加是構(gòu)造函數(shù)，可以替代。內(nèi)需要調(diào)用父類的構(gòu)造函數(shù)即，否則就會(huì)報(bào)錯(cuò)。 學(xué)習(xí)React過程中，發(fā)現(xiàn)無論是github上的Demo還是React相關(guān)文檔，ES6語法都有大量的使用。如果不了解一些ES6語法，很難學(xué)習(xí)下去。如...
摘要：分鐘學(xué)是一個(gè)系列，簡(jiǎn)單暴力，包學(xué)包會(huì)。一旦組件掛載后，會(huì)自動(dòng)進(jìn)行數(shù)據(jù)請(qǐng)求，前提是客戶端提供的和后端的相符。如果回調(diào)返回直接不作請(qǐng)求。在組件內(nèi)進(jìn)行分頁請(qǐng)求之前提到了，這個(gè)裝飾器為添加了對(duì)象，其中有個(gè)函數(shù)為。 21 分鐘學(xué) apollo-client 是一個(gè)系列，簡(jiǎn)單暴力，包學(xué)包會(huì)。 搭建 Apollo client 端，集成 redux使用 apollo-client 來獲取數(shù)據(jù)修改本...
摘要：這樣做的方式是簡(jiǎn)單，缺點(diǎn)是無法及時(shí)獲取變更推模式規(guī)則中心統(tǒng)一推送，客戶端通過注冊(cè)監(jiān)聽器的方式時(shí)刻監(jiān)聽變化，比如使用等配置中心。 在前面的學(xué)習(xí)過程中，Sentinel 的規(guī)則，也就是我們之前定義的限流規(guī)則，是通過代碼的方式定義好的。這是初始化時(shí)需要做的事情，Sentinel 提供了基于API的方式修改規(guī)則： FlowRuleManager.loadRules(List rules); /...
摘要：以下內(nèi)容來自我特別喜歡的一個(gè)頻道這是一個(gè)年你成為前端，后端或全棧開發(fā)者的進(jìn)階指南你不需要學(xué)習(xí)所有的技術(shù)成為一個(gè)開發(fā)者這個(gè)指南只是通過簡(jiǎn)單分類列出了技術(shù)選項(xiàng)我將從我的經(jīng)驗(yàn)和參考中給出建議首選我們會(huì)介紹通用的知識(shí)最后介紹年的的一些趨勢(shì)基礎(chǔ)前端開 以下內(nèi)容來自我特別喜歡的一個(gè)Youtube頻道: Traversy Media 這是一個(gè)2019年你成為前端，后端或全棧開發(fā)者的進(jìn)階指南: 你...
摘要：的作用域與命令相同只在聲明所在的塊級(jí)作用域內(nèi)有效。數(shù)值和布爾值的解構(gòu)賦值解構(gòu)賦值時(shí)，如果等號(hào)右邊是數(shù)值和布爾值，則會(huì)先轉(zhuǎn)為對(duì)象。上面代碼中，數(shù)值和布爾值的包裝對(duì)象都有屬性，因此變量都能取到值。默認(rèn)值解構(gòu)賦值允許指定默認(rèn)值。 最近正在學(xué)習(xí)ES6,對(duì)于ES6的語法有一些自己的理解, 想寫這篇文章幫助跟我一樣的新手快速入門ES6而不至于連代碼都看不懂. 至于開發(fā)環(huán)境的搭建什么...
閱讀 1357·2021-09-22 15:09
閱讀 2678·2021-08-20 09:38
閱讀 2418·2021-08-03 14:03
閱讀 877·2019-08-30 15:55
閱讀 3384·2019-08-30 12:59
閱讀 3561·2019-08-26 13:48
閱讀 1899·2019-08-26 11:40
閱讀 681·2019-08-26 10:30
