解构给默认值_ES6(二):展开运算符、解构、class

const:定义常量,不可以改变类型,当是数组时,可以push,以增加数组项。当是字符串或其他基本类型时,不可以改变值。

模板字符串:不仅可以使用${}包裹变量,还可以在里面调用方法。

箭头函数:帮我们缩减代码、改变this指向。当箭头函数代码块只有一句返回值时,可以省略return关键字,合并写为一行。

增强对象字面量:缩减代码

ce766e9cf524c81a6e25455d9bf9c3f2.png

095b210f05dd35a9f28ce1f1f630c934.png

函数参数默认值:优化代码

c88a4c0b4cf7ae420073c1739c0ec3d3.png

ES6中,可以定义一个函数参数默认值:

abf53fa864f96749aeb619fd4f0f6a2b.png

如果传参了,按照传的来返回,如果没有传参,就按照默认的值来返回。

spread operator 展开运算符:更快,更便捷的操作数组

7d43fd38c4ceeda078afe7e015bc8c64.png

但是,使用展开运算符,就可以

c4f613b988c42684fb7623e4006193a0.png

这是展开运算符的基本操作。

它还可以替代掉push的方法。

5ed79b64aaafe5c72e0562ba64efdeb9.png

使用展开运算符:

788d7ece277b2749a8304799c9179d4a.png

不仅可以这样操作数组,还可以这样操作字符串。

5ce262bfb55dc1d8c8ff9578f8a7dd16.png

解构 :应用于两种数据类型:对象 数组 。 目的:更加清晰的知道数组中对应的内容 以及对象中属性解构出来

3c5045d95dc351eb33c2249191d2456d.png

976221cbec56e60bd7804eca524e4534.png

数组解构:

c45cebd9fbfcfd3fd0a8f094d8524687.png

赋值时也可以进行解构:

dd728895b8d1eca0f7660538d91607ec.png

数组与对象融合的解构:

aad764b0babe94cf60fc990e0c4cc876.png

93851c1b31550a2c4287d577143782ca.png

那么,怎么拿到第一个对象里的age值呢?

ec7108fe8b15c2812fe0aabe8c5797fa.png

使用场景:

5e18d03a76483f1fdaec5780d54aef20.png

可以再简化一下:

9b2ccb87ace58343abeeb08cd39e2126.png

继续优化:

57b6dce1cb83cf29811f0505b58c8d2e.png

class: 面向对象

c6ce8f6df8a11d123773b776f2cfa785.png

df438bc6ec65b51758c5c5f4da1f0272.png

6690e2f6a227e50f246090f6e1a714d6.png

46ad717735fd41df1bb2ae14b0057ef6.png

ES5中这些,在原型上去操作的方法,有点不适的感觉。看下ES6

407905e9855e18d4f38d523acbf0f8d8.png

1de7539e4d35d13674b82778f87b55c7.png

2ac92d9f2c3869be48240a28da496328.png

b9921084aec7d9eddea09c8c50336a7a.png

使用了super方法,就调用了Car里面的constructor。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值