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

一、export 的使用

  • 定义一个test.js文件
export function a(){
	console.log('a');
}
export function b(){
	console.log('b');
}
export let c  = 3;
  • index.js文件进行导入操作
// 这里的 a b c 必须以导出变量一致,不能瞎取名
import {a,b,c} from './test.js'
a();	// a
b();	// b
console.log(c);	//3
-----------------------------------------------
//可以使用as设置别名,* 号表示所有
import * as test from './test.js'
test.a();	// a
test.b();	// b
console.log(test.c);	//3
-----------------------------------------------
//可以使用as设置别名,设置单个
import {a,b as bb,c} from './test.js'
a();	// a
bb();	// b
console.log(c);	//3

二、export default 的使用

  • 定义一个test.js文件
export default{
	a:function(){
		console.log('a');
	},
	b:function(){
		console.log('b');
	},
	c : 3
}
  • index.js文件进行导入操作
// 这里的 zdy 可以自定义的任何变量,自己取名
import zdy from './test.js'
zdy.a();	// a
zdy.b();	// b
console.log(zdy.c);	//3

三、两者之间的区别

区别 1:

  • 一个js文件是可以有多个 export,但是只能有一个export default

区别 2:

  • 通过export方式导出,在导入时要加{}export default则不需要

区别 3:

  • 使用export default为模块指定默认输出,导入时只需知道文件名即可,但是使用export必须知道导出的变量或函数等,导入时变量名要一致
Logo

前往低代码交流专区

更多推荐