es6中export和export default区别

2019年03月10日Web前端

用了这么就的export和import,看多了export和export default,总结下这两者的区别。

一、两者区别

  • export不能直接导出除了对象外的其他数据(function可以,但是得非匿名函数)。

    // ok
    export function aa() {
    console.log(111);
    };
    // ok
    let aaa = 123;
    export {
    aaa
    };
    // error
    export '123';
  • export可以多次导出,但是export default只能导出一个。

    export function getA() {
    // ...
    };
    export function getB() {
    // ...
    };
  • 导入export方式的需要用{},并且变量名称必须要一致,而导入export default方式的不需要,并且可以随便重命名。

    export function getA() {
    // ...
    };

    对应于

    import { getA } from ...

export default function() { console.log(11); };

对应于
```js
import getA from...
  • 使用export 方式导出时,导入时可以import * as name from..这种方式

如果想给方法加个顶层的全局变量的话,可以这么使用。

import * as name from ....;
name.getA();
name.getB();

二、总结

其实两者最大的区别是在于import的时候,也就是前面第三点。

其中第三点是基于第四点的,第三点行的通还是依赖了es6的另外一个解构的特性:

import * as name from ....;
let { getA, getB } = name;

所以看个人喜好,使用了。