关于import、export语句的种种引入方式、导出方式的区别

本文主要是介绍关于import、export语句的种种引入方式、导出方式的区别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

学习了这么长时间的Vue、React、还有nodeJs，对 import 语句可以说是既熟练又容易糊涂，我们经常见到以下几种 import 语句：

• import {xx1, xx2, xx2} from ‘xx’
• improt * as xx from ‘xx’
• import xx from ‘xx’

那么接下来我们就好好分析一下他们的区别以及使用场景：

1. import {xx1, xx2, xx2} from ‘xx’

该语句是引入外部模块中的某个接口，外部模块向外暴露出某个接口后，在主模块中可以引用该模块文件及其接口名称，即可调用该接口。需要注意的是，其接口名称是一一对应的关系。

导出

导出模块的方法基本上分为两种，一种是使用 export 语法分别导出对应的模块接口，如：

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

还有一种就是将以接口的形式聚合导出，如：

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;export { firstName, lastName, year };

同时我们还可以使用 as 语法来对接口名称进行重命名，如：

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;export { firstName as name1, lastName as name2, year,year as bornYaer
};

引入

引入模块接口需要按照接口名称一一对应引入：

// main.js
import { firstName, lastName, year } from './profile.js';function setName(element) {element.textContent = firstName + ' ' + lastName;
}

也可以使用 as 语法去对模块接口进行重命名：

// main.js
import { firstName as name1, lastName as name2, year } from './profile.js';function setName(element) {element.textContent = name1 + ' ' + name2;
}

2. improt * as xx from ‘xx’

这种加载方式我们称之为模块的整体加载，是用这种方式加载模块，所有的接口都会被加载并且存放到以 as 命名的对象中。

导出

// circle.jsexport function area(radius) {return Math.PI * radius * radius;
}export function circumference(radius) {return 2 * Math.PI * radius;
}

引入

// main.jsimport * as circle from './circle';console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

注意，模块整体加载所在的那个对象（上例是circle），应该是可以静态分析的，所以不允许运行时改变。下面的写法都是不允许的。

3. import xx from ‘xx’

这种语法实际上是最常见的，从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。用这种方法可以加载模块文件默认导出的接口，并且按照用户自定义的变量名称去加载该默认接口。

本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。所以，下面的写法是有效的。

导出

默认接口使用 export default 语句导出，其可以是一个命名函数方法也可以是一个匿名函数方法。同时使用了 export default 语句导出默认接口的情况下，仍旧可以使用 export 语句导出命名接口：

// export-default.js
export default function () {console.log('foo');
}

引用

在主文件中引用该模块可以直接使用 import 语句定义用户自定义变量来引入使用该接口:

// import-default.js
import customName from './export-default';
customName(); // 'foo'

4. 注意

我们在编写模块导出模块接口时，使用 export 语句导出的变量、方法必须定义在语句之后，不能直接导出匿名函数、数值、字符串，如下面定义的导出都是非法的：

// 报错
export 1;// 报错
var m = 1;
export m;

上面两种写法都会报错，因为没有提供对外的接口。第一种写法直接输出 1，第二种写法通过变量m，还是直接输出 1。1只是一个值，不是接口。正确的写法是下面这样。

正确的写法为：

// 写法一
export var m = 1;// 写法二
var m = 1;
export {m};// 写法三
var n = 1;
export {n as m};

但是当我们使用 export default 语句时，如果在语句中声明变量，就会产生报错，这点与 export 语句截然相反，其原因是因为 export default 语句实质上相当于导出了一个 defalut 变量，如果我们再语句中再声明一个变量自然就会报错。

// 正确
export var a = 1;// 正确
var a = 1;
export default a;// 错误
export default var a = 1;// 正确
export default 42;// 报错
export 42;

文章部分内容参考《ES6语法入门 · Module的语法》——阮一峰

这篇关于关于import、export语句的种种引入方式、导出方式的区别的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---