JavaScript 中的 import 与 export 详解

import 和 export 是 ES6 模块化的核心语法，用来把代码拆分成独立的文件（模块），实现代码复用、隔离作用域、避免变量冲突，是现代前端开发（Vue/React/Node.js）的标准用法。

一、核心概念

1. export：导出，把一个文件中的变量、函数、类等暴露出去，让其他文件能使用
2. import：导入，在其他文件中引入被导出的内容
3. 每个 JS 文件默认都是独立模块，内部变量/函数不会污染全局作用域

---

二、两种导出/导入方式

ES6 模块化有两种核心用法：命名导出/导入、默认导出/导入，可以混合使用。

1. 命名导出与命名导入（常用）

一个文件可以导出多个内容，导入时必须用相同的名称接收。

导出（export）

// 导出变量
export const name = "小明";
export const age = 18;

// 导出函数
export function sayHello() {
  console.log("你好！");
}

// 导出类
export class Person {
  constructor() {
    this.type = "人类";
  }
}

导入（import）

// 按需导入，名称必须和导出时一致
import { name, age, sayHello, Person } from "./模块文件路径.js";

// 使用导入的内容
console.log(name, age); // 小明 18
sayHello(); // 你好！
const p = new Person();

进阶用法

• 导入时重命名（解决命名冲突）：

  import { name as userName, sayHello as greet } from "./模块文件.js";

• 一次性导入所有导出内容：

  import * as userModule from "./模块文件.js";
  // 使用：userModule.name、userModule.sayHello()

---

2. 默认导出与默认导入

一个文件只能有一个默认导出，导入时可以自定义名称，无需加 {}。

导出（export default）

// 导出函数
export default function () {
  console.log("我是默认导出");
}

// 导出变量/类（也可以）
// const obj = {a:1};
// export default obj;

导入（import）

// 自定义名称，任意取名都可以
import myFunc from "./模块文件路径.js";

// 使用
myFunc(); // 我是默认导出

---

3. 混合使用（最常用场景）

同一个文件同时用默认导出 + 命名导出：

// 模块文件
export const version = "1.0"; // 命名导出
export default function apiRequest() {} // 默认导出

导入：

import request, { version } from "./api.js";

---

三、关键注意事项

1. 路径必须正确

   • 相对路径：./utils.js（同级）、../utils.js（上级）
   • 不能省略 .js 后缀（浏览器原生环境必须加，打包工具可省略）

2. 作用域隔离 未导出的内容，其他文件无法访问：

   // 模块内私有变量，外部导入不到
   const privateVar = "私有内容";

3. 语法限制

   • import 和 export 必须写在代码最顶层，不能放在函数/if判断中
   • 这是静态语法，代码运行前就会解析

4. 环境要求

   • 浏览器中使用：<script type="module" src="xxx.js"></script>
   • Node.js 中使用：package.json 中添加 "type": "module"

---

四、快速对比总结

特性	命名导出/导入	默认导出/导入
数量	一个文件多个	一个文件仅一个
语法	export 变量 import{}	export default import 名
名称	导入名称必须和导出一致	导入可自定义名称
适用场景	导出多个工具函数/变量	导出主功能（组件、接口请求）

总结

1. 命名导出：导出多个内容，导入用 {}，名称必须匹配
2. 默认导出：导出一个核心内容，导入自定义名称，无 {}
3. 现代开发中混合使用最常见，是 Vue/React/Node.js 模块化的基础