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 中的switch表达式使用示例
Jun 03 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 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 无限级 SelectTree 类
2009/05/19 PHP
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
php常用Stream函数集介绍
2013/06/24 PHP
php自定文件保存session的方法
2014/12/10 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
jQuery 树形结构的选择器
2010/02/15 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
浅谈JS之iframe中的窗口
2016/09/13 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
Python subprocess模块学习总结
2014/03/13 Python
python实现网站的模拟登录
2016/01/04 Python
Django中的session用法详解
2020/03/09 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
ddl,dml和dcl的含义
2016/05/08 面试题
高效课堂标语
2014/06/26 职场文书
敬老月活动总结
2014/08/28 职场文书
学生党员检讨书范文
2014/12/27 职场文书
辞职信怎么写
2015/02/27 职场文书
庆七一活动简报
2015/07/20 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis