常用ES6 语法

2021年10月21日 18:56 · 阅读 44

目标

能够知道如何使用ES6的模块化语法
能够知道如何使用Promise解决回调地狱的问题
能够知道如何使用async/ await简化 Promise的调用
能够说出什么是EventLoop

-哈能够说出宏任务和微任务的执行顺序

1. es6模块化

1.1 node.js怎么模块化

导入require（）方法
模块对外共享成员使用module。exports对象

模块化的优点：

大家都遵守同样的模块化规范写代码，降低了沟通的成本，极大方便了各个模块之间的相互调用。

1.2 什么是es6模块化规范

ES6模块化规范是浏览器端与服务器端通用的模块化开发规范。

它的出现极大的降低了前端开发者的模块化学习成本，开发者不需再额外学习AMD、CMD或 CommonJS等模块化规范。

规范中定义：

每个js都是一个独立的模块
导入其他的要用import
向外要用export

1.3 基本语法

主要有三种:

默认导出与默认导入
按需导出和按需导入
直接导入并执行

默认导出

export default
复制代码

默认导入

import xxx from "xxx"
复制代码

只能用一次默认导出

按需导出

export xxx
复制代码

按需导入

import {xxx} from “xxx”
复制代码

按需导出与按需导入的注意事项

每个模块中可以使用多次按需导出
按需导入的成员名称必须和按需导出的名称保持一致
按需导入时，可以使用as关键字进行重命名
按需导入可以和默认导入一起使用

直接导入并执行模块中的代码

如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员。此时，可以直接导入并执行模块代码

2. promise

2.1 回调地狱

多层回调函数的相互嵌套，就形成了回调地狱

回调地狱的缺点:

代码耦合性太强，牵一发而动全身，难以维护
大量冗余的代码相互嵌套，代码的可读性变差

如何解决回调地狱的问题

解决回调地狱的问题，ES6 (ECMAScript 2015）中新增了Promise的概念。

2.1 promise的基本概念

promise是一个构造函数
1. 可以创建promise的实例
2. new出来的实例，代表一个异步操作
Promise.prototype上包含一个.then()方法
1. 每一次new Promise()构造函数得到的实例对象，
2. 都可以通过原型链的方式访问到.then()方法，例如p.then()
.then()方法用来预先指定成功和失败的回调函数
1. p.then(成功的回调函数，失败的回调函数)
2. p.then(result => { }, error => {})
3. 失败可以不写
.catch 捕获错误
Promise.all()方法

Promise.all()方法会发起并行的Promise异步操作，等所有的异步操作全部结束后才会执行下一步的.then操作（等待机制)。 6. Promise.race()方法 Promise.race()方法会发起并行的Promise 异步操作，只要任何一个异步操作完成，就立即执行下一步的.then操作（赛跑机制）。

2.2 创建具体的异步操作

如果想要创建具体的异步操作，则需要在new Promise()构造函数期间，传递一个function 函数，将具体的异步操作定义到function函数内部。

2.3 调用resolve和reject回调函数

promise 异步操作的结果，可以调用resolve或 reject回调函数进行处理。

3. await和async

3.1 什么是async/await

asynclawait是ES8(ECMAScript 2017）)引入的新语法，用来简化 Promise异步操作。在 async/ await出现之前，开发者只能通过链式.then()的方式处理Promise异步操作。

3.2 async/await的使用注意事项

如果在function中使用了await，则function 必须被async修饰在async方法中，第一个await 之前的代码会同步执行，await 之后的代码会异步执行

4. EvemntLoop

4.1 JavaScript是单线程的语言

JavaScript是一门单线程执行的编程语言。也就是说，同一时间只能做一件事情。

JavaScript的执行线程

任务1

任务2

任务3

任务N..

待执行的任务队列

单线程执行任务队列的问题: 如果前一个任务非常耗时，则后续的任务就不得不一直等待，从而导致程序假死的问题。

4.2 同步任务和异步任务

为了防止某个耗时任务导致程序假死的问题，JavaScript把待执行的任务分为了两类:

同步任务( synchronous)

又叫做非耗时任务，指的是在主线程上排队执行的那些任务
只有前一个任务执行完毕，才能执行后一个任务

异步任务

又叫做耗时任务，异步任务由JavaScript委托给宿主环境进行执行
当异步任务执行完成后，会通知JavaScript主线程执行异步任务的回调函数

5. 什么是宏任务和微任务

JavaScript把异步任务又做了进一步的划分，异步任务又分为两类，分别是:

宏任务( macrotask)

异步Ajax请求、
setTimeout、setInterval.
文件操作
其它宏任务②
微任务( microtask)

Promise.then、.catch和.finally process.nextTick 心 ●其它微任务