ES6模块化：JavaScript中的导入与导出详解
一 概述
ES6（ECMAScript 2015）引入了模块化的导入（import）和导出（export）语法，使得代码的组织和复用更加方便。本文将详细介绍ES6中的各种导入和导出方式，并通提供代码示例。
二 7种常见的导出与导入方式
2.1 命名导出与命名导入
命名导出允许你从一个模块中导出多个变量、函数或类，而命名导入则允许你按需导入这些内容。
导出方式：
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
导入方式：
// main.js
import { add, subtract } from './math.js';
console.log(add(2, 3)); // 输出: 5
console.log(subtract(5, 2)); // 输出: 3
2.2 默认导出与默认导入
默认导出允许从一个模块中导出一个默认的值（可以是任何类型），而默认导入则允许导入这个默认的值。
导出方式
// math.js
const multiply = (a, b) => a * b;
export default multiply;
导入方式
// main.js
import multiply from './math.js';
console.log(multiply(2, 3)); // 输出: 6
2.3 混合使用命名导出和默认导出
可以在同一个模块中同时使用命名导出和默认导出。
导出方式
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
const multiply = (a, b) => a * b;
export default multiply;
导入方式
// main.js
import multiply, { add, subtract } from './math.js';
console.log(add(2, 3)); // 输出: 5
console.log(subtract(5, 2)); // 输出: 3
console.log(multiply(2, 3)); // 输出: 6
2.4 全部导入（Namespace Import）
可以使用* as语法将模块中的所有命名导出作为一个对象导入。
导出方式
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
导入方式
// main.js
import * as math from './math.js';
console.log(math.add(2, 3)); // 输出: 5
console.log(math.subtract(5, 2)); // 输出: 3
2.5 重命名导入
可以在导入时重命名导入的内容，以避免命名冲突。
导出方式
// math.js
export const add = (a, b) => a + b;
导入方式
// main.js
import { add as sum } from './math.js';
console.log(sum(2, 3)); // 输出: 5
2.6 重命名导出
可以在导出时重命名导出的内容。
导出方式
// math.js
const add = (a, b) => a + b;
export { add as sum };
导入方式
// main.js
import { sum } from './math.js';
console.log(sum(2, 3)); // 输出: 5
2.7 动态导入
动态导入允许你在需要时异步加载模块。
导入方式
// main.js
const mathModule = await import('./math.js');
console.log(mathModule.add(2, 3)); // 输出: 5
三 特别说明
在ES6模块系统中，import语句中的花括号 {} 用于指定要导入的命名导出（named exports）。当你使用花括号时，表明JavaScript引擎从模块中导入特定的命名导出。而默认导出（default export）则不需要用花括号来导入，因为一个模块只能有一个默认导出，并且它没有名称限制。
// myModule.js
export default class MyClass {}
export function myFunction() {}
// main.js
import MyClass, { myFunction } from './myModule.js';
MyClass 是默认导出。这意味着你可以给它任何名称，因为它代表的是模块的默认导出。也可以选择不使用这个名称，而是用另一个名称来导入它，例如：
import MyCustomName, { myFunction } from './myModule.js';
这里的 MyCustomName 将会指向 MyClass。
{ myFunction } 使用了花括号，表示这是一个或多个命名导出的导入。你需要确切地知道模块中导出的函数、变量或类的名称，并且必须使用相同的名称来导入它们，除非你使用别名（如上面提到的 as 关键字）。
因此，MyClass 和 { myFunction } 之间的区别在于一个是默认导出，可以直接导入，而另一个是命名导出，需要通过其原始名称（或别名）明确地导入。如果你尝试不使用花括号直接导入命名导出，代码将会报错，因为JavaScript不会知道你要导入哪个具体的命名导出。
总之，花括号用于精确匹配模块中的命名导出，而默认导出则作为一个整体被导入，可以赋予任意名称。