常用ES6 语法

·  阅读 44

目标

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

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

目录

  • ES6模块化
  • Promise
  • async/ await
  • EventLoop
  • 宏任务和微任务
  • API接口案例

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的基本概念

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

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改