ES6 export & export default 用法与区别详解

ES6 中，我们使用 `export` 和 `export default` 来导出模块中的变量、函数、类等。虽然这两个都能导出模块中的成员，但它们之间有一些关键区别。让我们仔细了解一下它们的不同之处。

1. 导出数量

• export: 可以多次使用，即一个模块中可以有多个 export 语句。
• export default: 只允许使用一次，即一个模块中只能有一个 export default 语句。

2. 导出方式

• export: 导出一个或多个变量、函数、类等，并指定它们的名称。
• export default: 导出一个变量、函数或类作为模块的默认导出，不需要指定名称。

3. 导入方式

• export: 使用大括号 {} 来导入，并指定要导入的成员名称。
• export default: 不需要大括号 {}，直接使用名称来导入。

4. 使用场景

• export: 用于导出模块中的多个成员，当需要导出多个成员时，应使用 export。
• export default: 用于导出模块中的一个默认成员，当需要导出一个默认成员时，应使用 export default。

实例

// 使用 export 导出多个成员
export const name = 'John';
export function sayHello() {
  console.log('Hello!');
}

// 使用 export default 导出一个默认成员
export default class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

// 导入多个成员
import { name, sayHello } from './module.js';

// 导入默认成员
import Person from './module.js';

const person = new Person('John');
person.greet();

结论

export 和 export default 是 ES6 中用于导出模块成员的两个重要关键字。它们之间的主要区别在于导出数量、导出方式、导入方式和使用场景。在使用时，应根据具体需求选择合适的关键字。