ES6的export命令

ES6 的 export 命令详解

在 ES6（ECMAScript 2015）中，模块化是一个非常重要的概念。它允许开发者将代码拆分成更小、更可管理的片段，并且可以轻松地在这些片段之间共享功能。export 命令是 ES6 模块系统的一个关键部分，用于将模块中的变量、函数、类等导出，以便在其他模块中使用。以下是对 ES6 中 export 命令的详细解析。

一、基本用法

1. 导出变量：
   可以直接导出变量，常量，函数，类等。

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

    

    

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

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

    

    

3. 默认导出：
   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
​

 

 

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

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