如何利用export和export default来更好地导出JavaScript模块

在JavaScript ES6中，export 和 export default 都是用于导出常量、函数、文件、模块等的语法。但是，它们之间还是存在一些区别的。

1. 导出方式不同

export 语法用于导出多个变量或函数，而 export default 语法只能用于导出一个变量或函数。

例如：

// 使用 export 语法导出多个变量
export const name = 'John Doe';
export const age = 30;

// 使用 export default 语法导出一个变量
export default function greet() {
  console.log('Hello, world!');
}

2. 导入方式不同

使用 export 语法导出的变量或函数，在导入时需要使用大括号 {}。而使用 export default 语法导出的变量或函数，在导入时可以直接使用变量名或函数名。

例如：

// 导入使用 export 语法导出的变量
import { name, age } from './module.js';

// 导入使用 export default 语法导出的函数
import greet from './module.js';

console.log(name); // John Doe
console.log(age); // 30
greet(); // Hello, world!

3. 使用场景不同

export 语法通常用于导出多个变量或函数，而 export default 语法通常用于导出一个默认的变量或函数。

例如，在导出一个模块的默认函数时，可以使用 export default 语法。这将使该函数成为模块的默认导出，在导入时可以不用大括号 {} 直接使用。

// 导出一个默认函数
export default function greet() {
  console.log('Hello, world!');
}

// 导入默认函数
import greet from './module.js';

greet(); // Hello, world!

4. 总结

特性	export	export default
导出方式	导出多个变量或函数	导出一个变量或函数
导入方式	需要使用大括号 {}	可以直接使用变量名或函数名
使用场景	用于导出多个变量或函数	用于导出一个默认的变量或函数

希望这篇博文能够帮助您更好地理解export和export default的区别和使用场景。