import和export是ES6引入的模块化语法，用于封装复用代码；export支持命名导出（多个、需原名导入）和默认导出（一个、可自定义名），import需对应语法且路径须带扩展名。
JavaScript模块化开发中，import 和 export 是 ES6（ES2015）引入的核心语法，用于实现代码的封装、复用与依赖管理。它们让每个文件可以明确声明自己提供什么（export），又使用什么（import），从而替代了过去全局变量或立即执行函数（IIFE）等松散组织方式。
export：导出模块内容
一个模块可通过 export 对外暴露变量、函数、类或默认值。有命名导出和默认导出两种主要形式：
- 命名导出（Named Export）：可导出多个，必须用原名导入（或重命名）。支持在声明时直接导出，也支持统一导出。
✅ 示例：
立即学习“Java免费学习笔记（深入）”；
// math.js
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export class Calculator { /* ... */ }
<p>// 或统一导出
// const sub = (a, b) => a - b;
// export { PI, add, sub };- 默认导出（Default Export）：每个模块最多一个，默认导出不强制命名，导入时可自定义名称，更灵活。
✅ 示例：
立即学习“Java免费学习笔记（深入）”；
// utils.js
export default function debounce(fn, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}import：导入其他模块内容
import 必须写在模块顶层（不能在条件或函数内），语法需与导出方式对应：
- 导入命名导出：用大括号
{}，名称必须与导出一致（可使用as重命名）。 - 导入默认导出：不加花括号，可任意命名。
- 同时导入默认 + 命名：写成
import 默认名, { 命名1, 命名2 } from '模块路径'。 - 只执行模块而不导入任何值（如加载 polyfill）：
import 'module-path';。
✅ 示例：
立即学习“Java免费学习笔记（深入）”；
// app.js
import { PI, add } from './math.js';
import calc from './utils.js'; // 导入默认导出
import debounce, { throttle } from './helpers.js'; // 默认 + 命名
import { PI as MathPI } from './math.js'; // 重命名
import './polyfill.js'; // 仅执行模块路径与后缀注意事项
ES 模块规范要求 import 路径必须是相对路径（./ 或 ../）或绝对 URL，不能省略扩展名（如 .js），除非运行环境（如某些打包工具或 Node.js 的实验性支持）做了自动解析。
- ✅ 正确：
import { foo } from './utils.js'; - ❌ 错误（在原生环境）：
import { foo } from './utils';（缺少扩展名） - ✅ 支持裸模块名（如
lodash）需依赖打包工具（Webpack/Vite）或 Node.js 的imports字段配置。
常见组合与实用建议
- 一个模块优先使用默认导出暴露主要功能（如 React 组件、工具函数），辅以命名导出提供辅助方法。
- 避免混合使用默认导出和过多命名导出，保持接口清晰；若导出项较多，考虑拆分成子模块。
- 注意循环依赖：A 导入 B，B 又导入 A —— 模块会得到未完全执行的对象（
undefined风险），应通过重构或延迟导入（import()动态导入）规避。 - 动态导入
import('./module.js')返回 Promise，适合按需加载、条件加载或顶级await场景（需模块类型为type="module"）。
