ES6系統學習----從Apollo Client看解構賦值

Miyang 發布于2019-08-23 15:12 / 2089人閱讀

摘要：第四類布爾值和數值的解構賦值這類解構賦值目前為止我并未在實際開發中遇到，以后遇到會結合實際情況進行說明。解構賦值時，如果等號的郵編時數值或者是布爾值，那么他就會先轉換成對象，再進行解構賦值。

一：背景

在前一篇關于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云服務器解構賦值從哪里看大數據從哪里看快刪除的域名阿里云的服務器密碼從哪里看

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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