ES6 export && export default 差別總結

1. export default 在一個模塊裏只能有一個，可是export能夠有多個

//model.js
    let e1='export 1';
    let e2='export 2';
    let e3='export 3';
    let e4='export 4';
    export {e2};
    export {e3};
    export {e4};
    export default e1;
複製代碼

//使用模塊的index.js
    import e1, {e2, e3, e4} from "./model";
    console.log(e1);
    console.log(e2);
    console.log(e3);
    console.log(e4);
複製代碼

#index.js運行結果
    export 1
    export 2
    export 3
    export 4
複製代碼

若是在model.js再添加一個export default

//model.js
    let e5='export e5';
    export default  e5
複製代碼

#運行結果
    SyntaxError: .../model.js: 
    Only one default export allowed per module. (10:0)
   9 | let e5='export e5';
> 10 | export default e5

複製代碼

2.模塊中經過export 導出的(屬性或者方法)能夠修改，可是經過export default導出的不能夠修改

//model.js
    let e1='export 1';
    let e2='export 2';
    export {e2};
    export default e1;
    e1='export 1 modified';
    e2='export 2 modified';
複製代碼

//index.js
    import e1, {e2}from "./model";
    console.log(e1);
    console.log(e2);
複製代碼

#index.js執行結果  
    export 1
    export 2 modified
複製代碼

首先須要瞭解到：

1. ES6中模塊經過export和export default暴露出來的屬性或者方式並非普通的賦值或者引用，它們是對模塊內部定義的標誌符相似指針的綁定。
2. 對於一個導出的屬性或者方法，在什麼地方導出不重要，在何時導入也不重要，重要的是:訪問這這個綁定的時候的當前值。

   //model.js
       let e1='export 1';
       let e2='export 2';
       export {e2};
       export default e1;
       e1='export 1 modified';
       setTimeout(()=>{
           e2='export 2 modified';
       },1000);
   複製代碼

   //index.js
       import e1, {e2}from "./model";
       console.log(e1);
       console.log(e2);
       setTimeout(()=>{
           console.log('later',e2)
       },5000);
   複製代碼

   //index.js執行結果
       export 1
       export 2
       later export 2 modified
   複製代碼

可是，export是綁定到標識符，改變標誌符的值，而後訪問這個綁定，獲得的是新值；export default綁定的是標誌符指向的值，若是修改標誌符指向另外一個值，這個綁定的值不會發生變化。 若是想修改默認導出的值，能夠使用export {e1 as default}這種方法。

//model.js修改
    export {e1 as default}
複製代碼

#index.js執行結果
    export 1 modified
    export 2
    later export 2 modified
複製代碼

3. export default與export語法差別。

1. export var e1='...' 是合法語句，可是export default var e2='...'是不合法的（let和const也同樣）。
2. export default能夠直接添加標識符導出，例如export default e2;export若是要導出已經聲明的表示符,必須使用{},例如export {e1},注意：這裏{}不是聲明一個對象。

最後：模塊導出的屬性或者方法只能在模塊內部修改，不能在導入模塊的地方修改。