【ECMAScript6】
- 01. ES6介绍
- 02. let和const命令
- 03. 模板字符串
- 04. 函数之默认值、剩余参数
- 05. 函数之扩展运算符、箭头函数
- 06. 箭头函数this指向和注意事项
- 07. 解构赋值
- 08. 扩展的对象的功能(简写)
- 09. Symbol类型
- 10. Set集合数据类型
- 11. Map数据类型
- 12. 数组的扩展方法一
- 13. 数组的扩展方法二
- 14. 迭代器Interator的用法
- 15. 生成器Generator的用法
- 16. Generator的应用
- 17. Promise的基本使用
- 18. 使用Promise封装ajax
- 19. Promise对象的其他方法
- 20. async的用法
- 21. class类的用法
- 22. 类的继承
- 23. ES6的模块化实现
01. ES6介绍
ES6新特性
ES5内部提供的变量提升、内置对象的一些方法、数组、对象不是那么灵活,模块化实现没有那么完善
ps:变量提升(Variable Hoisting)是 JavaScript 中的一种行为,指的是在代码执行之前,JavaScript 引擎会将变量和函数的声明提升到其所在作用域的顶部,意味着可以在声明变量或函数之前使用它们,而不会导致错误。
ES5中造一个类使用的是构造函数
而ES6中用class(类似Java)
在前端中还有一门后端语言Node. js。
Node.js中就使用大量的一些ES6的语法
针对于10%的ES6的新特性对各大浏览器不支持,甚至90%里面可能针对于某些浏览器也是不支持的。那么我们需要前端的某些工具来对它进行一个转移。
02. let和const命令
03. 模板字符串
04. 函数之默认值、剩余参数
一、带参数默认值的函数
二、默认的表达式也可以是一个函数
三、不具名参数的一个函数
ES6的写法:
05. 函数之扩展运算符、箭头函数
一、扩展运算符
二、箭头函数
实现闭包:
06. 箭头函数this指向和注意事项
一、this指向
二、注意事项
07. 解构赋值
而解构赋值的做法是:
还可以使用剩余运算符:
还可以使用默认值
接下来,我们来对数组解构:
还可以嵌套使用(不过要结构对应):
08. 扩展的对象的功能(简写)
简写:
用之于取值器和设置器
属性表达式:
09. Symbol类型
10. Set集合数据类型
集合:
方法:
遍历集合没有什么意义:
将集合转换为数组:
11. Map数据类型
其他用法与set类似
12. 数组的扩展方法一
一、from()
二、of()
三、within()
四、find()、findIndex()
13. 数组的扩展方法二
五、遍历器的一些方法
六、includes()
14. 迭代器Interator的用法
15. 生成器Generator的用法
具体实现:
(不使用next的时候,函数的不会走的,它只是生成了一个生成器函数)
传参:
应用:
实操:
16. Generator的应用
为异步编程提供便利,进行部署ajax操作,让异步代码同步化。
所以,我们使用Generator去解决异步编程回调地狱问题。
这个过程实现了异步代码同步化:
走next,先执行request请求,alert显示;
再走请求函数里的next,走打印部分。
实现了主函数的同步化,即按顺序执行,
而不会先执行同步代码,然后执行异步代码。
再举一个例子:
但是执行结果却是如下:
更改如下:
17. Promise的基本使用
在ES6中,对于异步编程提供了三种方法:
①Generator生成器
②Promise
③Async/Await组合
异步编程传统的解决方案基本上都是使用回调函数和事件,所以显得当前的Promise更加地合理和强大。
我们先来打印一下Promise:
then里面接收回调函数:
18. 使用Promise封装ajax
本节目标是自己通过Promise对象来封装自己的一个API库
相当于
19. Promise对象的其他方法
20. async的用法
一、用法:
二、错误:
三、应用:
21. class类的用法
22. 类的继承
23. ES6的模块化实现
一直以来,js都是没有模块系统的,无法将一个大程序拆分成我们互相依赖的一些小小的文件以进行相互依赖的。
导出:
引入
(插件Live Server)和鼠标右键点击Open with Live Server,要用服务器运行起来,会传入一个ip地址(端口号),要不然静态文件访问是访问不到的。
多个导出引入:
导出:
引入:
导出的多种写法:
(注意script要改一下)