ES6之Promise、Class类与模块化(Modules)

目录

  • Promise
  • Class类
    • extends
    • super
  • Modules 模块系统
    • export default 和对应import
    • export 和 import

Promise

  • Promise 是 ES6 引入的一种用于处理异步操作的对象。
    它解决了传统回调函数(callback)模式中容易出现的回调地狱和代码可读性差的问题。

  • Promise 对象有三种状态:

    1. Pending(进行中): 初始化状态,表示异步操作还在进行中。
    2. Fulfilled(已成功): 表示异步操作执行成功,并且返回了一个值。
    3. Rejected(已失败): 表示异步操作执行失败,抛出一个错误或异常。
  • Promise 对象具有以下特点:

    1. Promise 构造函数接收一个执行器函数(executor),该函数具有两个参数:resolve reject
      • 通过调用resolve 函数,将 Promise 对象从进行中状态变为已成功状态;
      • 通过调用 reject 函数,将 Promise 对象从进行中状态变为已失败状态。
    2. then() 方法用于指定异步操作成功后的回调函数,并且可以链式调用多个 then() 方法。每个then() 方法都返回一个新的Promise 对象。
    3. catch() 方法用于指定异步操作失败时的回调函数,也可以链式调用多个 catch() 方法,本质是then的特例。catch() 方法也返回一个新的Promise 对象。
    4. finally() 方法用于指定无论异步操作成功或失败,最终都需要执行的回调函数。finally() 方法也会返回一个新的Promise 对象。
    5. Promise.resolve();Promise.reject();方法;在这里插入图片描述
      • Promise.resolve();参数

        • 参数是Promise实例对象时,直接返回这个Promise对象
        • 参数是具有then方法的对象时,会立即执行它的then方法
        • 参数是其他值时,相当于通过resolve函数传参
      • Promise.reject();参数

        • 不管什么参数,都会原封不动地向后传递,作为后续方法的参数
        const thenable =then(resolve,reject){resolve('success');// reject('reason');
        ;
        Promise.resolve(thenable).then(data => console.log(data),err => console.log(err)
        );
        
    6. Promise.all() 方法接受一个 Promise 数组作为参数(只要是可以遍历的都可以作为参数,下同),返回一个新的 Promise 对象。只有当所有的Promise对象都成功时,才会返回一个成功的结果数组;只要有一个 Promise 对象失败,就会返回一个失败的结果。
    7. Promise.race() 方法接受一个Promise 数组作为参数,返回一个新的 Promise 对象。只要数组中的一个Promise 对象完成(无论成功或失败),就会返回该Promise 对象第一个完成的结果。
    8. Promise.allsettled()方法,数组中的任意一个 Promise 对象完成(无论成功或失败),就会返回该Promise 对象对应的结果。
  • 示例:

    // 创建一个异步操作,2秒后返回结果
    const fetchData = () => {return new Promise((resolve, reject) => {setTimeout(() => {const data = "Hello, Promise!";resolve(data);}, 2000);});
    };// 调用异步操作,并在操作成功后执行回调函数
    fetchData().then((data) => {console.log(data); // 输出: "Hello, Promise!"}).catch((error) => {console.error(error);}).finally(() => {console.log("Promise operation finished.");});
    

Class类

在JavaScript中,类(Class)是一种用于创建对象的蓝图。类是一种构造函数的语法糖,它提供了一种更简洁、直观的方式来定义对象和其行为。

通过使用类,可以创建多个具有相同属性和方法的对象,并且可以方便地复用和扩展代码。

以下是使用class关键字定义类的示例:

class Person {constructor(name, age) { //constructor是一个特殊的方法,用于在创建对象时初始化对象的属性this.name = name;this.age = age;}sayHello() {console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);}
}

要创建Person类的对象,使用new关键字:

const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);person1.sayHello(); // 输出:Hello, my name is Alice and I'm 25 years old.
person2.sayHello(); // 输出:Hello, my name is Bob and I'm 30 years old.

extends

通过使用extends关键字,我们可以创建一个继承自另一个类的子类:

class Student extends Person {constructor(name, age, grade) {super(name, age); // auper()调用父类的构造函数this.grade = grade;}study() {console.log(`${this.name} is studying in grade ${this.grade}.`);}
}const student = new Student('Carol', 18, '12th');
student.sayHello(); // 输出:Hello, my name is Carol and I'm 18 years old.
student.study(); // 输出:Carol is studying in grade 12th.

super

super 有两种用法:

  1. 在子类的构造函数中,用于调用父类的构造函数。通过 super() 可以在子类的构造函数中调用父类的构造函数,并传递需要的参数。

  2. 在子类中,用于调用父类的方法。通过 super.methodName() 的形式来调用父类中的方法。

示例:

class Animal {constructor(name) {this.name = name;}getName() {return this.name;}speak() {console.log(`${this.name} makes a sound`);}
}class Dog extends Animal {constructor(name, breed) {super(name); // 调用父类的构造函数this.breed = breed;}getBreed() {return this.breed;}speak() {super.speak(); // 调用父类的speak方法console.log(`${this.name} barks`);}
}const dog = new Dog('Buddy', 'Labrador Retriever');
console.log(dog.getName()); // 输出: Buddy
console.log(dog.getBreed()); // 输出: Labrador Retriever
dog.speak(); // 输出: Buddy makes a sound \n Buddy barks

注意:

  • 调用父类方法时,super 必须在子类的构造函数或方法内部使用。
  • 静态方法中的 ​super​ 用于调用父类的静态方法,而不是实例方法。只能通过类名来调用静态方法,例如 ​super.staticMethod()​。
  • super代表父类的原型对象
  • 通过super调用父类的方法时,方法的this指向当前的子类实例

Modules 模块系统

在 JavaScript 中,模块(Module)是将一段代码封装成可重用和独立的单元。模块提供了一种组织和管理代码的方式,使代码更易于理解、维护和扩展。

在早期版本的 JavaScript 中,并没有内置的模块系统,但现代的 JavaScript 引擎(如Node.js和浏览器中的ES6模块)已经支持对模块的原生语法和功能。以下是关于模块的一些常见特性:

  1. 导出(Export):模块中的代码可以通过导出机制暴露给其他模块使用。通过使用 export 关键字,我们可以将变量、函数、类等从一个模块中导出。

  2. 导入(Import):模块可以导入来自其他模块的代码。通过使用 import 关键字,我们可以引入其他模块导出的内容,并在当前模块中使用。

  3. 默认导出(Default Export):一个模块可以有一个默认导出,即默认导出一个值(变量、函数、类等)。默认导出不需要使用花括号,而是直接通过 export default 导出,并且可以在导入时使用任意名称

  4. 命名导出(Named Export):除了默认导出,模块还可以使用命名导出。通过给导出的值命名并使用 export 关键字进行导出,其他模块可以通过在导入时使用相应的名称进行引用。

  5. 导入和导出的语法:模块的导入和导出可以有不同的语法形式,具体取决于使用的 JavaScript 平台和环境。在 Node.js 环境中,使用 requiremodule.exportsexports 进行导入和导出;在现代浏览器中,使用 ES6 模块语法,即 importexport 关键字。

示例:

// filename: math.js
export function add(a, b) {return a + b;
}export function subtract(a, b) {return a - b;
}// filename: main.js
import { add, subtract } from './math.js';console.log(add(5, 3)); // 输出: 8
console.log(subtract(10, 4)); // 输出: 6

export default 和对应import

在 JavaScript 的模块系统中,除了可以使用 export 关键字来导出具名的变量、函数或类以外,还可以使用 export default 关键字来导出一个默认值。导出默认值时,可以在导入时使用任意名称。

用法:

  1. 导出默认值:

    • 在导出模块中,可以使用 export default 导出一个默认值,一个模块仅能有一个默认导出
      // 在导出模块中
      export default "Hello!";  // 导出字符串默认值
      export default {        // 导出对象默认值name: "John",age: 25
      };
      export default function sayHello() {  // 导出函数默认值console.log("Hello!");
      }
      
  2. 导入默认值:

    • 在导入模块中,可以使用任意名称导入默认值。不同于具名导入需要使用花括号 {},默认导入直接将值引入到变量中。
      // 在导入模块中
      import myDefault from "./exportDefaultModule.js";
      console.log(myDefault);  // 输出: "Hello!" 或{ name: "John", age: 25 } 或 函数输出// 如果导出的是一个对象,则可以直接访问其属性
      import myDefault from "./exportDefaultModule.js";
      console.log(myDefault.name);  // 输出: "John"
      

注意: 导入默认值时不需要使用花括号 {}。而且,在一个模块中,通过 export default 导出的默认值不能直接和其他具名导出一起使用。

// 在导出模块中
const myVar = "Hello!";
export default myVar;        // 正确export default function() {  // 正确console.log("Goodbye!");
}// 错误示例
export const name = "John";
export default myVar;      // 错误!不能同时具名导出和默认导出
// 在导入模块中
import myDefault, { name } from "./exportDefaultModule.js";   // 错误!不能同时导入默认值和具名导出的变量import myDefault from "./exportDefaultModule.js";            // 正确

export 和 import

在 JavaScript 的模块系统中,export 用于将模块的内容导出,import 用于导入其他模块的内容。下面是关于 exportimport 的各种用法:

  1. 基本用法:

    • 导出单个变量、函数或类:

      // 在导出模块中
      export const name = "John";
      export function sayHello() {console.log("Hello!");
      }
      export class Person {constructor(name) {this.name = name;}
      }
      
    • 导入并使用导出的变量、函数或类:

      // 在导入模块中
      import { name, sayHello, Person } from "./exportModule.js";
      console.log(name); // 输出: "John"
      sayHello(); // 输出: "Hello!"
      const person = new Person("Alice");
      console.log(person.name); // 输出: "Alice"
      
  2. 多个导出:

    • 可以在一个 export 语句中同时导出多个内容:

      export { name, sayHello };
      
    • 在导入时,可以使用相同的语法导入多个内容:

      import { name, sayHello } from "./exportModule.js";
      
  3. 导出导入时起别名:

    • 可以使用 as 关键字为导出和导入的内容设置别名:
      // 在导出模块中
      export { name as myName };// 在导入模块中
      import { myName as name } from "./exportModule.js";
      console.log(name); // 输出: "John"
      
  4. 整体导入:

    • 通过使用 * 关键字,可以将一个模块的所有导出内容作为单个对象进行导入:
      // 在导入模块中
      import * as myModule from "./exportModule.js";
      console.log(myModule.name); // 输出: "John"
      myModule.sayHello(); // 输出: "Hello!"
      
  5. 同时导入:

    • 当导入模块的内容较多时,可以使用 import 关键字一次性导入多个内容,并将它们作为别名的属性:
      // 在导入模块中
      import { name, sayHello, Person } from "./exportModule.js";
      

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/20482.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL binLog问题

看到数据库目录下有很多OFF.*文件的时候很诧异,这玩意是啥,binlog不应该都是*bin-log.*​的文件吗?* [roottest ~]# cd /data/mysql_data [roottest mysql_data]# ls ansible hap_attach_yl hap_func_yl hap_msg_yl h…

ThreadPoolExecutor详解(上)

为什么会有线程池? 如果客户端发一个请求,服务端就创建一个线程接收请求,线程资源是有限的,而且创建一个线程和执行结束之后都要调用操作系统资源销毁线程,这样频繁操作肯定非常占用cpu和内存资源,线程池的…

改进粒子群算法优化BP神经网络---回归+分类两种案例

今天采用改进的粒子群算法(LPSO)优化算法优化BP神经网络。本文选用的LPSO算法是之前作者写过的一篇文章:基于改进莱维飞行和混沌映射(10种混沌映射随意切换)的粒子群优化算法,附matlab代码 文章一次性讲解两种案例,回归…

shiro快速入门

文章目录 权限管理什么是权限管理?什么是身份认证?什么是授权? 什么是shiro?shiro的核心架构shiro中的三个核心组件 shiro中的认证shiro中的授权shiro使用默认Ehcache实现缓存shiro使用redis作为缓存实现 权限管理 什么是权限管理…

truncate和delete的区别

两者都可以删除表中的数据,但是本质上是有区别的,两者使用方法如下: --删除表中所有数据 DELETE FROM table_name; --删除表中部分符合条件的数据 DELETE FROM table_name WHERE 【】;--删除表中所有数据 TRUNACTE TABLE table_name;1、SQL语…

华为OD机考--【磁盘容量排序】

■ 题目描述 【磁盘容量排序】 磁盘的容量单位常用的有M,G,T这三个等级,它们之间的换算关系为1T = 1024G,1G = 1024M,现在给定n块磁盘的容量, 请对它们按从小到大的顺序进行稳定排序,例如给定5块盘的容量,1T,20M,3G,10G6T,3M12G9M排序后的结果为20M,3G,3M12G9…

MySQL 数据库、表的基本操作

目录 数据库 关系数据库SQL 关系数据库常用词汇 常用命令语句 数据库操作 查看数据库 创建数据库 修改数据库编码 删除数据库 数据表操作 查看数据表 创建数据表 表中数据操作 增 删 改 查 数据库 数据库是在数据管理和程序开发过程中,一种非常重要…

Express中间件

1.创建最基本的中间件 const express require(express); const send require(send);const app express()const mw function (req, res, next) {console.log(middleware);// 一定要调用next() 把流转关系交给下一个中间件或路由next() }app.listen(80, () > {console.l…

SpringBoot —程序包org.springframework.boot.test.context不存在

一. 遇到问题 &#xff1a;程序包org.springframework.boot.test.context不存在 发生错误的原因是项目中缺少spring-boot-starter-test依赖导致的&#xff0c;解决方案如下: 在项目根目录的pom.xm文件中的<dependencies>节点下增加以下依赖即可&#xff1a; <depen…

【ARM 常见汇编指令学习 7 - LDR 指令与LDR伪指令及 mov指令】

文章目录 LDR 指令LDR伪指令LDR伪指令与MOV区别 上篇文章&#xff1a;ARM 常见汇编指令学习 6 - bic(位清除), orr(位或), eor(异或) 下篇文章&#xff1a;ARM 常见汇编指令学习 8 - dsb sy 指令及 dsb 参数介绍 LDR指令 与 LDR伪指令 两者虽然名字相同但是作用却不相同&#x…

uniApp 插件 Fvv-UniSerialPort 使用实例

接上一篇 uniApp 对接安卓平板刷卡器, 读取串口数据 , 本文将详细介绍如何使用插件读取到串口数据 原理 通过uniApp 插件读取设备串口数据, 解析后供业务使用; 步骤 创建uniApp 项目;添加插件 安卓串口通信 Fvv-UniSerialPort 安卓串口通信 Fvv-UniSerialPort - DCloud 插件…

PoseiSwap:通过 RWA 的全新叙事,反哺 Nautilus Chain 生态

PoseiSwap 是 Nautilus Chain 上的首个 DEX&#xff0c;作为目前行业内模块化区块链叙事的早期奉行者&#xff0c;PoseiSwap 也得到了较高的市场关注。基于 Nautilus Chain&#xff0c;PoseiSwap 打造了一个全新的 Rollup 应用层&#xff0c;并通过零知识证明来建立全新的订单簿…

刷完这个笔记,15K真的不能再少了....

大家好&#xff0c;最近有不少小伙伴在后台留言&#xff0c;得准备面试了&#xff0c;又不知道从何下手&#xff01;为了帮大家节约时间&#xff0c;特意准备了一份面试相关的资料&#xff0c;内容非常的全面&#xff0c;真的可以好好补一补&#xff0c;希望大家在都能拿到理想…

SQL-每日一题【1174. 即时食物配送 II】

题目 配送表: Delivery 如果顾客期望的配送日期和下单日期相同&#xff0c;则该订单称为 「即时订单」&#xff0c;否则称为「计划订单」。 「首次订单」是顾客最早创建的订单。我们保证一个顾客只会有一个「首次订单」。 写一条 SQL 查询语句获取即时订单在所有用户的首次订…

解决Vue3 使用Element-Plus导航刷新active高亮消失

解决Vue3 使用Element-Plus导航刷新后active高亮消失的问题 启用路由模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。 接下来打印一下选中项index和index路径&#xff0c; 刷新也是没有任何问题的&#xff0c;active不会消失…

资产盘点流程及注意事项

公司在引进固定资产管理的同时&#xff0c;也广泛加快了信息化工作的进程。现代计算机技术、条码技术、条码技术等都不能满足传统的固资管理机制&#xff0c;RFID技术、硬件扫描技术、提高固定资产管理流程、固定资产管理和统计等方面的特殊要求。科学规范地管控企业有形资产的…

Java超级玛丽小游戏制作过程讲解 第一天 创建窗口

package com.sxt;import javax.swing.*; import java.awt.event.KeyEvent; import java.awt.event.KeyListener;public class MyFrame extends JFrame implements KeyListener {//设置窗口的大小为800*600public MyFrame() {this.setSize(800, 600);//设置窗口中显示this.setLo…

机器学习的关键词和算法总结

随着全球各行业的数据治理、数字化转型智能化辅助的引入发展&#xff0c;机器学习&#xff08;包括深度学习&#xff09;在逐步深入到各行各业&#xff0c;所以&#xff0c;有必要对机器学习的常见术语&#xff0c;经典算法及应用场景进行一次总结&#xff0c;其实机器学习兴起…

深度学习各层负责什么内容?

1、深度学习——神经网络简介 深度学习(Deep Learning)(也称为深度结构学习【Deep Structured Learning】、层次学习【Hierarchical Learning】或者是深度机器学习【Deep Machine Learning】)是一类算法集合&#xff0c;是机器学习的一个分支。 深度学习方法近年来&#xff0c…

8.3day04git+数据结构

文章目录 git版本控制学习高性能的单机管理主机的心跳服务算法题 git版本控制学习 一个免费开源&#xff0c;分布式的代码版本控制系统&#xff0c;帮助开发团队维护代码 作用&#xff1a;记录代码内容&#xff0c;切换代码版本&#xff0c;多人开发时高效合并代码内容 安装g…