位置: 编程技术 - 正文

深入浅出讲解ES6的解构(深入浅出讲解es63)

编辑:rootadmin

推荐整理分享深入浅出讲解ES6的解构(深入浅出讲解es63),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:深入浅出讲解es63,深入浅出讲解系统论,深入浅出讲解es63,深入浅出讲解FOC算法与SVPWM技术,深入浅出讲解es6,深入浅出讲解了,深入浅出讲解傅里叶变换,深入浅出讲解es60,内容如对您有帮助,希望把文章链接给更多的朋友!

什么是解构?

解构与构造数据截然相反。 例如,它不是构造一个新的对象或数组,而是逐个拆分现有的对象或数组,来提取你所需要的数据。

ES6使用了一种新模式来匹配你想要提取的数值, 解构赋值就是采用了这种模式。 该模式会映射出你正在解构的数据结构,只有那些与该模式相匹配的数据,才会被提取出来。

被解构的数据项位于赋值运算符 = 的右侧,可以是任何数组和对象的组合,允许随意嵌套。用于给这些数据赋值的变量个数不限。

数组解构

数组解构 使用一个数组作为一个数据项,你可以根据 数组模式 (用于从数组中匹配你所需要的数值)从这个数组里面提取数值给一个或者多个变量赋值。

数组模式 是根据数值的位置来鉴别哪些值是你想要提取的。它必须能精确地映射数组的结构,来要让数组模式中的每个变量都被赋上 被解构数组中 位置与之相对应的值。

举几个例子来帮助我们理解吧:

数组模式示例

把数组中所有的数值赋给一个个单独的变量

提取除第一个外的所有数值

提取除第二个外的所有数值

提取除最后一个外的所有数值

嵌套数组

这种匹配模式也支持嵌套数组,只要保证赋值运算符 = 左侧的数组模式与右侧的数组结构相匹配即可。再次说明一下,= 左边的变量都会被赋上 = 右侧数组中位置与之相对应的值。 无论你怎么深层次地嵌套,仍可以对它们进行解构。

解构嵌套的数组

从深层嵌套的数组中提取一个值

运用rest操作符捕获所有剩余项

如果你想要获取特定的数组项,并且把剩余的项归在一个数组,那么你可以这样运用 rest操作符 来解构:

对象解构

对象解构就更神奇了,尤其是当你需要从一个复杂的、深层嵌套的对象中取值时,其作用更加明显。重申一下,对象解构与数组解构用的是同样的规则(即在赋值运算符左侧创建一个 对象模式, 使它的变量位置与 = 右侧对象的值位置相匹配)。

在对象解构中,你需要指明那些需要被提取值的属性名称,以及将要被赋值的变量名。跟数组解构一样,我们需要在赋值运算符左边先创建一个对象模式来映射被解构的对象。

尽管在这种情况下,我们想要提取的是 对象属性的值 (如:我们从 { prop: value } 中提取 value)。相应地,我们的对象模式必须有一个变量,这个变量的位置要跟我们即将提取的属性值所在的位置一致。

简单示例

提取一个简单的对象属性值

我们可以这样做,来将对象 { ironMan: 'Tony Stark' } 的属性 ironMan 的值 'Tony Stark' 赋值给变量 a:

提取多个属性值

我们只要拓展相同的模式,就可以从一个对象中提取多个属性值,如下:

观察一下这个解构模式是怎么确切地匹配 被解构对象 的。

嵌套的对象解构

像解构嵌套数组一样,我们可以对嵌套对象进行解构,不管它的层级多深。

给赋值的变量命名

当然,把变量名设为诸如 a, b, c 之类,是很糟糕的,变量名称应该是有意义的。

冗长式命名

这种做法比上面用 a,b,c 命名好,但是仍然可以完善。 { ironMan: ironMan } 看起来有点丑而且不直观。

语法上命名捷径

如果你要把一个对象的属性值赋给一个变量,该变量的名称跟对象的属性名称一样,那么在 = 左侧的赋值模式里面,你只需要简单地写属性名即可,如下:

深入浅出讲解ES6的解构(深入浅出讲解es63)

由于 被解构的对象属性名称 跟 被赋值的变量名称 相同,我们只需要把名称列出来一次即可。

语法简洁

我们稍微重新修整下前面的代码,就可以使它们看起来更加简洁明了:

从对象中提取一个深层嵌套的属性

当我们要提取一个深层嵌套的对象属性时,事情就更有趣了:

等等,你是怎么阅读这段代码的?couple 这个变量又是怎么被定义的呢?

通过这样拆分,我们就可以看出赋值运算符 = 左侧是被解构对象的一个映射:

仅仅使用 const { couple } = avengers; 并没有办法提取出 couple 的值。只有把要提取的对象属性的 位置和名称映射出来,JS 编译器才能得到相应的信息,沿着对象的所有属性往下查找,并准确地提取我们想要的值。

这里也要注意到 couple 用了语法捷径给变量命名,实际上是这样的:

couple 就是这样被定义的,它的值就是对象 avengers 中属性名为 couple 的值。

给对象的属性解构赋值

到目前为止,我们都是解构对象的值来给单个的变量赋值,其实还可以给另一个对象的属性赋值。

在这里我们把 ironManCharacters.couple 的值赋给了 ironManProperties.family 这个属性,这里有两点需要说明一下:

1.解构赋值必须被包含在 圆括号 内

当我们在对一个已存在的变量(如上面例子中的 ironManProperties)进行解构时,一定要这样做,而不是去声明一个新的变量。

2.模式仍然相匹配

{ ironManCharacters: { couple... } } 与对象 avengers 中的 ironManCharacters 相匹配。这样就能如你所愿,从 avengers 对象中提取出 ironManCharacters.couple 的值了。但是现在,couple 后面放置了一个新的对象ironManProperties 和它的属性 family,其实被赋值的就是这个对象的属性ironManProperties.family了。

当你尝试把这种情况解释清楚时,是否还有所困惑呢?在jsfiddle里面尝试上面的代码,一切就明了了。

如果你不清楚自己为什么要这样做,请参考下一篇文章的例子。这些例子会告诉你,为什么采用这种模式来解构API调用的 JSON 对象,让你领略解构的神奇之处!

默认值

解构时,你还可以给变量指定一个默认值:

解构时要避免出现这些问题

解构赋值时没有使用 const, let, var

在讲到对 对象属性 进行解构赋值时就已经提及了这一点,但这里还是有必要再重申一下,让大家有个深刻的印象。

不能对已经声明的变量进行解构

也就是说,你只能在对变量解构赋值的同时声明变量。

为何不能对一个已经声明的变量进行解构呢?那是因为这时如果你使用了花括号 { ,JavaScript会认为你是在声明一个 block。

解决的办法就是把整个解构赋值用一对 圆括号 括起来。

如何对一个已声明的变量进行解构赋值

现在我们不是以花括号开头,所以JS不会认为我们是在声明一个 block ,这样就可以达到预期的解构结果。

直接返回一个被解构的值

在没有先声明一个接下来要被返回的变量时,就直接返回一个被解构的值,这样是无法达到预期效果的。例如,下面的代码中,返回的将是整个 ironMan对象,而不是预期要的值 Tony Stark。

要从一个被解构的对象中提取值,必须先把它赋值给一个变量,然后再把这个变量返回,如下代码所示:

这种把赋值和返回分成两行代码的做法实在惹人厌烦,代码丑陋,也显得没必要。但很不幸,JavaScript就是这样工作的----你必须先把解构的值赋给一个变量,然后再把它返回,两步必须分开做。

但是,没有说我们只是说分开做,并没有说一定要摆成两行代码,所以像下面这样写成一行,也是能达到预期效果的:

由于JavaScript的 _short-circuit_ 逻辑操作符 (&& and ||) 会基于第一个操作数的值来返回第二个操作数的值,所以这种写法能够达到预期效果。这里,第一个操作数是解构赋值表达式,把值赋给 realName。而 realName 也就是第二个操作数,所以它的值最终被返回。

这样做不是最佳的,但是能实现。在追求代码简短的同时,一定要注意代码的可读性。

总结本文深入讲解了 解构赋值 的主要原则。解构不仅能减少你的代码量,还能从根本上改变你的编码方式。用的越多,你就会发现越多塑造数据和函数的方式,这些实现方式在过去几乎是不可能的。希望本文对大家学习ES6有所帮助。

在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法 最近在使用微信、支付宝、百度钱包实现网页支付,对支付成功将自动关闭页面,对于支付失败,将显示错误信息。当在错误页面的时候,点击返回或

浅谈js基本数据类型和typeof JavaScript数据类型是非常简洁的,它只定义了6中基本数据类型null:空、无。表示不存在,当为对象的属性赋值为null,表示删除该属性undefined:未定义。

谈谈JavaScript中的几种借用方法 前言通过call()、apply()和bind()方法,我们可轻易地借用其它对象的方法,而无须从这些对象中继承它。在JavaScript中借用方法在JavaScript中,有时可以重用

标签: 深入浅出讲解es63

本文链接地址:https://www.jiuchutong.com/biancheng/373569.html 转载请保留说明!

上一篇:Javascript OOP之面向对象(javascript的面向对象)

下一篇:在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法(在微信支付宝借贷会影响征信吗)

  • 划转国有划拨土地要交契税吗?
  • 公司旧车出售要交什么税
  • 商业保险进项税额转出影响成本吗
  • 土地税房产税会计分录
  • 开模具厂一年能挣多少钱
  • 公司车转个人名下要交多少税
  • 公司注销员工的人身损害赔偿
  • 停车场自助缴费系统
  • 打印的电子发票需要盖章么
  • 微商怎么收税
  • 科技型中小企业条件
  • 记账凭证日期填写哪一天
  • 滞纳金用留抵增值税交怎么处理
  • 单位车转到个人名下要什么材料
  • 投资款打到个人账户算诈骗吗
  • 产值指的是财务报表哪个数值
  • 电商刷单的收入怎么做凭证?
  • 当月计提当月缴纳的增值税还用结转吗
  • 电子商务平台怎么下载中标通知书
  • 转口贸易需要申报什么税
  • 手机中的流量统计在哪里寻找
  • macOS Big Sur 11.0.1(20B29)正式版发布(附可使用的Mac机型)
  • 若依框架入门
  • 跨年度增值税发票作废怎么退税
  • 如何界定企业的收益
  • PHP:mb_check_encoding()的用法_mbstring函数
  • 出口零退税率商品有哪些
  • php imagestring
  • 收入和支出怎么合计
  • 1.启动前端项目怎么做
  • zendframework3中文手册
  • citespace关键词共现分析
  • DOMException: Failed to execute ‘insertBefore‘ on ‘Node‘: The node before which the new node ...报错
  • 房产税和城镇土地使用税需要计提吗
  • 如何快速上手看门狗2
  • 视图机制
  • 织梦cms怎么样
  • 购进销售农产品正常损耗怎么算
  • 经营租赁会计的核算原则
  • 计税工资什么意思2019
  • 增值税进项税额加计抵减会计处理
  • 收购固定资产账务处理
  • 一般纳税人直接不管会怎么样
  • 营改增后所得税怎么计算
  • 融资租赁咨询服务合同
  • 劳务派遣如何做线上业务
  • 收到电费发票做账怎么做
  • 低值易耗品属于流动资产吗
  • 投资的信托基金有哪些
  • 股东投入的资金在现金流量表中如何提现
  • 销项税额是负数怎么做账
  • 新收入准则要求
  • 小企业建账选哪种会计制度
  • 建造固定资产的账务处理(出包方式)
  • 债务重组的方式主要包括哪些
  • sql多表连接查询效率
  • 获取sqlsession
  • mysql语句删除表
  • win8系统安装教程图解
  • win7系统桌面图标设置
  • 电脑系统安装流程
  • win7系统怎么禁止软件自启动
  • linux常用命令csdn
  • linux投屏快捷键
  • win10wifi总是掉线
  • win10不兼容游戏名单
  • windows阻止
  • windows8安装程序
  • win7笔记本电脑
  • node 线程 进程
  • perl怎么读取文件
  • js date用法
  • 批处理实例
  • javascript主要学什么
  • 安卓手机管家如何卸载
  • Android as Bluetooth Low Energy Peripherial (GATT server).
  • 广东省电子税务局登录方式
  • 江苏地税个税申报时间表
  • 营业执照三证合一图片
  • 审计报告非标准意见
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设