JS模块导出导入笔记 —— 默认导出 具名导出

一、默认导出和具名导出

1. 默认导出

• 一个模块只能有一个默认导出
• 用 export default 导出
• 导入时不用花括号，名字可自定义

// 导出
export default function add(a, b) {return a + b;
}// 导入
import add from './math.js';

2.具名导出

• 模块可以导出多个变量/函数
• 用 export（不带 default）导出
• 导入时必须用花括号，名字要一致

// 导出
export function add(a, b) { return a + b; }
export function mul(a, b) { return a * b; }// 导入
import { add, mul } from './math.js';

3. 同时存在默认导出和具名导出

// 导出
export default function sub(a, b) { return a - b; }
export function add(a, b) { return a + b; }// 导入
import sub, { add } from './math.js';

4.常见错误

// 默认导出文件
export default AbilityRadarChart;// 错误导入写法（会报错）
import { AbilityRadarChart } from './AbilityRadarChart';// 正确导入写法
import AbilityRadarChart from './AbilityRadarChart';