在JavaScript开发中，我们经常需要使用模块化的方式来组织和管理我们的代码。在ES6及更高版本中，引入了import和export关键字，使得模块化开发变得更加方便和简洁。本文将介绍JS中各种导入和导出方式，并对标题进行美化。
1. 默认导出与默认导入
默认导出指的是一个模块中只有一个默认的导出项，而默认导入则是对应的导入方式。
1.1 默认导出
在一个模块中，我们可以使用export default关键字来导出一个默认的项，例如：
// 模块A.js
const name = "John";
export default name;
1.2 默认导入
在另一个模块中，我们可以使用import关键字加上as关键字来导入默认项，例如：
// 模块B.js
import name from './模块A.js';
console.log(name); // 输出：John
2. 命名导出与命名导入
命名导出指的是一个模块中可以有多个导出项，并且需要通过名称来指定导入的内容。命名导入则是对应的导入方式。
2.1 命名导出
在一个模块中，我们可以使用export关键字来导出一个或多个命名的项，例如：
// 模块C.js
export const name = "John";
export const age = 25;
2.2 命名导入
在另一个模块中，我们可以使用import关键字来导入命名的项，例如：
// 模块D.js
import { name, age } from './模块C.js';
console.log(name); // 输出：John
console.log(age); // 输出：25
3. 混合导入和导出
在一个模块中，我们既可以使用默认导出，也可以使用命名导出。
3.1 混合导出
在一个模块中，我们既可以使用export default来导出默认项，也可以使用export来导出命名项，例如：
// 模块E.js
const name = "John";
export default name;
export const age = 25;
export const gender = "Male";
3.2 混合导入
在另一个模块中，我们可以使用混合的方式来导入，默认项使用import关键字，命名项使用import关键字加上as关键字，例如：
// 模块F.js
import name, { age, gender as gen } from './模块E.js';
console.log(name); // 输出：John
console.log(age); // 输出：25
console.log(gen); // 输出：Male
以上就是JS中各种导入和导出方式的介绍。通过使用这些方式，我们可以轻松地进行模块化开发，并提高代码的可维护性和复用性。
参考链接：
本文来自极简博客，作者：心灵画师，转载请注明原文链接：JS中各种导入和导出方式
