JS中用export {a, b, c}批量导出命名绑定,避免重复export;支持as重命名;可与export default共存;配合export * from实现模块聚合导出。

JS 中用 export 配合解构简化模块导出,核心是避免重复写 export 关键字,同时让导出结构更清晰、可读性更强。关键不在于“先解构再导出”,而是在导出时直接使用对象解构语法(即命名导出的简写形式)。
用 export { a, b, c } 代替多个 export
当一个模块要导出多个变量、函数或类时,不用每行写一次 export,而是统一用大括号批量导出:
// utils.js
const add = (x, y) => x + y;
const sub = (x, y) => x - y;
const PI = 3.14159;
<p>// ✅ 推荐:一行导出多个命名绑定
export { add, sub, PI };</p><p>// ❌ 不推荐:冗余重复
// export const add = ...;
// export const sub = ...;
// export const PI = ...;
导出时重命名:as 关键字很实用
如果想导出时改名(比如避免命名冲突、提升语义),在大括号内用 as:
// mathHelpers.js
export { add as sum, sub as difference, PI as pi };
// 使用方可以 import { sum, difference } from './mathHelpers.js';
default + 命名导出可共存,但解构只用于命名导出
export default 是单独的,不能放进 {};解构式导出只适用于命名导出。两者可以一起用:
// calculator.js
export default function calc(x, y) {
return x * y;
}
<p>export const add = (x, y) => x + y;
export const mul = (x, y) => x * y;</p><p>// ✅ 简化为:
// export default function calc(x, y) { ... }
// export { add, mul };
配合 export * 实现模块聚合(“巴掌式导出”)
在入口文件中汇总多个子模块的命名导出,用 export * from,再配合解构式导出做筛选或重命名:
// index.js —— 统一出口
export * from './utils.js'; // 导出全部命名导出
export { sum as add } from './math.js'; // 只导出并重命名某一个
export { default as main } from './app.js'; // 导出 default 并重命名


















