ECMAScript6
为什么要学习ES6
- ES5语言的先天性不足。比如变量提升、内置对象的方法不灵活、模块化实 现不完善等等
- 为了后面vue、尤其是react框架做好了准备
- 目前大部分公司的项目都在使用es6
ES6新特性
- let和const命令
- es6的模板字符串
- 增强的函数
- 扩展的宇符串、对象、数组功能
- 解构赋值
- Symbol
- Map和Set
- 迭代器和生成器
- Promise对象
- Proxy对象
- async的用法
- 类class
- 模块化实现
强大的babel
- 被称为下一代的Javascript编译器。可以将es6的代码转换成es5的代码,从而让浏览器获得支持。
- 这个课程我们只需要知道前端工具babel这个工具的作用,在这里不做过多的赘述
参考文献
- ES6阮一峰教程:es6.ruanyifeng.com
- MDN教程:https:/ /developer.mozilla.org/zh-CN/docs /web/JavaScritp
let和const
1.let声明变量没有变量提升
2.let是一个块作用域,在别的地方打印都报错。
3.let不能重复声明,没有覆盖性。
注意:const声明常量一旦被声明无法修改。
const可以声明对象,然后这个对象里面的常量可以通过一定的方法被修改,但不能直接修改对象。
const不会污染全局。
建议:默认情况下使用const,而只在需要修改变量值的情况下使用let。
模版字符串(方便)
模板字符串:使用tab键上面的反引号,插入变量时使用${变量名}。
函数之默认值,剩余参数
es6解决了以上的不方便,具体用的是剩余参数。
剩余参数:由三个点…和一个紧跟着的具名参数指定。 例如:...keys,解决了arguments的问题。
扩展运算符
剩余运算符:把多个独立的合并到一个数组中。
扩展运算符:将一个数组分割,并将各个项作为分离的参数传给函数。
// const maxNum = Math. max (20, 30);
// console. Log (maxNum);
es6 箭头函数 箭头函数this指向和注意事项️
箭头函数没有this指向,箭头函数内部this值只能通过查找作用域链,一旦使用箭头函数当前就不存在作用域。
️1.使用箭头函数,函数内部没有arguments(参数)。
2.箭头函数不能使用new关键字来实例化对象。
3.箭头函数不是一个对象。
解构赋值
解构赋值是对赋值运算符的一种扩展。针对数组和对象进行操作。
优点:代码书写上简单易读。