摘要：相信解構(gòu)賦值自以下簡(jiǎn)稱面世以來被大家快速地熟悉并運(yùn)用到實(shí)際開發(fā)中了這是一種能有效減少代碼量，使代碼邏輯更簡(jiǎn)單優(yōu)雅的技術(shù)下面我們就再來回顧總結(jié)一下解構(gòu)賦值的種種用法吧基本用法從對(duì)象解構(gòu)假設(shè)有一個(gè)對(duì)象，它的結(jié)構(gòu)為以對(duì)稱的形式從從邊的對(duì)象中匹配與

相信解構(gòu)賦值(Destructuring)自 ECMASCRIPT 6(以下簡(jiǎn)稱 ES 6) 面世以來被大家快速地熟悉并運(yùn)用到實(shí)際開發(fā)中了, 這是一種能有效減少代碼量，使代碼邏輯更簡(jiǎn)單優(yōu)雅的技術(shù), 下面我們就再來回顧、總結(jié)一下解構(gòu)賦值的種種用法吧

從對(duì)象解構(gòu)

    假設(shè)有一個(gè) AritleDetail 對(duì)象，它的結(jié)構(gòu)為:
    const AritleDetail = {
        articleId: "at_001",
        authName: "mega_galaxy"
    }
    以 對(duì)稱的形式從 從邊的對(duì)象中匹配 articleId 與 authName 兩個(gè)鍵的值
    const { articleId, authName } = AritleDetail;
    訪問兩個(gè)變量
    articleId // "at_001"
    authName  // "mega_galaxy"
    本質(zhì)就是
    const articleId = AritleDetail["articleId"];
    const authName = AritleDetail["authName"];

從數(shù)組解構(gòu)

    設(shè)定 數(shù)組 AritleDetail 的結(jié)構(gòu)是這樣:
    AritleDetail = ["2019-05-23", 1087];
    則解構(gòu) 時(shí)會(huì)把數(shù)組 某位置的值 賦值 給左邊 相同位置的 變量
    const [publishDate, wordSummary] = AritleDetail;
    實(shí)際上就是 
    const publishDate = AritleDetail[0];
    const wordSummary = AritleDetail[1];
    實(shí)際上就是在 取值(解構(gòu)) 的同時(shí)，也設(shè)定了變量的值 (賦值)，對(duì)比 ES5 的代碼，相同的邏輯，代碼量省不少，易讀性更強(qiáng)，更簡(jiǎn)明扼要

但如果只是基本用法，在我們實(shí)際開發(fā)中是遠(yuǎn)遠(yuǎn)不夠用的，我們需要更多豐富的用法，來方便我們的快速開發(fā):

設(shè)定默認(rèn)值

為解構(gòu)的變量設(shè)定默認(rèn)值，以防不測(cè) : )

    假設(shè)后端返回的數(shù)據(jù) AritleDetail 的結(jié)構(gòu)長(zhǎng)這樣:
    const AritleDetail = {
        authName: "",
        publicshDate: undefined,
        content: null
    }
    這個(gè) AritleDetail 也是苦命，要啥啥沒有, 而且最重要的 content 還居然是個(gè) null ?。?！,
    借助我們的 [設(shè)定默認(rèn)值] 特性，可以巧妙地四兩拔千金，輕松把后端扔過來的 garbage 化為小渣渣:
    const { authName = "未知作者", publicshDate = "2019-01-01", content = "文章內(nèi)容為空"} = AritleDetail;
    有了默認(rèn)值后， 我們就可以拿默認(rèn)值作為渲染的兜底值了:
    
{ content }
 
    渲染為: 文章內(nèi)容為空
    !Tips: undefined 與 null 會(huì)影響頁面的渲染，對(duì)這類值的處理要尤其謹(jǐn)慎!

嵌套解構(gòu)(多重解構(gòu))

當(dāng)要從已解構(gòu)的變量中再次取值時(shí)， 可使用多重解構(gòu)

    如果后端返回的 列表頁 數(shù)據(jù) AritleDetail 的結(jié)構(gòu)變成了這樣:
    const AritleDetail = {
        code: 200,
        data: {
            articleId: "at_001",
            labels: ["javascript", "ES 6", "Destructuring"],
            detailInfo: {
                authName: "mega_galaxy",
                title: "ECMASCRIPT 6 實(shí)戰(zhàn)之 解構(gòu)賦值",
                publicshDate: "2019-05-23",
                abstract: "解構(gòu)賦值之[多重解構(gòu)]"
            }
        }
    }
    如果小明要用 articleId 去請(qǐng)求文章的詳情數(shù)據(jù)該怎么做??
    結(jié)構(gòu)這么復(fù)雜, 層級(jí)這么深，怎么辦？ 這可把我們小明急壞了...
    別急, [嵌套解構(gòu)] 特性讓你一招治敵:
    const { data: { articleId }} = AritleDetail;
    訪問 articleId // at_001
    真的！好用!

那如果小明要同時(shí)使用 articleId 請(qǐng)求詳情數(shù)據(jù), 又要拿 detailInfo 中的 abstract 顯示描述呢?

    const { data: { articleId, detailInfo: { abstract }}} = AritleDetail;
    訪問 articleId // at_001
    訪問 abstract  // 解構(gòu)賦值之[多重解構(gòu)]
    用到哪個(gè)取哪個(gè), 層級(jí)再多也不怕，只要結(jié)構(gòu)清晰我一樣拿到它

那如果...， 多重解構(gòu)可以很好玩， 更多更復(fù)雜的層級(jí)，就請(qǐng)同學(xué)們?cè)僮约憾喽嗵剿?..

    數(shù)組的多重解構(gòu)，也是一樣的好玩...
    const [[article1, article2, article3], summaryWords] = [["at_001", "at__002", "ar__003"], "666"];
    article1 // at_001
    article2 // at__002
    article3 // ar__003
    summaryWords // 666

重命名

給變量賦值時(shí),重設(shè)變量的名字，并且舊的名字不能夠再使用

    如果很不幸剛?cè)腴T的后端小王返回了這樣的一個(gè)數(shù)據(jù), 而你想要的是駝峰命名法的變量時(shí)...
    AritleDetail = {
        code: 200,
        data: {
            articleid: "at_001",
        }
    }
    總不能重新構(gòu)造一個(gè)變量，再改變量名字吧...
    [重命名] 特性讓你 180 度大拐彎，過山車之后，便是從地獄直奔天堂的通途:
    const { articleid: articleId } = AritleDetail;
    在原來的變量之后加冒號(hào) (:), 冒號(hào)后跟想要設(shè)定的新名字, 即可使用規(guī)范的駝峰規(guī)范的變量了~~~
    訪問 articleId // at_001 ??!!!  這樣也可以? yes ! so cool !
    再試著訪問 articleid  // Uncaught ReferenceError: itemid is not defined
    完美

剩余參數(shù)(配合擴(kuò)展運(yùn)算符)

將未能解構(gòu)出來的參數(shù)值放進(jìn)[剩余參數(shù)]中，嚴(yán)格意義上來說，這不屬于解構(gòu)的特性，而是擴(kuò)展運(yùn)算符的特性，但為了實(shí)際開發(fā)的便利，就一起講了，誰讓它好使呢

    只取想要使用的第一個(gè)變量
    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"]
    
    對(duì)象也類似的寫法
    const AritleDetail = {
        code: 200,
        data: {
            articleId: "at_001",
            labels: ["javascript", "ES 6", "Destructuring"],
            detailInfo: {
                authName: "mega_galaxy",
                title: "ECMASCRIPT 6 實(shí)戰(zhàn)之 解構(gòu)賦值",
                publicshDate: "2019-05-23",
                abstract: "解構(gòu)賦值之[多重解構(gòu)]"
            }
        }
    }
    const { data: { articleId, ...rest }, code } = AritleDetail;
    code        // 200
    articleId   // at_001
    rest        // 
                {
                    labels: ["javascript", "ES 6", "Destructuring"],
                    detailInfo: {
                        authName: "mega_galaxy",
                        title: "ECMASCRIPT 6 實(shí)戰(zhàn)之 解構(gòu)賦值",
                        publicshDate: "2019-05-23",
                        abstract: "解構(gòu)賦值之[多重解構(gòu)]"
                    }
                }
    我的心中只有 articleId 沒有它，其它的都跟 rest 混去吧～～～

心之所至，金石為開，有了 [設(shè)定默認(rèn)值] [多重解構(gòu)] [重命名] [剩余參數(shù)] 四大絕技，平步江湖，無人能敵...