目录
ES6的模块化
1. 回顾：node.js 中如何实现模块化
node.js 遵循了
CommonJS
的模块化规范。其中：
⚫
导入其它模块使用
require()
方法
⚫
模块对外共享成员使用
module.exports
对象
模块化的好处：
大家都遵守同样的模块化规范写代码，
降低了沟通的成本
，
极大方便了各个模块之间的相互调用
，利人利己。
2. 前端模块化规范的分类
在
ES6 模块化规范
诞生之前，JavaScript 社区已经尝试并提出了
AMD
、
CMD
、
CommonJS
等模块化规范。
但是，这些由社区提出的模块化标准，还是存在一定的
差异性
与
局限性
、
并不是
浏览器与服务器
通用的模块化
标准
，例如：
⚫
AMD 和 CMD 适用于
浏览器端
的 Javascript 模块化
⚫
CommonJS 适用于
服务器端
的 Javascript 模块化
太多的模块化规范给开发者增加了
学习的难度
与
开发的成本
。因此，
大一统的 ES6 模块化规范诞生了
！
3. 什么是 ES6 模块化规范
ES6 模块化规范
是
浏览器端
与
服务器端
通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学
习成本，开发者不需再额外学习 AMD、CMD 或 CommonJS 等模块化规范。
ES6 模块化规范中定义：
⚫
每个 js 文件都是一个独立的模块
⚫
导入其它模块成员使用
import
关键字
⚫
向外共享模块成员使用
export
关键字
4. 在 node.js 中体验 ES6 模块化
node.js 中
默认仅支持 CommonJS 模块化规范
，若想基于 node.js 体验与学习 ES6 的模块化语法，可以按照
如下两个步骤进行配置：
①
确保安装了
v14.15.1
或更高版本的 node.js
②
在 package.json 的根节点中添加
"type": "module"
节点
5. ES6 模块化的基本语法（重要--熟练把握）
5.1默认导出
默认导出的语法：
export default
默认导出的成员
5.2按需导出
默认导入的语法：
import
接收名称
from
'
模块标识符
'
ES6 的模块化主要包含如下 3 种用法：
①
默认导出与默认导入
代码展示：
let n1=10;
let n2=20;
function show(){
}
//导出
export default{
n1:n1,
show:show
}// 导入
// import xxx from './01默认导出' 注意：必须要加扩展名
import m1 from './01默认导出.js'
console.log(m1);输出的结果：
只会输出暴露出的n1和show
5.1 默认导出的注意事项
每个模块中，只允许使用唯一的一次 export default，否则会报错！
5.1 默认导入的注意事项
默认导入时的接收名称可以任意名称，只要是合法的成员名称即可
-----------------------------------------------
②
按需导出与按需导入
// 操作步骤：先写变量和函数 在导出
export let s1="aaa"
export let s2="haha"
export function say(){}
// 默认导出
export default{
}// 综合使用 修改变量名字
import info, { s1, s2 as ju, say } from './03按需导出.js'
// console.log(s1,s2,say);
console.log(s1);
console.log(ju);
console.log(say);
console.log(info);
5.2 按需导出与按需导入的
注意事项
①
每个模块中可以使用
多次
按需导出
②
按需
导入的成员名称
必须和
按需导出的名称
保持一致
③
按需导入时，可以使用
as 关键字
进行重命名
④
按需导入可以和默认导入一起使用
-----------------------------------------------
③
直接导入并执行模块中的代码
如果
只想单纯地执行某个模块中的代码
，并不需要得到模块中向外共享的成员。此时，可以直接导入并执行模
代码展示：
console.log(
" 哈哈哈"
);import "./05直接导出.js"
注：不管怎么样导入 导入文件里面的代码都会执行一遍！！！
Promise（面试）
1. 回调地狱
多层回调函数的相互嵌套
，就形成了
回调地狱
。示例代码如下：
回调地狱的缺点：
⚫
代码耦合性太强，牵一发而动全身，
难以维护
⚫
大量冗余的代码相互嵌套，代码的
可读性变差
1.1 如何解决回调地狱的问题
为了解决回调地狱的问题，
ES6
（ECMAScript 2015）中新增了
Promise
的概念。
1.2 Promise 的基本概念
①
Promise 是一个构造函数
⚫
我们可以创建 Promise 的实例
const p = new Promise()
⚫
new 出来的 Promise 实例对象，
代表一个异步操作
②
Promise.prototype 上包含一个 .then() 方法
⚫
每一次 new Promise() 构造函数得到的实例对象，
⚫
都可以
通过原型链的方式
访问到 .then() 方法，例如
p.then()
③
.then() 方法用来预先指定成功和失败的回调函数
⚫
p.then(
成功的回调函数
，
失败的回调函数
)
⚫
p.then(
result
=> { },
error
=> { })
⚫
调用 .then() 方法时，成功的回调函数是必选的、失败的回调函数是可选的
import ju from "then-fs"
ju.readFile('./01.txt','utf8').then(r1=>{console.log(r1);},err1=>{console.log(err1.message);})
ju.readFile('./02.txt','utf8').then(r2=>{console.log(r2);},err2=>{console.log(err2.message);})
ju.readFile('./03.txt','utf8').then(r3=>{console.log(r3);},err3=>{console.log(err3.message);})
2.
基于回调函数
按顺序读取文件内容
// 导入文件--读取文件--读取第一个就然后第二个，然后调用第二个返回第三
import ju from "then-fs"
// 读取
ju.readFile('./0111.txt','utf8').then((r1)=>{
console.log(r1);
return ju.readFile('./02.txt',"utf8")
})
.then((r2)=>{
console.log(r2);
return ju.readFile('./033.txt',"utf8")
})
.then((r3)=>{
console.log(r3);
})
.catch((err)=>{
console.log(err.message);
})3. 基于 then-fs 读取文件内容
由于 node.js 官方提供的 fs 模块
仅支持
以
回调函数的方式
读取文件，
不支持 Promise 的调用方式
。因此，需
要先运行如下的命令，安装
then-fs
这个第三方包，从而支持我们基于 Promise 的方式读取文件的内容：
3.1 then-fs 的基本使用
调用 then-fs 提供的
readFile()
方法，可以异步地读取文件的内容，
它的返回值是 Promise 的实例对象
。因
此可以
调用 .then() 方法
为每个 Promise 异步操作指定
成功
和
失败
之后的回调函数。示例代码如下：
import ju from "then-fs"
ju.readFile('./01.txt','utf8').then(r1=>{console.log(r1);},err1=>{console.log(err1.message);})
ju.readFile('./02.txt','utf8').then(r2=>{console.log(r2);},err2=>{console.log(err2.message);})
ju.readFile('./03.txt','utf8').then(r3=>{console.log(r3);},err3=>{console.log(err3.message);})
注意：上述的代码
无法保证文件的读取顺序
，需要做进一步的改进！
3.2 .then() 方法的特性
如果上一个 .then() 方法中
返回了一个新的 Promise 实例对象
，则可以通过下一个 .then() 继续进行处理。通
过 .then() 方法的
链式调用
，就解决了回调地狱的问题。
3.3
基于 Promise
按顺序读取文件的内容
// 导入文件--读取文件--读取第一个就然后第二个，然后调用第二个返回第三
import ju from "then-fs"
// 读取
ju.readFile('./0111.txt','utf8').then((r1)=>{
console.log(r1);
return ju.readFile('./02.txt',"utf8")
})
.then((r2)=>{
console.log(r2);
return ju.readFile('./033.txt',"utf8")
})
.then((r3)=>{
console.log(r3);
})
3.4 通过 .catch 捕获错误
在 Promise 的链式操作中如果发生了错误，可以使用 Promise.prototype.
catch
方法进行捕获和处理：
// 导入文件--读取文件--读取第一个就然后第二个，然后调用第二个返回第三
import ju from "then-fs"
// 读取
ju.readFile('./0111.txt','utf8').then((r1)=>{
console.log(r1);
return ju.readFile('./02.txt',"utf8")
})
.then((r2)=>{
console.log(r2);
return ju.readFile('./033.txt',"utf8")
})
.then((r3)=>{
console.log(r3);
})
.catch((err)=>{
console.log(err.message);
})
扩展：----如果第二个文件错误，后面都不会在执行。
3.5
Promise.all()
方法---了解
Promise.all() 方法会发起并行的 Promise 异步操作，等
所有的异步操作全部结束后
才会执行下一步的 .then
操作（等待机制）。示例代码如下：
3.6
Promise.race()
方法
Promise.race() 方法会发起并行的 Promise 异步操作，
只要任何一个异步操作完成，就立即执行下一步的
.then 操作
（赛跑机制）。示例代码如下：
4. 基于 Promise 封装读文件的方法
方法的封装要求：
①
方法的名称要定义为
getFile
②
方法接收一个
形参 fpath
，表示要读取的文件的路径
③
方法的
返回值
为 Promise 实例对象
代码展示：
// 导入
import fs from "fs"
function getFile(fpath) {
// Promise里面放入的是函数(参数1成功，参数2失败)---函数体里面读取--读取里面的参数就是返回的结果
return new Promise(function (resolve, reject) {
// 读取
fs.readFile(fpath, "utf8", (err, dataStr) => {
// 如果失败调用返回失败，否则成功调用返回返回成功
if (err) { reject(err) }
resolve(dataStr)
})
})
}
// 调用封装的函数--读取-then
getFile("./01.txt", "utf8",)
.then((r1) => {
console.log(r1);
})
.catch((err) => {
console.log(err.message);
})
async/await
1. 什么是 async/await
async/await
是
ES8
（ECMAScript 2017）引入的新语法，用来
简化 Promise 异步操作
。在 async/await 出
现之前，开发者只能通过
链式 .then() 的方式
处理 Promise 异步操作。示例代码如下：
import thenFs from "then-fs"
// 2.注：必须放在函数里面 而且await（等待）和async（同步）必须配合使用，await后面必须是promise实例
console.log("a");
async function fn1(){
console.log("b");
let r1= await thenFs.readFile("./01.txt","utf8")
console.log(r1);
let r2= await thenFs.readFile("./02.txt","utf8")
console.log(r2);
let r3= await thenFs.readFile("./03.txt","utf8")
console.log(r3);
console.log("c");
}
fn1()
console.log("d");
EventLoop
1. JavaScript 是单线程的语言
js是单线程的，一个任务执行完才会执行另外一个任务。
JavaScript 是一门
单线程执行
的编程语言。也就是说，同一时间只能做一件事情。
单线程执行任务队列的问题：
如果
前一个任务非常耗时
，则后续的任务就不得不一直等待，从而导致
程序假死
的问题。
2. 同步任务和异步任务（面试）
为了防止某个
耗时任务
导致
程序假死
的问题，JavaScript 把待执行的任务分为了两类：
①
同步任务
（synchronous）
⚫
又叫做
非耗时任务
，指的是在主线程上排队执行的那些任务
⚫
只有前一个任务执行完毕，才能执行后一个任务
②
异步任务（asynchronous）
⚫
又叫做
耗时任务
，异步任务由 JavaScript
委托给
宿主环境进行执行
⚫
当异步任务执行完成后，会
通知 JavaScript 主线程
执行异步任务的
回调函数
异步:计时器（setTimeout，setInterval），ajax，读取文件。
3. 同步任务和异步任务的执行过程
①
同步任务由 JavaScript 主线程次序执行
②
异步任务
委托给
宿主环境执行
③
已完成的异步任务
对应的回调函数
，会被
加入到任务队列中等待执行
④
JavaScript 主线程的
执行栈
被清空后，会
读取任务队列中的回调函数，次序执行
⑤
JavaScript 主线程不断重复上面的第 4 步
ipt 主线程从“任务队列”中读取异步
任务的回调函数，放到执行栈中依次执行
。这
个过程是循环不断的，所以整个的这种运行机
制又称为
EventLoop
（事件循环）。
4. 结合 EventLoop 分析输出的顺序
正确的输出结果：ADCB。其中：
⚫
A 和 D 属于
同步任务
。会根据代码的先后顺序
依次被执行
⚫
C 和 B 属于
异步任务
。它们的回调函数会被加入到任务队列中，等待主线程空闲时再执行
----------------------------
宏任务和微任务（面试）
JavaScript 把异步任务又做了进一步的划分，异步任务又分为两类，分别是：
①
宏任务
（macrotask）
⚫
异步 Ajax 请求、
⚫
setTimeout、setInterval、
⚫
文件操作
⚫
其它宏任务
-----------------------------------------------
②
微任务
（microtask）
⚫
Promise.then、.catch 和 .finally
⚫
process.nextTick
⚫
其它微任务
2. 宏任务和微任务的执行顺序
每一个宏任务执行完之后，都会检查
是否存在待执行的微任务
，
如果有，则执行完所有微任务之后，再继续执行下一个宏任务。
4. 分析以下代码输出的顺序（面试题）
正确的输出顺序是：2431
分析：
①
先执行所有的
同步任务
⚫
执行第 6 行、第 12 行代码
②
再执行
微任务
⚫
执行第 9 行代码
③
再执行
下一个宏任务
⚫
执行第 2 行代码
知识点回顾：--易错点补充
temp为返回值！！！！此时没有return打印就是undefined，与传入的参数无关。因为函数只有return才有返回值，没有return就是undefined。
此题的return是属于箭头函数的！！！
log的返回值永远是undefined
<script>
function fn1(){
return console.log("666"); //log的返回值永远都是undefined，所以返回值是undefined
}
console.log(fn1()); //打印出来是666和返回的undefined
console.log("------------------------------");
// 题二：
var temp=console.log("666");
console.log(temp); ///temp打印的就是返回值！！！---因为log的返回值是undefined，所以打印666和undefined
</script>
注：new promise是同步的！！！promise.then是微任务！！！！
---------------------------------------------------------------------------------
935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
