大连甘井子区教育局官网,长沙网站的优化,0317 沧州 技术支持,上海企业建站流程目录 PromiseClass类extendssuper Modules 模块系统export default 和对应importexport 和 import Promise Promise 是 ES6 引入的一种用于处理异步操作的对象。 它解决了传统回调函数#xff08;callback#xff09;模式中容易出现的回调地狱和代码可读性差的问题。 Promis… 目录 PromiseClass类extendssuper Modules 模块系统export default 和对应importexport 和 import 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 Im ${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 Im 25 years old.
person2.sayHello(); // 输出Hello, my name is Bob and Im 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 Im 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)); // 输出: 6export 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整体导入 通过使用 * 关键字可以将一个模块的所有导出内容作为单个对象进行导入// 在导入模块中
import * as myModule from ./exportModule.js;
console.log(myModule.name); // 输出: John
myModule.sayHello(); // 输出: Hello!同时导入 当导入模块的内容较多时可以使用 import 关键字一次性导入多个内容并将它们作为别名的属性// 在导入模块中
import { name, sayHello, Person } from ./exportModule.js;
