export default和export 的区别分享

1.export与export default均可用于导出常量、函数、文件、模块等

2.在一个文件或模块中，export、import可以有多个，export default仅有一个

通过export方式导出，在导入时要加{ }，export default则不需要，因为它本身只能有一个

export default的import方式之所以不需要使用大括号包裹。因为对于export default 其输出的本来就只有一个接口，提供的是模块的默认接口，自然不需要使用大括号包裹。

5、 export 可以直接导出或者先定义后导出都可以，export default只能先定义后导出

👉 export

export 可以直接导出或者先定义后导出都可以。

示例：直接导出

export let i = “hello”；

export function myFun(){ };

示例：先定义后导出

let i = “hello";

function myFun(){ };

export { i , myFun }   // 必须加花括号{ }

👉 export default

export default是模块的默认对外接口，只有一个，所以只能出现一次。

export default只能先定义后导出

示例：先定义后导出

function myFun(){ };

export default myFun  // 不要加花括号{ }


// 对应的导入方式：
// two.js
// 1、引入时需要加花括号{ }；
// 2、可以各自分开引入也可以同时引入多个；
// 3、引入的变量不能自定义名字
import { str, log, cale } from './one.js';  // 完整的路径
console.log(str); // blablabla~
console.log(calc(10,15)); // 25
console.log(calc); // [Function: calc]

1. 示例：export default 导出方式

2. // 对应的导入方式：

3. // two.js

4. // 1、引入时不需要加花括号{ }；

5. // 2、引入的变量可以自定义名字

6. import str from './one.js'; // 完整的路径

7. console.log(str); // blablabla~