ECMASCRIPT 6 實戰之解構賦值

時間 2019-12-06

原文原文鏈接

相信解構賦值(Destructuring)自 ECMASCRIPT 6(如下簡稱 ES 6) 面世以來被你們快速地熟悉並運用到實際開發中了, 這是一種能有效減小代碼量，使代碼邏輯更簡單優雅的技術, 下面咱們就再來回顧、總結一下解構賦值的種種用法吧javascript

基本用法

從對象解構

假設有一個 AritleDetail 對象，它的結構爲:
    const AritleDetail = {
        articleId: 'at_001',
        authName: 'mega_galaxy'
    }
    以 對稱的形式從 從邊的對象中匹配 articleId 與 authName 兩個鍵的值
    const { articleId, authName } = AritleDetail;
    訪問兩個變量
    articleId // 'at_001'
    authName  // 'mega_galaxy'
    本質就是
    const articleId = AritleDetail['articleId'];
    const authName = AritleDetail['authName'];
複製代碼

從數組解構

設定 數組 AritleDetail 的結構是這樣:
    AritleDetail = ['2019-05-23', 1087];
    則解構 時會把數組 某位置的值 賦值 給左邊 相同位置的 變量
    const [publishDate, wordSummary] = AritleDetail;
    實際上就是 
    const publishDate = AritleDetail[0];
    const wordSummary = AritleDetail[1];
    實際上就是在 取值(解構) 的同時，也設定了變量的值 (賦值)，對比 ES5 的代碼，相同的邏輯，代碼量省很多，易讀性更強，更簡明扼要
複製代碼

但若是隻是基本用法，在咱們實際開發中是遠遠不夠用的，咱們須要更多豐富的用法，來方便咱們的快速開發:java

進階用法

設定默認值

爲解構的變量設定默認值，以防不測 : )後端

假設後端返回的數據 AritleDetail 的結構長這樣:
    const AritleDetail = {
        authName: undefined,
        publicshDate: undefined,
        content: undefined
    }
    這個 AritleDetail 也是苦命，要啥啥沒有, 並且最重要的 content 竟然是個 undefined ！！！,
    藉助咱們的 [設定默認值] 特性，能夠巧妙地四兩拔千金，輕鬆把後端扔過來的 garbage 化爲小渣渣:
    const { authName = '未知做者', publicshDate = '2019-01-01', content = '文章內容爲空'} = AritleDetail;
    有了默認值後， 咱們就能夠拿默認值做爲渲染的兜底值了:
    <div>{ content }</div> 
    渲染爲: 文章內容爲空
    !Tips: [設定默認值]特性會斷定當須要解構的變量目標對象上的值爲 undefined 時纔會生效.
複製代碼

嵌套解構(多重解構)

當要從已解構的變量中再次取值時，可以使用多重解構數組

若是後端返回的 列表頁 數據 AritleDetail 的結構變成了這樣:
    const AritleDetail = {
        code: 200,
        data: {
            articleId: 'at_001',
            labels: ['javascript', 'ES 6', 'Destructuring'],
            detailInfo: {
                authName: 'mega_galaxy',
                title: 'ECMASCRIPT 6 實戰之 解構賦值',
                publicshDate: '2019-05-23',
                abstract: '解構賦值之[多重解構]'
            }
        }
    }
    若是小明要用 articleId 去請求文章的詳情數據該怎麼作??
    結構這麼複雜, 層級這麼深，怎麼辦？ 這可把咱們小明急壞了...
    別急, [嵌套解構] 特性讓你一招治敵:
    const { data: { articleId }} = AritleDetail;
    訪問 articleId // at_001
    真的！好用!
複製代碼

那若是小明要同時使用 articleId 請求詳情數據, 又要拿 detailInfo 中的 abstract 顯示描述呢?bash

const { data: { articleId, detailInfo: { abstract }}} = AritleDetail;
    訪問 articleId // at_001
    訪問 abstract  // 解構賦值之[多重解構]
    用到哪一個取哪一個, 層級再多也不怕，只要結構清晰我同樣拿到它
複製代碼

那若是...，多重解構能夠很好玩，更多更復雜的層級，就請同窗們再本身多多探索...spa

數組的多重解構，也是同樣的好玩...
    const [[article1, article2, article3], summaryWords] = [['at_001', 'at__002', 'ar__003'], '666'];
    article1 // at_001
    article2 // at__002
    article3 // ar__003
    summaryWords // 666
複製代碼

重命名給變量賦值時,重設變量的名字，而且舊的名字不可以再使用

若是很不幸剛入門的後端小王返回了這樣的一個數據, 而你想要的是駝峯命名法的變量時...
    AritleDetail = {
        code: 200,
        data: {
            articleid: 'at_001',
        }
    }
    總不能從新構造一個變量，再改變量名字吧...
    [重命名] 特性讓你 180 度大拐彎，過山車以後，即是從地獄直奔天堂的通途:
    const { articleid: articleId } = AritleDetail;
    在原來的變量以後加冒號 (:), 冒號後跟想要設定的新名字, 便可使用規範的駝峯規範的變量了~~~
    訪問 articleId // at_001 ??!!!  這樣也能夠? yes ! so cool !
    再試着訪問 articleid  // Uncaught ReferenceError: itemid is not defined
    完美
複製代碼

剩餘參數(配合擴展運算符) 將未能解構出來的參數值放進[剩餘參數]中，嚴格意義上來講，這不屬於解構的特性，而是擴展運算符的特性，但爲了實際開發的便利，就一塊兒講了，誰讓它好使呢

只取想要使用的第一個變量
    const labels = ['javascript', 'ES 5', 'ES 6', 'React.js', 'Vue.js', 'Node.js', 'React-Native'];
    const [target, ...rest] = labels;
    target // 'javascript'
    rest   // ["ES 5", "ES 6", "React.js", "Vue.js", "Node.js", "React-Native"]
    
    對象也相似的寫法
    const AritleDetail = {
        code: 200,
        data: {
            articleId: 'at_001',
            labels: ['javascript', 'ES 6', 'Destructuring'],
            detailInfo: {
                authName: 'mega_galaxy',
                title: 'ECMASCRIPT 6 實戰之 解構賦值',
                publicshDate: '2019-05-23',
                abstract: '解構賦值之[多重解構]'
            }
        }
    }
    const { data: { articleId, ...rest }, code } = AritleDetail;
    code        // 200
    articleId   // at_001
    rest        // 
                {
                    labels: ['javascript', 'ES 6', 'Destructuring'],
                    detailInfo: {
                        authName: 'mega_galaxy',
                        title: 'ECMASCRIPT 6 實戰之 解構賦值',
                        publicshDate: '2019-05-23',
                        abstract: '解構賦值之[多重解構]'
                    }
                }
    個人心中只有 articleId 沒有它，其它的都跟 rest 混去吧～～～
複製代碼