前言

ES6模块化规范中定义：ES6 模块化规范是浏览器端和服务器端通用的模块化开发规范

ES6的导入和导出是指在ES6规范中引入的模块化系统，用于更好地组织、管理和重用JavaScript代码。这一模块化系统提供了两个关键字：import 用于导入模块中的成员，export 用于将模块中的成员导出，使其可供其他模块使用。

每一个JS文件都是一个独立的模块

导入其它模块成员使用 import 关键字

向外共享模块成员使用 export 关键字

默认导入和默认导出

默认导出语法：export default 默认导出的成员

js 复制代码

// ./out.js
let name = '张三';
let age = 21;
function show() {
    console.log(name, age);
}
// 默认导出name和show方法
export default {
    name,
    show
}

默认导入语法：import 接收名称 from '模块标识符'

js 复制代码

// App.vue
// 默认导入
import test from './default';
test.show();
//输出结果为：
// 张三 21

注意： 每个模块中只允许使用唯一的一次 export default，默认导入时的接收名称可以是任意合法名称。

按需导出语法：export 导出的属性或方法

js 复制代码

// ./need.js
export let name = '张三';
let age = 21;
export let gender = '男';
export function show() {
    console.log(name, age, gender);
}

按需导入语法：import {对应的属性名或方法} from '模块标识符'

js 复制代码

// App.vue
// 按需导入
import { name, show } from '.need';
show();
// 输出结果
// 张三 21 男

注意：

js 复制代码

// ./direct.js
let name = '张三';
let age = 21;
let gender = '男';
console.log(name, age,gender);

js 复制代码

// App.vue
// 直接导入并执行
import './direct';
// 输出结果：张三 21 男

总结：

总的来说默认导出与默认导入适用于导出模块的整个对象，导入时可以选择使用任意合法名称。 按需导出与按需导入适用于有选择性地导入模块中的特定成员，可以多次导出和导入，支持重命名。 直接导入并执行适用于执行模块中的全局代码，不需要显式导入成员，只需导入模块本身。