ES6模块 | 进出口

在旧版JavaScript中，使用模块是一件困难的事情，它需要使用工具库来实现进口和出口的功能。但是，在ES6中，我们可以使用内置的模块语法来轻松地导入和导出代码块。

导出

我们可以使用export关键字来将一个或多个变量、函数、类或对象暴露给其他文件使用。以下是一个简单的示例：

// module.js
export const name = "ES6 Modules";
export function add(x, y) {
  return x + y;
}

在这个示例中，我们导出了一个常量 name 和一个函数 add。这些变量现在可以在另一个文件中使用。如果我们只想导出一个默认的变量或对象，我们可以使用 export default：

// myModule.js
const myObject = { a: 1, b: 2, c: 3 };
export default myObject;

我们也可以在一个模块中同时使用多个导出，像这样：

// module.js
function sum(x, y) {
  return x + y;
}
function multiply(x, y) {
  return x * y;
}
export { sum, multiply };

这段代码导出了两个函数：sum 和 multiply。

导入

我们可以在另一个文件中使用import关键字来导入模块中的数据。下面是一个使用我们前面章节中的 module.js 的简单示例：

// main.js
import {name, add} from './module.js';

console.log(name); // 输出 "ES6 Modules"
console.log(add(2, 3)); // 输出 5

这个例子中，我们使用了import关键字并从另一个文件中导入变量name和函数add。注意，我们必须指定导入的文件的相对路径。您还可以使用通配符 * 在一次操作中导入多个变量：

import * as myModule from './module.js';

console.log(myModule.name);
console.log(myModule.add(2, 3));

这段代码使用*通配符导入了 module.js 中的所有导出，将它们存储到名为 myModule 的对象中。

如果导出的是一个默认的对象，我们使用import关键字并指定导入的变量名即可：

// myApp.js
import myObject from './myModule.js';

console.log(myObject.a); // 输出 1

注意，这里我们没有使用括号来指定导入的变量，因为默认导出只能有一个。

小结

ES6模块为JavaScript提供了一个更好的方式来管理变量和代码块。它允许开发人员以清晰的方式将代码段封装起来，并使用简单的方式将它们公开给其他文件中的代码。