揭秘ES6的export和export default：新世界的大门已经打开！

2023-09-27 14:47:09

在现代JavaScript开发中，模块化编程已经成为一种必不可少的实践，而ES6的export和export default指令更是模块化编程的利器。它们为我们提供了将代码组织成可重用模块的简洁方式，从而提高代码的可维护性和可扩展性。

揭秘export

export指令用于将变量、函数或类从一个模块导出，以便其他模块可以导入和使用它们。它的基本语法格式如下：

export { variable, function, class };

例如，在一个名为"utilities.js"的模块中，我们可以导出一个名为"add"的函数和一个名为"PI"的常量：

export function add(a, b) {
  return a + b;
}

export const PI = 3.14;

然后，在另一个名为"main.js"的模块中，我们可以导入"utilities.js"模块，并使用导出的函数和常量：

import { add, PI } from "./utilities.js";

const result = add(1, 2);
console.log(`The result is: ${result}`);

console.log(`The value of PI is: ${PI}`);

在上面的例子中，我们使用了import语句来导入"utilities.js"模块，并使用大括号{}来指定要导入的变量和函数。

揭秘export default

export default指令用于将一个变量、函数或类作为默认导出，这意味着它可以被其他模块导入而无需指定导入的名称。它的基本语法格式如下：

export default variableOrFunctionOrClass;

例如，在一个名为"Counter.js"的模块中，我们可以将一个名为"Counter"的类作为默认导出：

export default class Counter {
  constructor(initialValue) {
    this.value = initialValue;
  }

  increment() {
    this.value++;
  }

  decrement() {
    this.value--;
  }

  getValue() {
    return this.value;
  }
}

然后，在另一个名为"main.js"的模块中，我们可以导入"Counter.js"模块，并使用导出的类：

import Counter from "./Counter.js";

const counter = new Counter(10);

counter.increment();
counter.increment();
counter.decrement();

console.log(`The current value of the counter is: ${counter.getValue()}`);