const:定义常量,不可以改变类型,当是数组时,可以push,以增加数组项。当是字符串或其他基本类型时,不可以改变值。
模板字符串:不仅可以使用${}包裹变量,还可以在里面调用方法。
箭头函数:帮我们缩减代码、改变this指向。当箭头函数代码块只有一句返回值时,可以省略return关键字,合并写为一行。
增强对象字面量:缩减代码
![ce766e9cf524c81a6e25455d9bf9c3f2.png](https://img-blog.csdnimg.cn/img_convert/ce766e9cf524c81a6e25455d9bf9c3f2.png)
![095b210f05dd35a9f28ce1f1f630c934.png](https://img-blog.csdnimg.cn/img_convert/095b210f05dd35a9f28ce1f1f630c934.png)
函数参数默认值:优化代码
![c88a4c0b4cf7ae420073c1739c0ec3d3.png](https://img-blog.csdnimg.cn/img_convert/c88a4c0b4cf7ae420073c1739c0ec3d3.png)
ES6中,可以定义一个函数参数默认值:
![abf53fa864f96749aeb619fd4f0f6a2b.png](https://img-blog.csdnimg.cn/img_convert/abf53fa864f96749aeb619fd4f0f6a2b.png)
如果传参了,按照传的来返回,如果没有传参,就按照默认的值来返回。
spread operator 展开运算符:更快,更便捷的操作数组
![7d43fd38c4ceeda078afe7e015bc8c64.png](https://img-blog.csdnimg.cn/img_convert/7d43fd38c4ceeda078afe7e015bc8c64.png)
但是,使用展开运算符,就可以
![c4f613b988c42684fb7623e4006193a0.png](https://img-blog.csdnimg.cn/img_convert/c4f613b988c42684fb7623e4006193a0.png)
这是展开运算符的基本操作。
它还可以替代掉push的方法。
![5ed79b64aaafe5c72e0562ba64efdeb9.png](https://img-blog.csdnimg.cn/img_convert/5ed79b64aaafe5c72e0562ba64efdeb9.png)
使用展开运算符:
![788d7ece277b2749a8304799c9179d4a.png](https://img-blog.csdnimg.cn/img_convert/788d7ece277b2749a8304799c9179d4a.png)
不仅可以这样操作数组,还可以这样操作字符串。
![5ce262bfb55dc1d8c8ff9578f8a7dd16.png](https://img-blog.csdnimg.cn/img_convert/5ce262bfb55dc1d8c8ff9578f8a7dd16.png)
解构 :应用于两种数据类型:对象 数组 。 目的:更加清晰的知道数组中对应的内容 以及对象中属性解构出来
![3c5045d95dc351eb33c2249191d2456d.png](https://img-blog.csdnimg.cn/img_convert/3c5045d95dc351eb33c2249191d2456d.png)
![976221cbec56e60bd7804eca524e4534.png](https://img-blog.csdnimg.cn/img_convert/976221cbec56e60bd7804eca524e4534.png)
数组解构:
![c45cebd9fbfcfd3fd0a8f094d8524687.png](https://img-blog.csdnimg.cn/img_convert/c45cebd9fbfcfd3fd0a8f094d8524687.png)
赋值时也可以进行解构:
![dd728895b8d1eca0f7660538d91607ec.png](https://img-blog.csdnimg.cn/img_convert/dd728895b8d1eca0f7660538d91607ec.png)
数组与对象融合的解构:
![aad764b0babe94cf60fc990e0c4cc876.png](https://img-blog.csdnimg.cn/img_convert/aad764b0babe94cf60fc990e0c4cc876.png)
![93851c1b31550a2c4287d577143782ca.png](https://img-blog.csdnimg.cn/img_convert/93851c1b31550a2c4287d577143782ca.png)
那么,怎么拿到第一个对象里的age值呢?
![ec7108fe8b15c2812fe0aabe8c5797fa.png](https://img-blog.csdnimg.cn/img_convert/ec7108fe8b15c2812fe0aabe8c5797fa.png)
使用场景:
![5e18d03a76483f1fdaec5780d54aef20.png](https://img-blog.csdnimg.cn/img_convert/5e18d03a76483f1fdaec5780d54aef20.png)
可以再简化一下:
![9b2ccb87ace58343abeeb08cd39e2126.png](https://img-blog.csdnimg.cn/img_convert/9b2ccb87ace58343abeeb08cd39e2126.png)
继续优化:
![57b6dce1cb83cf29811f0505b58c8d2e.png](https://img-blog.csdnimg.cn/img_convert/57b6dce1cb83cf29811f0505b58c8d2e.png)
class: 面向对象
![c6ce8f6df8a11d123773b776f2cfa785.png](https://img-blog.csdnimg.cn/img_convert/c6ce8f6df8a11d123773b776f2cfa785.png)
![df438bc6ec65b51758c5c5f4da1f0272.png](https://img-blog.csdnimg.cn/img_convert/df438bc6ec65b51758c5c5f4da1f0272.png)
![6690e2f6a227e50f246090f6e1a714d6.png](https://img-blog.csdnimg.cn/img_convert/6690e2f6a227e50f246090f6e1a714d6.png)
![46ad717735fd41df1bb2ae14b0057ef6.png](https://img-blog.csdnimg.cn/img_convert/46ad717735fd41df1bb2ae14b0057ef6.png)
ES5中这些,在原型上去操作的方法,有点不适的感觉。看下ES6
![407905e9855e18d4f38d523acbf0f8d8.png](https://img-blog.csdnimg.cn/img_convert/407905e9855e18d4f38d523acbf0f8d8.png)
![1de7539e4d35d13674b82778f87b55c7.png](https://img-blog.csdnimg.cn/img_convert/1de7539e4d35d13674b82778f87b55c7.png)
![2ac92d9f2c3869be48240a28da496328.png](https://img-blog.csdnimg.cn/img_convert/2ac92d9f2c3869be48240a28da496328.png)
![b9921084aec7d9eddea09c8c50336a7a.png](https://img-blog.csdnimg.cn/img_convert/b9921084aec7d9eddea09c8c50336a7a.png)
使用了super方法,就调用了Car里面的constructor。