es6 export和export default的区别

export 命名导出

export：导出的变量名和import{ xxx}导入的变量名必须相同，所以export不能导出匿名函数

可以直接导出

export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

也可以export{xxx,xxx}一起导出

// module "my-module.js"
function cube(x) {
  return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube,foo };

导入的时候需要用{ }

import { cube, foo } from 'my-module.js';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

export导出的变量名和import{ xxx}导入的变量名必须相同，那么想改名字怎么办

导入的时候，可以将名字改了

import { cube as cube1, foo as foo1 } from 'my-module.js';

还有一种别名导入方式，不需要加{}

import * as xxxName from 'my-module.js';、
使用的时候用 xxxName.cube1,  xxxName.foo

 

默认导出：默认导出可以导出匿名函数，import接受时候随便用什么变量名都行，但是只能默认导出一次

// module "my-module1.js"
export default function cube(x) {
  return x * x * x;
}

// module "my-module2.js"
export default function(x) {
  return x * x * x;
}

导入的时候，导入的时候不需要用{}

import cube from 'my-module';
console.log(cube(3)); // 27​​​​​

 

ES6中表达export default const是无效的

export default const decreaseAction={type:'decrease'}// 报错了

export default decreaseAction
default是一种特殊的系统变量，export default的含义是把此命令后面的变量赋值给default这个特殊的系统变量，并把它导出到其他模块中使用。如此一来，export default const...或者export default var...等语句就是非常明显的错误了。

正确的写法就是把如文中开头代码中错误的表达修改如下：

const decreaseAction={type:'decrease'}
export default decreaseAction

 又或者有的人这么写，虽然不会报错，但是没有把对象导出，而是导出一个undefined

export default Topic = {
    //xxxcode
}

还是上面的原因，这里Topic并没有用const或者let声声明，语法没没错，但是Topic自身没有赋到值，还是undefined的时候，就赋值了default输出了，后面不会执行，所以导出的undefined. 正确的写法，还是换行写。

const Topic = {
    //xxxcode
}

export default Topic