1、导出export与导入import的组合使用
知识点1：导出export
在Javascript ES6中，我们可以通过export关键字从一个模块中导出变量、函数或类，使其能够在其他模块中被引用。例如，在lesson2.js文件中：
export const A = 123; export function test() { console.log('test'); } export class Hello { test() { console.log('Hello class'); } }
知识点2：导入import（确保名称一致）
在另一个文件如index.js中，我们可以使用import关键字来引入之前导出的内容。需要注意的是，导入时的名称必须与导出时的名称完全匹配。例如：
import { A, test, Hello } from './src/lesson2'; console.log(A, test, new Hello());
知识点3：使用通配符*进行批量导入
当需要从一个模块中引入多个对象时，可以使用*符号结合as关键字来创建一个命名空间，从而简化导入过程。例如：
import * as lesson from './src/lesson2'; console.log(lesson.A, lesson.test, new lesson.Hello());
2、使用export default进行默认导出
除了常规的导出方式外，ES6还支持默认导出（export default）。这种方式允许一个模块只有一个默认导出，且在导入时不强制使用大括号。例如，在lesson2.js中设置默认导出：
const A = 123; function test() { console.log('test'); } class Hello { test() { console.log('Hello class'); } } export default { A, test, Hello };
在index.js中导入默认导出的内容：
import Lesson from './src/lesson2'; console.log(Lesson.A, Lesson.test, new Lesson.Hello());
总结：export, import与export default的关系
ES6模块系统的核心在于export和import命令，它们分别用于定义模块的对外接口和加载其他模块的接口。通过这些命令，开发者可以构建更加模块化、可维护的应用程序。其中，export default提供了一种简洁的方式来指定模块的默认输出，增强了代码的灵活性和易用性。
对于export default，值得注意的是，它只能在一个模块中使用一次，并且在导入时无需使用大括号。这使得即使不知道模块内部的具体变量名，也能轻松使用该模块的功能。
更多详情请参阅：ES6模块化深入解析
export与export default的区别
了解了基本的使用方法后，我们再来探讨一下export与export default之间的区别：
- 两者都可以用来导出常量、函数、类等。
- 在导入时，非默认导出需要使用大括号，而默认导出则不需要。
- 一个模块中可以有多个
export，但只能有一个export default。 export default提供了更大的灵活性，因为它允许在导入时自定义变量名。
例如，下面的两种写法是等价的：
// 使用export const name = '张三'; export { name }; // 使用export default const name = '张三'; export default name;
然而，export default后面不能直接跟变量声明语句，正确的做法是在前面先声明变量，再使用export default导出。例如：
// 正确 var a = 1; export default a; // 错误 export default var a = 1;
此外，export default也可以直接导出一个值，如数字、字符串等：
// 正确 export default 42; // 错误 export 42;
通过上述对比，我们可以看出export default在实际开发中的便利性，尤其是在处理单一导出的情况下。
参考资料：ES6模块化实践指南
京公网安备 11010802041100号