【前端】默认导出和命名导出区别

知兀2026-05-11 9:59

默认导出

写法：

export default 内容

javascript 复制代码

// math.js
const add = (a, b) => a + b
export default add   // 导出的是值，没有名字

可以任意取名

没有名字的联想

javascript 复制代码

// app.js
import myAdd from './math'     // 可以叫 myAdd
import addFunction from './math'  // 可以叫 addFunction  
import abc from './math'       // 可以叫 abc

// 输入 my 不会有任何联想，因为名字是你自己起的

命名导出

写法：

export const 名字 = 内容

javascript 复制代码

// math.js
export const add = (a, b) => a + b   // 导出有名字的变量
export const subtract = (a, b) => a - b

必须用原名字，可以在编写时会有联想

javascript 复制代码

// app.js
import { add, subtract } from './math'  // 必须用原名字

// 输入 su 会自动联想成 subtract
// 输入 ad 会自动联想成 add