vue 第一次复习

目录

一、ES6 模块化

1.1 默认导出/导入

1.2 按需导出/导入

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

 二、Promise

2.1 回调地狱 

2.2 Promise 的基本概念

三、async/await 

 四、EventLoop

1. JavaScript 是单线程的语言 

2. 同步任务和异步任务 

3. 同步任务和异步任务的执行过程 

4. EventLoop 的基本概念 

五、宏任务和微任务 

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

2. 宏任务和微任务的执行顺序 

4. 分析以下代码输出的顺序 

---

#博学谷IT学习技术支持#

一、ES6 模块化

ES6 模块化规范中定义： 

每个 js 文件都是一个独立的模块 

导入其它模块成员使用 import 关键字 

向外共享模块成员使用 export 关键字 

1.1 默认导出/导入

export default 默认导出的成员 

let a = 10
let b = { a: 1, b: 3 }
function fun(a, b) {
    return a + b
}
// 向外导出成员对象
export default {
    a,
    b,
    fun
}

 默认导入的语法： import 接收名称 from '模块标识符'

import sum from './01 导出文件.js'
console.log(sum);  //{ a: 10, b: { a: 1, b: 3 }, fun: [Function: fun] }

1.2 按需导出/导入

按需导出的语法： export 按需导出的成员 

// 按需导出
export function fun(a, b) {
    return a * b
}

按需导入的语法： import { s1 } from '模块标识符' 

// 按需导入
import { fun } from './02 按需导出.js'
console.log(fun); //[Function: fun]

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

每个模块中可以使用多次按需导出

按需导入的成员名称必须和按需导出的名称保持一致

按需导入时，可以使用 as 关键字进行重命名

按需导入可以和默认导入一起使用 

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

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

入并执行模块代码，示例代码如下： 

// 直接导出文件
for (var i = 0; i < 10; i++) {
    console.log(i);
}

// 直接导入文件
import './03 直接导出文件.js'

 二、Promise

2.1 回调地狱 

setTimeout(function () {
    console.log(1);
    setTimeout(function () {
        console.log(2);
        setTimeout(function () {
            console.log(3);
            setTimeout(function () {
                console.log(4);
            }, 1000)
        }, 1000)
    }, 1000)
}, 1000)

回调地狱的缺点：

代码耦合性太强，牵一发而动全身，难以维护

大量冗余的代码相互嵌套，代码的可读性变差

1.2 Promise 的基本概念

 基于 then-fs 读取文件内容

由于 node.js 官方提供的 fs 模块仅支持以回调函数的方式读取文件，不支持 Promise 的调用方

式。因此，需要先运行如下的命令，安装 then-fs 这个第三方包，从而支持我们基于 Promise 的方

式读取文件的内容

import thenFs from 'then-fs'
// 基于Promise 的方式读取文件
thenFs.readFile('./1.txt', 'utf8').then(r1 => {
    console.log(r1)
    // 返回一个Promise对象
    return thenFs.readFile('./2.txt', 'utf8')
}).then(r1 => {
    console.log(r1)
    return thenFs.readFile('./3.txt', 'utf8')
}).then(r1 => {
    console.log(r1)
}).catch(err => {
    // 捕捉读取文件时发生的错误
    console.log(err)
})

三、async/await 

async/await 是 ES8（ECMAScript 2017）引入的新语法，用来简化 Promise 异步操作。在

async/await 出现之前，开发者只能通过链式 .then() 的方式处理 Promise 异步操作。 

async/await 的基本使用 

import thenFs from 'then-fs'
async function getFile() {
    const r1 = await thenFs.readFile('./1.txt', 'utf8')
    console.log(r1) //111
    const r2 = await thenFs.readFile('./2.txt', 'utf8')
    console.log(r2) //222
    const r3 = await thenFs.readFile('./3.txt', 'utf8')
    console.log(r3) //333
}
getFile()

async/await 的使用注意事项

如果在 function 中使用了 await，则 function 必须被 async 修饰

在 async 方法中，第一个 await 之前的代码会同步执行，await 之后的代码会异步执行 

示例：

import thenFs from 'then-fs'
 
console.log('a')
async function getFile() {
    console.log('b')
    const r1 = await thenFs.readFile('./1.txt', 'utf8')
    console.log(r1)
    const r2 = await thenFs.readFile('./2.txt', 'utf8')
    console.log(r2)
    const r3 = await thenFs.readFile('./3.txt', 'utf8')
    console.log(r3)
    console.log('c')
}
getFile()
console.log('d')
// 打印的结果是：a b d 111 222 333 c

 四、EventLoop

1. JavaScript 是单线程的语言 

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

2. 同步任务和异步任务 

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

同步任务（synchronous）

又叫做非耗时任务，指的是在主线程上排队执行的那些任务

只有前一个任务执行完毕，才能执行后一个任务

异步任务（asynchronous）

又叫做耗时任务，异步任务由 JavaScript 委托给宿主环境进行执行

当异步任务执行完成后，会通知 JavaScript 主线程执行异步任务的回调函数 

3. 同步任务和异步任务的执行过程 

4. EventLoop 的基本概念 

 JavaScript 主线程从“任务队列”中读取异步任务的回调函数，放到执行栈中依次执行。这个过程是

循环不断的，所以整个的这种运行机制又称为 EventLoop（事件循环）。 

五、宏任务和微任务 

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

2. 宏任务和微任务的执行顺序 

4. 分析以下代码输出的顺序