默认导出和普通导出区别

在 ES6 模块中，有两种导出方式：默认导出（default export）和普通导出（named export）。

默认导出和普通导出的区别主要在于语法和使用方式上：

1. 默认导出只能导出一个值，而普通导出可以导出多个值。

2. 默认导出在导入时不需要使用花括号 {} 包裹变量名，而普通导出需要使用花括号 {} 包裹变量名。

下面分别介绍默认导出和普通导出的使用方式：

默认导出

使用 export default 语法进行默认导出。默认导出的变量名可以是任意的，而不需要与导出的变量名一致。

示例代码：

// export-default.js
const name = 'John';
export default name;

使用 import 语法进行默认导入。导入时可以使用任意变量名，而不需要与导出的变量名一致。

示例代码：

// import-default.js
import myName from './export-default.js';
console.log(myName); // 输出：John

普通导出

使用 export 语法进行普通导出。导出的变量名必须与导入时使用的变量名一致。

示例代码：

// export-named.js
export const name = 'John';
export const age = 25;

使用 import 语法进行普通导入。导入时必须使用与导出时相同的变量名。

示例代码：

// import-named.js
import { name, age } from './export-named.js';
console.log(name, age); // 输出：John 25

以上是默认导出和普通导出的基本使用方式。需要注意的是，在同一个模块中，不能同时使用默认导出和普通导出。