JS ES6模块导入导出教程：export与import区别及代码示例

笔者在初学JavaScript时，对模块机制缺乏清晰认知，面对如何导入和导出模块的问题往往只能盲目尝试。

例如，当发现 import xx from 'test.js' 无法生效时，可能会尝试添加括号写成 import {xx} from 'test.js' 的形式。

这种依靠猜测和试错的方式虽然偶尔能成功，但本质上并未理解模块机制，导致对原理依然模糊。

特别是在开发 www.helloworld.net 这类网站项目时，遇到模块相关的问题容易感到困惑，尤其是在引入第三方库的场景下更为常见。

此类情况在实际开发中屡见不鲜，撰写本文旨在防止日后遗忘，便于自我查阅，同时也希望帮助更多开发者。本文内容专门针对ES6标准下的模块知识进行讲解。

首先需要明确export和import的基本概念。

在JS模块体系中，导入与导出操作主要依赖 import 和 export 这两个核心关键字。

export关键字的作用是将本模块的内容对外输出。
import关键字则用于从其他模块导入内容。

简而言之，当一个模块使用export导出后，其他文件即可通过import导入该模块并使用其内容。

接下来具体探讨import和export的实际用法，以及如何导出变量、函数、类和对象等不同类型的模块。

1 导出单个变量

//a.js 导出一个变量，语法如下
export var site = "www.helloworld.net"

//b.js 中使用import 导入上面的变量
import { site } from "/.a.js" //路径根据你的实际情况填写
console.log(site)	//输出： www.helloworld.net

2 导出多个变量

上述示例展示了单个变量的导出，那么如何一次性导出多个变量呢？

 //a.js 中定义两个变量，并导出
 var siteUrl="www.helloworld.net"
 var siteName="helloworld开发者社区"
 
 //将上面的变量导出
 export { siteUrl ,siteName }  
 
 
 
 // b.js 中使用这两个变量
 import { siteUrl , siteName } from "/.a.js" //路径根据你的实际情况填写

 console.log(siteUrl)	//输出： www.helloworld.net
 console.log(siteName)	//输出： helloworld开发者社区

3 导出函数

导出函数的语法与导出变量类似，同样需要添加 { } 符号。

//a.js 中定义并导出一个函数
function sum(a, b) {
    return a + b
}
//将函数sum导出
export { sum } 


//b.js 中导入函数并使用
import { sum } from "/.a.js" //路径根据你的实际情况填写
console.log( sum(4,6) ) //输出： 10

4 导出对象

在JavaScript中一切皆对象，因此对象自然可以被导出，且存在两种不同的写法。

4.1 第一种写法

使用 export default 关键字进行导出，具体代码如下。

//a.js 中，定义对象并导出, 注意，使用export default 这两个关键字导出一个对象
export default {
    siteUrl:'www.helloworld.net',
    siteName:'helloworld开发者社区'
}


//b.js 中导入并使用
import obj from './a.js'   	//路径根据你的实际情况填写
console.log(obj.siteUrl)	//输出：www.helloworld.net
console.log(obj.siteName)	//输出：helloworld开发者社区

4.2 第二种写法

同样使用 export default 关键字，具体实现如下。

//a.js 中定义对象，并在最后导出
var obj = {
   	siteUrl:'www.helloworld.net',
    siteName:'helloworld开发者社区'
}

export default obj	//导出对象obj


//b.js 中导入并使用
import obj from './a.js'   	//路径根据你的实际情况填写
console.log(obj.siteUrl)	//输出：www.helloworld.net
console.log(obj.siteName)	//输出：helloworld开发者社区

5 导出类

类的导出方式与对象类似，同样依赖 export default 关键字，也包含两种写法。

5.1 第一种写法

//a.js 中定义一个类并直接导出
export default class Person {
    //类的属性
    site = "www.helloworld.net"

    //类的方法
    show(){
        console.log(this.site)
    }
}


//b.js 中导入并使用
//导入类
import Person from './a.js'

//创建类的一个对象person
let person = new Person()

//调用类的方法
person.show()  	//输出：www.helloworld.net

5.2 第二种写法

//a.js 中定义一个类，最后导出
class Person {
    //类的属性
    site = "www.helloworld.net"

    //类的方法
    show(){
        console.log(this.site)
    }
}

//导出这个类
export default Person 



//b.js 中导入并使用
//导入类
import Person from './a.js'

//创建类的一个对象person
let person = new Person()

//调用类的方法
person.show()  	//输出：www.helloworld.net

小结

下面对上述内容进行简要总结。

export与export default的区别

export与export default均可用于导出常量、函数、文件、模块等。
可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用。
export default后面不能跟const或let的关键词。
export、import可以有多个，export default仅有一个。
通过export方式导出，在导入时要加 { }，export default则不需要。
export具名导出xxx ，export default匿名。区别在于导入的时候，export需要一样的名称才能匹配，后者无论取什么名都可以。
模块化管理中一个文件就是一个模块，export可以导出多个方法和变量，export default只能导出当前模块，一个js文件中只支持出现一个。

对于import ,export , export default ，他们的用法上面的例子已经很详细的列出了，忘记的时候，可以当作参考看看。

最重要的还是要明白为什么要这么写，实在不明白记住就行了。

到此这篇关于Javascript模块导入导出详解的文章就介绍到这了,更多相关Javascript模块导入导出内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

JavaScript ES6 模块导入导出详解：export与import用法指南