ES6 的 export
命令详解
在 ES6(ECMAScript 2015)中,模块化是一个非常重要的概念。它允许开发者将代码拆分成更小、更可管理的片段,并且可以轻松地在这些片段之间共享功能。export
命令是 ES6 模块系统的一个关键部分,用于将模块中的变量、函数、类等导出,以便在其他模块中使用。以下是对 ES6 中 export
命令的详细解析。
一、基本用法
导出变量:
可以直接导出变量,常量,函数,类等。// file: math.js export const pi = 3.14159; export let square = (x) => x * x; export function add(a, b) { return a + b; } export class Circle { constructor(radius) { this.radius = radius; } area() { return pi * this.radius * this.radius; } }
AI 代码解读导出列表:
可以在文件末尾统一导出多个变量。const pi = 3.14159; const square = (x) => x * x; function add(a, b) { return a + b; } class Circle { constructor(radius) { this.radius = radius; } area() { return pi * this.radius * this.radius; } } export { pi, square, add, Circle };
AI 代码解读默认导出:
export default
用于指定模块的默认导出。每个模块只能有一个默认导出。// file: math.js export default function (x) { return x * x; }
AI 代码解读使用默认导出时,导入模块时可以使用任意名称来引用该模块的默认导出:
// file: main.js import square from './math.js'; console.log(square(4)); // 16
AI 代码解读
二、命名导出和默认导出的结合使用
在一个模块中,可以同时使用命名导出和默认导出:
// file: math.js
export const pi = 3.14159;
export function add(a, b) {
return a + b;
}
export default function (x) {
return x * x;
}
AI 代码解读
导入时可以分别导入默认导出和命名导出:
// file: main.js
import square, { pi, add } from './math.js';
console.log(square(4)); // 16
console.log(pi); // 3.14159
console.log(add(2, 3)); // 5
AI 代码解读
三、重命名导出
使用 as
关键字可以重命名导出内容:
// file: math.js
const pi = 3.14159;
const square = (x) => x * x;
export { pi as PI, square as sq };
AI 代码解读
导入时对应的重命名:
// file: main.js
import { PI, sq } from './math.js';
console.log(PI); // 3.14159
console.log(sq(4)); // 16
AI 代码解读
四、导出全部内容
可以使用 export * from
语法将另一个模块的所有导出重新导出:
// file: constants.js
export const pi = 3.14159;
export const e = 2.71828;
// file: math.js
export * from './constants.js';
export function add(a, b) {
return a + b;
}
AI 代码解读
此时 math.js
中不仅包含了自己的导出,还包含了 constants.js
中的导出:
// file: main.js
import { pi, e, add } from './math.js';
console.log(pi); // 3.14159
console.log(e); // 2.71828
console.log(add(2, 3)); // 5
AI 代码解读
五、导出和导入的注意事项
- 导出声明的位置:
导出可以出现在模块的任何地方,但通常放在文件的开头或结尾。 - 模块的严格模式:
ES6 模块在代码中隐式使用严格模式。 - 循环依赖:
避免模块间的循环依赖,这会导致不可预期的问题。