ECMASCRIPT 6 实战之 解构赋值
栏目: JavaScript · 发布时间: 5年前
内容简介:相信解构赋值(Destructuring)自 ECMASCRIPT 6(以下简称 ES 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; 有了默认值后, 我们就可以拿默认值作为渲染的兜底值了: <div>{ content }</div> 渲染为: 文章内容为空 !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 混去吧~~~ 复制代码
心之所至,金石为开,有了 [设定默认值] [多重解构] [重命名] [剩余参数] 四大绝技,平步江湖,无人能敌...
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。