web学习笔记（四十二）

点击全文阅读

目录

1.ECMAScript 新特性-async 和await

1.1async函数

1.2await函数

1.3补充：

2. ES6模块化 

2.1模块化的优点

2.2 ES6 模块化语法

2.3 ES6 模块暴露

2.4ES6 模块导入

---

1.ECMAScript 新特性-async 和await

1.1async函数

async函数可以单数使用，但一般我们会将async函数和await函数结合使用，可以让异步代码像同步代码一样运行，也可以用来解决回调地狱的问题。async函数的返回值为promise对象。promise对象的结果由async函数执行的返回值决定

        const show = async function () {            //返回值是一个promise对象             console.log('hhh');            // 如果返回值是非promise或undefined，表示成功，返回值是成功的值            // return 'lll';            // 返回值是promise对象时            return Promise.resolve('ok')            // return Promise.reject('no')        }        var a = show();        console.log(a);

1.2await函数

 await必须写在async函数中，但是async函数中可以没有await await右侧的表达式一般为promise对象,但也可以是其它值

   //1.创建promise对象        const p = new Promise((resolve, reject) => {            resolve('成功'); //用户数据        });        //await 要放在async函数中        async function main() {            let result = await p;            //成功的结果            console.log(result);        }        //调用函数        main()

 如果表达式是Promise 对象，await返回的是Promise成功的值 如果表达式是其它值，直接将此值作为await的返回值 如果await的promise失败了，就会抛出异常，需要通过 try...catch捕获处理

    //1.创建promise对象        const p = new Promise((resolve, reject) => {            // resolve('成功的值');//用户数据            reject('失败啦')        });        //await 要放在async函数中        async function main() {            try {                let result = await p;                //成功的结果                console.log(result);            } catch (i) {                console.log(i);            }        }        //调用函数        main()

1.3补充：

js是单线程的，在执行时会分为同步任务和异步任务，异步任务又分为宏任务（setTimeout,setInterval） 和微任务（promise,await），微任务优先于宏任务执行。async通常与await搭配使用，await必须在asyc函数中使用，当async函数中遇到await关键字时，程序 会等待await关键字后面所有的异步代码执行完毕后才会继续执行，注意：await后面通常会跟一个promise 异步任务 当promise状态改变才会执行后面代码 定义函数为异步函数,使用关键字async定义的函数，会自动 返回一个成功状态的promise对象 当前函数的返回值则为promise对象成功状态的返回值

2. ES6模块化 

模块化就是讲一个大的程序文件，拆分成许多小的文件，然后讲小文件组合起来。

2.1模块化的优点

防止命名冲突代码复用----相当封装一个函数，暴露一个接口高维护性----- 可以让多个人分别更改不同模块，互不影响

2.2 ES6 模块化语法

模块功能主要由两个命令构成：export 和 import。

export 命令 就是导出，用于规定模块的对外接口，会对外暴露接口。import 命令 就是导入，用于输入其他模块提供的功能。

2.3 ES6 模块暴露

（1）分别暴露：就是在需要暴露的变量或函数名前加上 export关键字。

             export let a=10;            export function show(){                console.log('分别暴露');            }

（2）统一暴露：在export{ }内部写入需要暴露的变量名或函数名，中间用逗号隔开。

// 统一暴露let a = 100;let fn = function () {    console.log('统一导出');}const obj = {    name: 'aaa',    age: 18}let arr = [10, 20, 30]export {    a,    fn,    obj,    arr}

（3）默认暴露：export default { }在花括号内可以写入任意数据类型的数据，但大部分都是对象。

// 默认暴露 defaultlet c = 1000;let show = function () {    console.log('默认暴露222');}export default {    // 可以是数字、字符串，但大部分是对象    a: 800,    b: [11, 22, 33, 44],    fn: function () {        console.log('默认暴露');    },    c,    show}

2.4ES6 模块导入

（1） 通用方法导入： import 变量名 from '路径' （变量名中存的是对象）

  import * as m1 from './1.js'

 在解构时如果发生变量名重复的情况则需要使用as别名来解决问题。此时使用变量名或者需要调用函数直接用别名进行操作就可以了。

  import {  a, fn as fn1, obj, arr as arr1} from './2.js';     console.log(arr1);     fn1();

在使用默认暴露时就不能使用上面的通用方法导入了，默认暴露有专门的简便的导入形式。

import m3 from './3.js'

（2）解构方法来导入

 import {  a, fn , obj, arr } from './2.js';

如果默认暴露想要以解析的方式进行导入操作的话必须要使用别名，因为default相当于一个关键字。所以得使用别名。

 import{default as m4}from './3.js';    console.log(m4);

导入不存在的变量，程序不会抛出异常，只是值为undefined。 

除了对象类型以外，导出的属性对外都是只读的

点击全文阅读