export和export default的区别

在ES6模块系统中，export和export default都用于导出模块中的内容，但它们在使用方式和行为上有一些区别。

export:

• export用于导出模块中的变量、函数、类等，可以导出多个。
• 使用export导出的每个标识符都需要使用花括号{}在导入时明确指定。
• 导入时必须使用与导出时相同的名称。
• 可以导出命名导出（named exports），这意味着可以导出多个命名项。

示例：

// 导出变量
export const name = 'John';
export const age = 30;

// 导出函数
export function sayHello() {
  console.log('Hello!');
}

// 导出类
export class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

导入时：

import { name, age, sayHello, Person } from './myModule.js';

export default:

• export default用于导出模块中的默认值，每个模块只能有一个默认导出。
• 使用export default导出的内容在导入时不需要使用花括号{}，并且可以自定义导入时的名称。
• 默认导出通常用于导出模块的主要功能或入口点。

示例：

// 默认导出函数
export default function() {
  console.log('This is the default export.');
}

// 默认导出类
export default class {
  constructor() {
    console.log('This is a default class export.');
  }
}

导入时：

import myFunction from './myModule.js';
import MyClass from './myModule.js';

总结:

• export用于导出多个命名项，导入时需要使用花括号并指定名称。
• export default用于导出单个默认项，导入时不需要花括号，可以自定义名称。

在实际使用中，可以根据需要选择使用export还是export default。如果模块中有多个功能需要导出，可以使用export；如果模块主要提供一个功能或类，可以使用export default。同时，一个模块中可以同时使用export和export default。