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