JavaScript ES6 模块 - JavaScript 编程网

JavaScript 的 import 和 export 语句是ES6（ECMAScript 2015）引入的特性，它们用于实现模块化编程，允许你将代码分割成可重用的组件。下面是一个关于如何使用 import 和 export 的基本教程。

导出（Export）

导出允许你从一个模块中共享指定的函数、对象或变量到其他模块。

导出单个实体

// 命名导出
export const add = (a, b) => a + b;

// 或者
function subtract(a, b) {
  return a - b;
}
export { subtract };

默认导出

每个模块只能有一个默认导出。它通常是模块的主要输出。

export default function multiply(a, b) {
  return a * b;
}

导入（Import）

导入语句用于从其他模块获取导出的实体。

导入命名导出

// 导入单个命名导出
import { add } from './math.js';
console.log(add(2, 3)); // 输出: 5

// 导入多个命名导出
import { add, subtract } from './math.js';
console.log(subtract(5, 7)); // 输出: -2

// 重命名导入的实体
import { add as sum } from './math.js';
console.log(sum(4, 5)); // 输出: 9

导入默认导出

import multiply from './math.js';
console.log(multiply(3, 4)); // 输出: 12

// 也可以与命名导出一起使用
import multiply, { add } from './math.js';

通配符导入

如果你想要从一个模块中导入所有导出的实体，可以使用通配符*，但这样做不鼓励，因为它可能导致命名冲突且不易追踪依赖。

import * as math from './math.js';
console.log(math.add(2, 3)); // 输出: 5

注意事项

文件路径: 导入和导出的路径应该是相对的或绝对的，并且通常基于文件系统结构。
模块解析: Node.js和浏览器在解析模块路径时有所不同，Node.js遵循其特定的规则，而浏览器主要依据<script type="module">标签的src属性。
类型: import和export仅在ES模块（.mjs文件或通过type: "module"声明的脚本）中有效。在传统的CommonJS模块（Node.js中常见的.js文件）中，应继续使用require和module.exports。

掌握import和export是进行现代JavaScript开发的基础，能帮助你编写更清晰、可维护的代码。

声明：本站所有文章和图片，如无特殊说明，均为原创发布，转载请注明出处。