ES6的export命令

2024 年 07 月 26 日

71 次浏览

3178字数

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;
  }
}

导出列表：
可以在文件末尾统一导出多个变量。

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 };

默认导出：
export default 用于指定模块的默认导出。每个模块只能有一个默认导出。
```
// file: math.js
export default function (x) {
  return x * x;
}
```
使用默认导出时，导入模块时可以使用任意名称来引用该模块的默认导出：
```
// file: main.js
import square from './math.js';
console.log(square(4)); // 16
```

二、命名导出和默认导出的结合使用

在一个模块中，可以同时使用命名导出和默认导出：

// file: math.js
export const pi = 3.14159;
export function add(a, b) {
  return a + b;
}

export default function (x) {
  return x * x;
}

导入时可以分别导入默认导出和命名导出：

// 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

三、重命名导出

使用 as 关键字可以重命名导出内容：

// file: math.js
const pi = 3.14159;
const square = (x) => x * x;

export { pi as PI, square as sq };

导入时对应的重命名：

// file: main.js
import { PI, sq } from './math.js';
console.log(PI); // 3.14159
console.log(sq(4)); // 16

四、导出全部内容

可以使用 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;
}

此时 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

五、导出和导入的注意事项

导出声明的位置：
导出可以出现在模块的任何地方，但通常放在文件的开头或结尾。
模块的严格模式：
ES6 模块在代码中隐式使用严格模式。
循环依赖：
避免模块间的循环依赖，这会导致不可预期的问题。

思维导图

graph TD;
    A[ES6 export 命令] --> B[基本用法]
    A --> C[命名导出和默认导出的结合使用]
    A --> D[重命名导出]
    A --> E[导出全部内容]
    A --> F[注意事项]

    B --> B1[导出变量]
    B --> B2[导出列表]
    B --> B3[默认导出]

    F --> F1[导出声明的位置]
    F --> F2[模块的严格模式]
    F --> F3[循环依赖]