es6 export和export default的区别

2022-08-03 14:00:32 阅读：147 来源： 互联网

相同点

export 与 export default 均可用于导出常量、函数、文件、模块
可在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用

不同点

一、在一个文件或模块中，export、import 可以有多个，export default 仅有一个

  //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

二、模块中通过 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

首先需要了解到：

ES6中模块通过 export 和 export default 暴露出来的属性或者方式并不是普通的赋值或者引用，它们是对模块内部定义的标志符类似指针的绑定。
对于一个导出的属性或者方法，在什么地方导出不重要，在什么时候导入也不重要，重要的是:访问这这个绑定的时候的当前值。

  //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

三、export default 与 export 语法差异。

export var e1='...' 是合法语句，但是 export default var e2='...' 是不合法的（let 和 const 也一样）。

export default 可以直接添加标识符导出，例如 export default e2;

export 如果要导出已经声明的表示符,必须使用 {},例如 export {e1},注意：这里 {} 不是声明一个对象。

模块导出的属性或者方法只能在模块内部修改，不能在导入模块的地方修改。

https://blog.csdn.net/ZYC88888/article/details/82501791
https://juejin.cn/post/6844903585805762573

标签：es6,default,js,export,let,e1,e2
来源： https://www.cnblogs.com/niuben/p/16546803.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

es6 export和export default的区别

相同点

不同点