前言
在前端开发过程中，实现模块化使用是前端三大重要思想之一，也是前端开发者必须要精通的点，而且在前端求职面试中也是必考知识点。在ES6中，引入了模块化理念，设计思想就是在编译时候就能确定模块的依赖关系，以及输入和输出的变量，其中就包含导出和导入两个模块。那么本篇博文就来分享一下关于导出的时候export 和 export default的区别，关于导入相关的内容会在另外的文章中介绍，这里只介绍导出相关的内容，记录一下，方便查阅使用。
export
1、基本用法
模块通过export导出各种类型的变量，如字符串，数值，函数，类。基本用法如下所示：
导出的函数声明与类声明必须要有名称（export default 另外考虑）。
不仅能导出声明还能导出引用（如函数）。
export 命令可以出现在模块的任何位置，但必需处于模块的顶层。
注意：在使用export导出的时候，建议使用大括号指定所要输出的一组变量在文档结尾部分，明确导出的接口；函数和类都要有对应的名称，导出文档尾部会避免无对应的名称的情况。
2、as用法
使用export命令导出接口名称的时候，需要与模块内部的变量有一一对应的关系；导入的变量名称也需要和导出的接口名称一致，但是顺序可以不用一致。
不同模块导出接口名称重复的时候，需要使用as重新定义变量名，相当于做一个“等价转换”的操作。
3、复合使用
在实际使用中，export 与 import 可以在同一模块同时复合使用，复合使用的特点如下所示：
可以将导出的接口改名，包括 default。
复合使用 export 与 import 的时候，也可以导出全部，当前模块导出的接口会覆盖继承导出的接口。
4、使用示例
示例一：
/*-----export [dome.js]-----*/
let name = "Jack";
let age =30;
let fun = function(){ return "My name is" name "! I'm '" age "years old." }
let mClass = class mClass { static aaa = "Hello!"; }
export { name, age, fun, mClass }示例二：
/*-----export [demo1.js]-----*/
let name = "Jack";
export { name as exportName }
/*-----export [demo2.js]-----*/
let name2 = "Jack";
export { name2 }
/*-----export [demo3.js]-----*/
let name3 = "Jack";
export { name3 }示例三：
export { foo, bar } from "methods"; // 大约等同于约下面两段语句，不过上面导入导出方式的该模块没有导入 foo 与 bar
import { foo, bar } from "methods";
export { foo, bar };
export { foo as bar } from "methods"; // 普通情况下的改名
export { foo as default } from "methods"; // 把 foo 转导成 default
export { default as foo } from "methods"; // 把 default 转导成 foo
export * from "methods"; // *号类型
export default
1、基本用法
在一个文件或模块中，export default仅有一个导出，基本用法如下所示：
- export default 中的 default 是对应的导出接口变量。
- 模块在通过export default 在做导出的时候，使用导入时则不需要加{ }。
- 在使用export default 向外暴露的成员的时候，可以使用任意变量来接收。
2、使用示例
var a = "My name is Jack!";
export default a; // 仅有一个导出
export default var c = "error"; // error，default 已经是对应的导出变量，不能跟着变量声明语句
import b from "./xxx.js"; // 不需要加{}， 使用任意变量接收
区别
1、相同部分
1⃣️export 和 export default都是通过import导入的；
2⃣️export 和 export default都是用来导出的，如常量、函数、文件、模块等等。
2、不同部分
1⃣️在一个文件或模块中，export的导出可以有多个，但是export default仅有一个导出。也就是输出单个变量使用export default，输出多个变量使用export；
2⃣️模块在通过 export 方式导出的时候，在使用导入时要加{ }，而export default 在做导出的时候，使用导入时则不需要；
3⃣️使用 export default给模块指定默认导出的时候，导入时候只需要拿到文件名字即可；使用 export导出的时候，必须知道导出的函数或者变量等，导入的时候变量名需要和导出时的名字保持一致。
拓展：import导入
1、基本用法
基本用法如下所示：
- 模块通过import导入各种类型的变量，如字符串，数值，函数，类。
- import 命令会提升到整个模块的头部，首先执行。
2、特点
只读属性：不允许在加载模块的脚本里面，改写接口的引用指向，即可以改写 import 变量类型为对象的属性值，但不能改写 import 变量类型为基本类型的值。
单例模式：多次重复执行同一句 import 语句，那么只会执行一次，而不会执行多次。import 同一模块，声明不同接口引用，会声明对应变量，但只执行一次 import 。
静态执行特性：import 是静态执行，所以不能使用表达式和变量。
3、使用示例
示例一：
import {a} from "./aaa.js"
a.foo = "hello"; // a = { foo : 'hello' }示例二：
import { a, b } from "./xxx.js"; //导入多个变量的写法
最后
通过上面介绍的关于前端开发中export 和 export default的区别的相关知识点，在实际开发中，这也是在开发过程中必用的功能，尤其是对于初中级开发者来说，更应该掌握这些情况的使用，更多相关javascript export和export default内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！