Promise
-
Promise
是 ES6 引入的一种用于处理异步操作的对象。
它解决了传统回调函数(callback)模式中容易出现的回调地狱和代码可读性差的问题。 -
Promise
对象有三种状态:- Pending(进行中): 初始化状态,表示异步操作还在进行中。
- Fulfilled(已成功): 表示异步操作执行成功,并且返回了一个值。
- Rejected(已失败): 表示异步操作执行失败,抛出一个错误或异常。
-
Promise
对象具有以下特点:-
Promise
构造函数接收一个执行器函数(executor),该函数具有两个参数:resolve
和reject
。- 通过调用
resolve
函数,将Promise
对象从进行中状态变为已成功状态; - 通过调用
reject
函数,将Promise
对象从进行中状态变为已失败状态。
- 通过调用
-
then()
方法用于指定异步操作成功后的回调函数,并且可以链式调用多个then()
方法。每个then()
方法都返回一个新的Promise
对象。 -
catch()
方法用于指定异步操作失败时的回调函数,也可以链式调用多个catch()
方法,本质是then
的特例。catch()
方法也返回一个新的Promise
对象。 -
finally()
方法用于指定无论异步操作成功或失败,最终都需要执行的回调函数。finally()
方法也会返回一个新的Promise
对象。 -
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) );
-
-
Promise.all()
方法接受一个Promise
数组作为参数(只要是可以遍历的都可以作为参数,下同),返回一个新的Promise
对象。只有当所有的Promise
对象都成功时,才会返回一个成功的结果数组;只要有一个Promise
对象失败,就会返回一个失败的结果。 -
Promise.race()
方法接受一个Promise
数组作为参数,返回一个新的Promise
对象。只要数组中的一个Promise
对象完成(无论成功或失败),就会返回该Promise
对象第一个完成的结果。 -
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
有两种用法:
-
在子类的构造函数中,用于调用父类的构造函数。通过
super()
可以在子类的构造函数中调用父类的构造函数,并传递需要的参数。 -
在子类中,用于调用父类的方法。通过
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模块)已经支持对模块的原生语法和功能。以下是关于模块的一些常见特性:
-
导出(Export):模块中的代码可以通过导出机制暴露给其他模块使用。通过使用
export
关键字,我们可以将变量、函数、类等从一个模块中导出。 -
导入(Import):模块可以导入来自其他模块的代码。通过使用
import
关键字,我们可以引入其他模块导出的内容,并在当前模块中使用。 -
默认导出(Default Export):一个模块可以有一个默认导出,即默认导出一个值(变量、函数、类等)。默认导出不需要使用花括号,而是直接通过
export default
导出,并且可以在导入时使用任意名称。 -
命名导出(Named Export):除了默认导出,模块还可以使用命名导出。通过给导出的值命名并使用
export
关键字进行导出,其他模块可以通过在导入时使用相应的名称进行引用。 -
导入和导出的语法:模块的导入和导出可以有不同的语法形式,具体取决于使用的 JavaScript 平台和环境。在 Node.js 环境中,使用
require
和module.exports
或exports
进行导入和导出;在现代浏览器中,使用 ES6 模块语法,即import
和export
关键字。
示例:
// 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
关键字来导出一个默认值。导出默认值时,可以在导入时使用任意名称。
用法:
-
导出默认值:
- 在导出模块中,可以使用
export default
导出一个默认值,一个模块仅能有一个默认导出。// 在导出模块中 export default "Hello!"; // 导出字符串默认值 export default { // 导出对象默认值 name: "John", age: 25 }; export default function sayHello() { // 导出函数默认值 console.log("Hello!"); }
- 在导出模块中,可以使用
-
导入默认值:
- 在导入模块中,可以使用任意名称导入默认值。不同于具名导入需要使用花括号
{}
,默认导入直接将值引入到变量中。// 在导入模块中 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
用于导入其他模块的内容。下面是关于 export
和 import
的各种用法:
-
基本用法:
-
导出单个变量、函数或类:
// 在导出模块中 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"
-
-
多个导出:
-
可以在一个
export
语句中同时导出多个内容:export { name, sayHello };
-
在导入时,可以使用相同的语法导入多个内容:
import { name, sayHello } from "./exportModule.js";
-
-
导出导入时起别名:
- 可以使用
as
关键字为导出和导入的内容设置别名:// 在导出模块中 export { name as myName }; // 在导入模块中 import { myName as name } from "./exportModule.js"; console.log(name); // 输出: "John"
- 可以使用
-
整体导入:文章来源:https://www.toymoban.com/news/detail-685916.html
- 通过使用
*
关键字,可以将一个模块的所有导出内容作为单个对象进行导入:// 在导入模块中 import * as myModule from "./exportModule.js"; console.log(myModule.name); // 输出: "John" myModule.sayHello(); // 输出: "Hello!"
- 通过使用
-
同时导入:文章来源地址https://www.toymoban.com/news/detail-685916.html
- 当导入模块的内容较多时,可以使用
import
关键字一次性导入多个内容,并将它们作为别名的属性:// 在导入模块中 import { name, sayHello, Person } from "./exportModule.js";
- 当导入模块的内容较多时,可以使用
到了这里,关于ES6之Promise、Class类与模块化(Modules)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!