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

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

從對象解構

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

從數(shù)組解構

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

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

設定默認值

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

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

嵌套解構(多重解構)

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

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

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

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

那如果...， 多重解構可以很好玩， 更多更復雜的層級，就請同學們再自己多多探索...

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

重命名

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

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

剩余參數(shù)(配合擴展運算符)

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

    只取想要使用的第一個變量
    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 實戰(zhàn)之 解構賦值",
                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 實戰(zhàn)之 解構賦值",
                        publicshDate: "2019-05-23",
                        abstract: "解構賦值之[多重解構]"
                    }
                }
    我的心中只有 articleId 沒有它，其它的都跟 rest 混去吧～～～

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