ECMASCRIPT 6 实战之 解构赋值

摘要：相信解构赋值自以下简称面世以来被大家快速地熟悉并运用到实际开发中了这是一种能有效减少代码量，使代码逻辑更简单优雅的技术下面我们就再来回顾总结一下解构赋值的种种用法吧基本用法从对象解构假设有一个对象，它的结构为以对称的形式从从边的对象中匹配与

相信解构赋值(Destructuring)自 ECMASCRIPT 6(以下简称 ES 6) 面世以来被大家快速地熟悉并运用到实际开发中了, 这是一种能有效减少代码量，使代码逻辑更简单优雅的技术, 下面我们就再来回顾、总结一下解构赋值的种种用法吧

从对象解构

</>复制代码 
    假设有一个 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 的代码，相同的逻辑，代码量省不少，易读性更强，更简明扼要

但如果只是基本用法，在我们实际开发中是远远不够用的，我们需要更多丰富的用法，来方便我们的快速开发:

设定默认值

为解构的变量设定默认值，以防不测 : )

</>复制代码 
    假设后端返回的数据 AritleDetail 的结构长这样:
    const AritleDetail = {
        authName: "",
        publicshDate: undefined,
        content: null
    }
    这个 AritleDetail 也是苦命，要啥啥没有, 而且最重要的 content 还居然是个 null ！！！,
    借助我们的 [设定默认值] 特性，可以巧妙地四两拔千金，轻松把后端扔过来的 garbage 化为小渣渣:
    const { authName = "未知作者", publicshDate = "2019-01-01", content = "文章内容为空"} = AritleDetail;
    有了默认值后， 我们就可以拿默认值作为渲染的兜底值了:
    
{ content }
 
    渲染为: 文章内容为空
    !Tips: undefined 与 null 会影响页面的渲染，对这类值的处理要尤其谨慎!

嵌套解构(多重解构)

当要从已解构的变量中再次取值时， 可使用多重解构

</>复制代码 
    如果后端返回的 列表页 数据 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 显示描述呢?

</>复制代码 
    const { data: { articleId, detailInfo: { abstract }}} = AritleDetail;
    访问 articleId // at_001
    访问 abstract  // 解构赋值之[多重解构]
    用到哪个取哪个, 层级再多也不怕，只要结构清晰我一样拿到它

那如果...， 多重解构可以很好玩， 更多更复杂的层级，就请同学们再自己多多探索...

</>复制代码 
    数组的多重解构，也是一样的好玩...
    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 混去吧～～～

心之所至，金石为开，有了 [设定默认值] [多重解构] [重命名] [剩余参数] 四大绝技，平步江湖，无人能敌...