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

这篇具有很好参考价值的文章主要介绍了ES6之Promise、Class类与模块化(Modules)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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();方法;ES6之Promise、Class类与模块化(Modules),前端,es6,javascript,前端,Promise,Class,Modules
      • 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. 同时导入:文章来源地址https://www.toymoban.com/news/detail-685916.html

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

到了这里,关于ES6之Promise、Class类与模块化(Modules)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript:模块化【CommonJS与ES6】

    在 JavaScript 编程中,随着项目的复杂性增加,代码的组织和管理变得至关重要。模块化是一种强大的编程概念,它允许我们将代码划分为独立的模块,提高了可维护性和可扩展性。本文将详细介绍 CommonJS 和 ES6 模块,帮助你理解它们的特点和用法。 1. CommonJS 模块化 CommonJS 是

    2024年02月13日
    浏览(54)
  • ES6模块化(默认导入导出、按需导入导出、直接导入)

    一、介绍ES6模块化     ES6 模块化规范是浏览器端与服务器端通用的模块化规范,ES6模块化的出现前端开发者不再需要额外的学习其他的模块化规范。  二、ES6 模块化规范中定义: 1.每个 js 文件都是一个独立的模块 2.导入其它模块成员使用 import 3.向外共享模块成员使

    2024年02月09日
    浏览(54)
  • CSS Modules - CSS模块化

    参考文章: CSS Modules 用法教程-阮一峰 css module css模块化及CSS Modules使用详解 CSS 模块化的解决方案有很多,但主要有两类: 一类是 彻底抛弃 CSS,使用 JS 或 JSON 来写样式 。Radium,jsxstyle,react-style 属于这一类。 优点是能给 CSS 提供 JS 同样强大的模块化能力; 缺点是不能利用

    2024年02月05日
    浏览(44)
  • 前端框架的CSS模块化(CSS Modules)

    创作纪念日之际,来给大家分享一篇文章吧 聚沙成塔·每天进步一点点 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些

    2024年03月27日
    浏览(48)
  • vue - vuex详细讲解和modules模块化的使用

    vuex 简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 通俗的来说,vuex是用于当某一状态需要在多个组件中共享,方便我们使用并追踪这些状态时使用。 1,vuex的

    2024年02月06日
    浏览(43)
  • 【前端模块化】JS模块化思想以及相关规范(CommonJS、ES module)

    1.模块化概念 随着前端应用日趋复杂,项目代码也大量膨胀,模块化就是一种最主流的代码组织方式, 一个模块就是一个实现特定功能的文件 ,它通过把我们的复杂代码按照功能的不同,划分为不同的模块单独维护的这种方式,去提高我们的开发效率,降低维护成本。要用

    2024年02月01日
    浏览(63)
  • TS编译器选项——指定编译ES版本和模块化使用规范

    compilerOptions是TS的编译器选项,主要在tsconfig.json文件中用于对ts编译为js文件时进行配置 \\\"compilerOptions\\\" : { 配置项 } 版本可以为如下版本:\\\'es3\\\', \\\'es5\\\', \\\'es6\\\', \\\'es2015\\\', \\\'es2016\\\', \\\'es2017\\\', \\\'es2018\\\', \\\'es2019\\\', \\\'es2020\\\', \\\'es2021\\\', \\\'es2022\\\', \\\'esnext\\\'. 版本可以为如下版本:\\\'none\\\', \\\'commonjs\\\', \\\'amd\\\', \\\'system\\\', \\\'u

    2024年02月04日
    浏览(54)
  • Node.js开发、CommondJS 、ES-Module模块化设计

    目录  Node.js是什么 基础使用 Node的REPL 全局变量  模块化设计 CommondJS规范  基础使用exports和module.exports require  CommondJS优缺点 AMD和CMD规范 ES_Module  基本使用方法 导出 导入  结合使用 默认导出 ES Module解析流程  Node与浏览器的对比  在浏览器中,HTML与CSS交给Blink处理,如果其

    2023年04月21日
    浏览(44)
  • ES6 全详解 let 、 const 、解构赋值、剩余运算符、函数默认参数、扩展运算符、箭头函数、新增方法,promise、Set、class等等

    ​ ECMAScript 6.0,简称 ES6,是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言 要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaSc

    2024年04月15日
    浏览(46)
  • 什么是模块化?为什么要进行模块化开发?

    模块化是一种软件开发的设计模式,它将一个大型的软件系统划分成多个独立的模块,每个模块都有自己的功能和接口,并且能够与其他模块独立地工作。  先来一段八股文 模块化开发可以带来以下好处: 提高代码的复用性:模块化可以将代码划分成可重用的部分,降低代

    2023年04月12日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包