JavaScript ES6中export、import与export default的用法和区别


Posted in Javascript onMarch 14, 2017

前言

相信很多人都使用过export、export default、import,然而它们到底有什么区别呢? 在看他们之间的区别之前,我们先来看看它们的用法。

ES6 import和export的用法

ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。同时还有CMD规范,为同步加载方案如seaJS。

ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。

ES6模块主要有两个功能:export和import

  • export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口
  • import用于在一个模块中加载另一个含有export接口的模块。

也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。如下(假设a和b文件在同一目录下)

// a.js

var sex="boy";
var echo=function(value){
console.log(value)
}
export {sex,echo} 
//通过向大括号中添加sex,echo变量并且export输出,就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到
//不能写成export sex这样的方式,如果这样就相当于export "boy",外部文件就获取不到该文件的内部变量sex的值,因为没有对外输出变量接口,只是输出的字符串。
// b.js
通过import获取a.js文件的内部变量,{}括号内的变量来自于a.js文件export出的变量标识符。
import {sex,echo} from "./a.js" 
console.log(sex) // boy
echo(sex) // boy

a.js文件也可以按如下export语法写,但不如上边直观,不太推荐。

// a.js
export var sex="boy";
export var echo=function(value){
console.log(value)
}

//因为function echo(){}等价于 var echo=function(){}所以也可以写成
export function echo(value){

 console.log(value)
}

以上是export与module的基本用法,再进行拓展学习

前面的例子可以看出,b.js使用import命令的时候,用户需要知道a.js所暴露出的变量标识符,否则无法加载。可以使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名。

//a.js
var sex="boy";
export default sex(sex不能加大括号)
//原本直接export sex外部是无法识别的,加上default就可以了.但是一个文件内最多只能有一个export default。
其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default,自然default只能有一个值,所以一个文件内不能有多个export default。
// b.js
本质上,a.js文件的export default输出一个叫做default的变量,然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名,且不需要用大括号包含
import any from "./a.js"
import any12 from "./a.js" 
console.log(any,any12) // boy,boy

ES6中export、import与export default区别

在JavaScript ES6中,export与export default均可用于导出常量、函数、文件、模块等,你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用,但在一个文件或模块中,export、import可以有多个,export default仅有一个。

具体使用:

1、

//demo1.js
export const str = 'hello world'

export function f(a){
 return a+1
}

对应的导入方式:

//demo2.js
import { str, f } from 'demo1' //也可以分开写两次,导入的时候带花括号

2、

//demo1.js
export default const str = 'hello world'

对应的导入方式:

//demo2.js
import str from 'demo1' //导入的时候没有花括号

总结

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
用JS实现一个页面多个css样式实现
May 29 Javascript
JavaScript OOP类与继承
Nov 15 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
Ionic快速安装教程
Jun 03 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
使用eslint和githooks统一前端风格的技巧
Jul 29 Javascript
JS代码编译器Monaco使用方法
Jun 11 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 #Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 #Javascript
vuejs响应用户事件(如点击事件)
Mar 14 #Javascript
微信小程序 在线支付功能的实现
Mar 14 #Javascript
JS和canvas实现俄罗斯方块
Mar 14 #Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 #Javascript
canvas实现刮刮卡效果
Mar 14 #Javascript
You might like
php数组总结篇(一)
2008/09/30 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
javascript 函数参数限制说明
2010/11/19 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
从零学Python之入门(二)基本数据类型
2014/05/25 Python
Python三级目录展示的实现方法
2016/09/28 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
解读python logging模块的使用方法
2018/04/17 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
小学毕业感言50字
2014/02/16 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
绿色小区申报材料
2014/08/22 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
2015年党总支工作总结
2015/05/25 职场文书
太空授课观后感
2015/06/17 职场文书
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL