详解 ES6 中的模块系统：import 和 export 使用方式

前言

ES6 是 JavaScript 的一个重要版本，其中最引人注目的特性之一就是模块系统。在 ES6 之前，JavaScript 并没有像其他语言一样具备模块化的能力，这使得开发大型应用程序变得非常困难。ES6 的模块系统解决了这个问题，它允许我们将代码分解为小的、可复用的部分，并在项目中使用它们。

本文将详细介绍 ES6 中的模块系统，包括如何使用 import 和 export 语句来导入和导出模块。

模块导出

在 ES6 中，我们可以使用 export 语句将一个模块中的内容导出，使其在其他模块中可用。export 语句可以导出函数、变量、类等。

导出变量

我们可以使用 export 关键字将一个变量导出：

// module.js
export const PI = 3.14;
export let name = "Tom";

导出函数

我们也可以使用 export 关键字导出一个函数：

// module.js
export function add(a, b) {
  return a + b;
}

导出类

我们可以使用 export 关键字导出一个类：

// module.js
export class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

导出默认值

我们还可以使用 export default 语句导出一个模块的默认值。一个模块只能有一个默认导出值。

// module.js
export default function() {
  console.log("Hello World!");
}

模块导入

在 ES6 中，我们可以使用 import 语句导入其他模块中的内容。我们可以使用 import 关键字导入变量、函数、类等。

导入变量

我们可以使用 import 关键字导入一个变量：

// app.js
import { PI, name } from "./module.js";

console.log(PI); // 3.14
console.log(name); // Tom

导入函数

我们可以使用 import 关键字导入一个函数：

// app.js
import { add } from "./module.js";

console.log(add(1, 2)); // 3

导入类

我们可以使用 import 关键字导入一个类：

// app.js
import { Person } from "./module.js";

const person = new Person("Tom", 20);
console.log(person.name); // Tom
console.log(person.age); // 20

导入默认值

我们可以使用 import 关键字导入一个模块的默认值：

// app.js
import sayHello from "./module.js";

sayHello(); // Hello World!

模块重命名

我们可以使用 as 关键字将导入的模块重命名。

// app.js
import { PI as piValue } from "./module.js";

console.log(piValue); // 3.14

总结

ES6 的模块系统是 JavaScript 一个非常重要的特性，它使得我们可以更好地组织代码，使其更易于维护和扩展。在本文中，我们详细介绍了 ES6 中的模块系统，包括如何使用 import 和 export 语句导入和导出模块。希望本文对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c99086add4f0e0ff361239