es6中export和export default区别

2019年03月10日Web前端0

用了这么就的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);
};

对应于

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;

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

ES6

目录