ES6模块导出和导入

1. ES6模块导出和导入

在前端开发中，我们经常需要将一个大的项目拆分成多个小的模块，方便开发和维护。为了实现模块化编程，ES6 提供了导出和导入的语法。本文将介绍ES6模块导出和导入的用法。

1.1. 导出

使用export关键字可以将模块中的变量、函数和对象导出，其他模块可以使用import关键字导入这些成员。导出的成员可以有多个，也可以只有一个，甚至可以是默认导出。

1.1.1. 导出一个变量

使用 export 关键字导出一个变量：

export let info = 'hello';

1.1.2. 导出一个函数

使用 export 关键字导出一个函数：

export const showInfo = function () {
  console.log('nihao');
};

1.1.2. 导出一个对象，并且是默认导出

使用 export default 关键字将对象导出并且设为默认导出（default 关键字只能出现一次）：

export default {
  msg: '张三',
  uname: '李四'
};

1.2. 导入

使用import关键字可以导入模块中导出的成员。导入的成员可以有多个，也可以只有一个，甚至可以是默认导出。

1.2.1. 单个成员的导入

使用 import 关键字导入单个成员，可以使用对象的解构赋值：

import {info, showInfo} from './module/01.js';
console.log(info);
showInfo();

1.2.2. 导入全部成员

使用 import 关键字导入全部成员，可以使用 * 通配符：

import * as obj from './module/01.js';
console.log(obj.info);
obj.showInfo();

1.2.3. 导入默认的成员

如果是默认导出，那么在导入时可以随便起一个名字：

import obj from './module/01.js';
console.log(obj.msg);
console.log(obj.uname);

1.2.3. 默认导入和单个导入可以结合使用

默认导入和单个导入可以结合使用，obj 就是默认导入，名字自定义，info 和 showInfo 是按需导入：

import obj, {info} from './module/01.js';
console.log(obj);
console.log(info);

1.3. 完整代码示例

// ./module/01.js
export let info = 'hello';

export const showInfo = function () {
  console.log('nihao');
};

export default {
  msg: '张三',
  uname: '李四'
};

// ./main.js
import {info, showInfo} from './module/01.js';
import obj from './module/01.js';
import * as objAll from './module/01.js';

console.log(info);
showInfo();

console.log(obj.msg);
console.log(obj.uname);

console.log(objAll.info);
objAll.showInfo();
console.log(objAll.default);

以上是关于 ES6 模块导出和导入的介绍，希望本文能够帮助你更好地理解和使用 JavaScript 中的模块化编程。