JavaScript 导出类

  1. JavaScript 中 export 语句的类型
  2. JavaScript 中 Default 导出的示例
  3. JavaScript 中 Named 导出的示例
JavaScript 导出类

JavaScript 导出/导入语句适用于 JavaScript 模块的内容在另一个模块中重用的情况。

可以有许多方法来执行任务,从单个模块到模块的细节传输以及从子模块到父模块的聚合。

JavaScript 中 export 语句的类型

JavaScript 中的 export/import 语句有两种类型。一种是命名导出,另一种是默认导出。

通常,在 Default 类别中导出时,我们不使用花括号来包装基元或对象。但是在 Named 导出的情况下,我们使用花括号来包装多个对象或原语。

Default 仅处理从模块导出的一项,而 Named 可以取零或多于一。

我们将需要一个文件或模块来跟进示例。我们将它们命名为 test.jsNew.js

但是为了与 ES6 兼容,我们需要将模块重命名为 test.mjsNew.mjs。有多种方法可以执行此转换,但这很容易。

在这里,我们将看到一个具有 Default 类别的实例和另一个具有 Named 类别的实例。让我们跳到下一节。

JavaScript 中 Default 导出的示例

在此示例中,我们将在 test.mjs 中启动一个类 User,我们将导出该类。User 类只有最喜欢的水果的名称。

接下来,在声明类的构造函数之后,让我们进入 New.mjs 模块并导入该类。我们还将通过设置一些值来触发导出的模块工作。

让我们检查一下这个例子。

// test.mjs
export default class User {
  constructor(fruit) {
    this.fruit = fruit;
  }
}
// New.mjs
import User from './test.mjs';
var x = new User('Mango');
console.log(x);

输出:

默认导出示例

JavaScript 中 Named 导出的示例

我们将为此实例采用一个带有虚拟数学的函数和一个变量。因此,我们将在要导出的每个数据之前声明 export 语句。

稍后,在我们的父模块 New.mjs 中,我们将根据选择导入和修改值。此线程中提供了正式的声明性解释

代码片段:

// test.mjs
export function square(x) {
  return x * x;
}
export var y = Math.PI * 5;
// New.mjs
import {square, y} from './test.mjs';
var x = 2;
console.log(square(x));
console.log(y);

输出:

命名导出示例

Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe
Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

相关文章 - JavaScript Class