良许Linux教程网 干货合集 详解es6 export和export default的区别

详解es6 export和export default的区别

ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能,本篇文章重点为大家讲解一下es6 export和export default的区别

img

相同点

  1. exportexport default 均可用于导出常量、函数、文件、模块
  2. 可在其它文件或模块中通过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;1.2.3.4.5.6.7.8.9.
 //使用模块的index.js
 import e1, {e2, e3, e4} from "./model";
 console.log(e1);
 console.log(e2);
 console.log(e3);
 console.log(e4);1.2.3.4.5.6.
 #index.js运行结果
 export 1
 export 2
 export 3
 export 41.2.3.4.5.

如果在 model.js 再添加一个 export default

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

二、模块中通过 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';1.2.3.4.5.6.7.
 //index.js
 import e1, {e2}from "./model";
 console.log(e1);
 console.log(e2);1.2.3.4.
 #index.js执行结果  
 export 1
 export 2 modified1.2.3.

首先需要了解到:

ES6中模块通过 exportexport 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);1.2.3.4.5.6.7.8.9.
 //index.js
 import e1, {e2}from "./model";
 console.log(e1);
 console.log(e2);
 setTimeout(()=>{
     console.log('later',e2)
 },5000);1.2.3.4.5.6.7.
 //index.js执行结果
 export 1
 export 2
 later export 2 modified1.2.3.4.

但是,export 是绑定到标识符,改变标志符的值,然后访问这个绑定,得到的是新值; export default 绑定的是标志符指向的值,如果修改标志符指向另一个值,这个绑定的值不会发生变化。 如果想修改默认导出的值,可以使用 export {e1 as default} 这种方法。

  //model.js修改
 export {e1 as default}1.2.
 #index.js执行结果
 export 1 modified
 export 2
 later export 2 modified1.2.3.4.

三、export defaultexport 语法差异。

export var e1='...' 是合法语句,但是 export default var e2='...' 是不合法的(letconst 也一样)。

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

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

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

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

137e00002230ad9f26e78-265x300
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部
x
x