位置: 编程技术 - 正文

深入浅出讲解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的面向对象)

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

  • 企业销售折扣折让会计分录
  • 小规模纳税人个税是月报还是季报
  • 商誉减值是在年报还是半年报
  • 对外支付代扣代缴增值税
  • 员工意外险费用
  • 印花税是当月交当月的吗
  • 会计凭证装订放哪些报表
  • 兼职业务拿提成合法吗
  • 收到诉讼状之后怎么办
  • 员工午餐费要交个税吗
  • 开房屋租金发票需要带什么资料
  • 商贸流通企业包括哪些
  • 应计入资产负债表应付利息项目的有
  • 进项抵扣怎么操作
  • 非独立核算公司一定要体现公司的名称吗
  • 商贸企业销售商品结转成本是手工算吗
  • 购买财务软件账务处理规定
  • 转让长期股权投资交什么税
  • 合同和付款单位不一致发票应该开给谁
  • 生产企业出口退税的计算方法
  • 购买面粉的税率是多少
  • 出差补贴是否缴纳个人所得税 北京
  • 私车公用税务处理
  • 付现金可以开专用发票吗
  • 增值税开票系统收款人在哪里设置
  • 当月支付费用当月收到发票
  • 小规模适用税率
  • 银行定期存款账户
  • 长期闲置的机器叫什么
  • 腾讯手游助手玩不了金铲铲
  • 公司多交的公积金能退吗
  • win7系统为什么没有无线网络连接
  • Laravel 5.5中为响应请求提供的可响应接口详解
  • 电脑没有声音问题
  • PHP:stream_get_transports()的用法_Stream函数
  • 带息应收票据的核算
  • 环形链表入口节点
  • 吕宋岛以南坐落着21座极大的岛屿
  • 生产费用在完工产品和在产品之间
  • 银装素裹的意思和造句
  • 金融负债期末可以转出吗
  • form表单中自动提交表单的按钮类型是
  • 未分配利润为负的原因
  • php closure类
  • 学摄影要交学费吗
  • 财务会计制度或纳税人财务会计核算办法
  • 图像修复技术
  • topas命令详解
  • 包装费和售后服务的区别
  • 所有者权益总计是什么
  • 织梦怎么改网站主页
  • 计算机网络面试八股文
  • vue2响应式原理面试回答
  • 领取营业执照后超过30天
  • sqlserver模糊查询表名
  • 流动资产损失计入营业外支出吗
  • 内账会计有法律风险吗
  • 行政单位误餐费标准
  • 未分配利润核销不良贷款
  • 车辆购置税能抵扣企业所得税吗
  • 已启动申报比对异常怎样才能作废,还没过税期
  • 材料采购成本包括买价和采购费用
  • 听妈妈讲那过去的事情讲课
  • 私营企业固定资产法律制度
  • 获取sqlserver密码
  • mysql事务视图
  • win10的安装目录在哪
  • 如何提高windows7运行速度
  • vsftpd.service disabled
  • brasil.exe是什么进程
  • 如何用mac制作ppt
  • javascript 数组操作
  • if iferror find
  • python 二分查找函数
  • androidobb
  • 银行人员司法查询给查错了,怎么办
  • 怎样查看招聘信息
  • 税务网上申报怎样操作
  • 龙岗税务分局管辖范围
  • 税收是初次分配的手段
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设