数据与函数的进出口：深入理解 export 和 import

export 与 import 的花样魔法

export 和 import 关键词是 JavaScript 模块系统的重要组成部分，它们允许我们像杂货铺一样，将变量、函数和类从一个模块运输出去，在另一个模块里拎进来。

export 魔法棒

把 export 想象成一个小魔法棒，一挥就能让变量、函数或类变得「公开」，就像舞台上的演员一样，它们可以被其他模块看到和使用。

举个例子，如果我们有一个叫做 math.js 的模块，里面有一个 add() 函数，我们可以用 export 把这个函数变公开：

// math.js
export function add(a, b) {
  return a + b;
}

import 魔法门

有了 export，自然少不了与之配合的 import，它就像一个魔法门，可以让我们把公开的变量、函数或类从其他模块里拎进来。

继续上面的例子，如果我们另一个模块叫做 app.js，想用 math.js 模块里的 add() 函数，就可以用 import 将其导入：

// app.js
import { add } from './math.js';

// 现在 add() 函数可以使用了
const result = add(1, 2);
console.log(result); // 输出：3

export 和 import 的花式组合

当然，除了上面介绍的基本用法，export 和 import 还有更多组合，可以满足不同的需求。

批量导出

如果我们想一次性导出多个变量、函数或类，可以使用花括号将它们括起来，比如：

// math.js
export { add, subtract, multiply, divide };

别名导出

有时候，我们需要给导出的变量、函数或类起个别名，可以使用 as ，比如：

// math.js
export { add as sum, subtract as difference };

默认导出

默认导出有点特殊，它只能导出一个值，并且不需要花括号，比如：

// math.js
export default function add(a, b) {
  return a + b;
}

结束语

export 和 import 是 JavaScript 模块系统必备的魔法工具，它们可以帮助我们像乐高积木一样组装出复杂的应用。