在前端开发中，模块化编程已经成为了不可或缺的一部分。ES6 为我们提供了一种更加简单、规范的模块化方案，通过使用 export 和 import 关键字，可以很方便地将代码块拆分成小的、独立的、可复用的模块。本文将为大家详细介绍 ES6 中的导出和导入，以及如何在实际开发中使用。
导出
ES6 中有两种导出方式：默认导出和命名导出。
默认导出
默认导出使用关键字 export default 来标记，一个模块中只能存在一个默认导出。默认导出可以是任意类型的值，比如对象、函数、类等等。使用默认导出时，可以不需要使用花括号 {} 进行包裹。
例如，我们定义一个名为 person 的对象：
// person.js
const person = {
name: 'Tom',
age: 18,
};
export default person;在上面的代码中，我们使用 export default 导出了 person 对象。模块中的其他文件，可以使用 import 语句来引用该对象，如下所示：
// main.js import person from './person.js'; console.log(person.name); // 输出：Tom
在 import 语句中，我们可以使用一个任意的名称来引用导出的对象，这里我们使用 person。
命名导出
命名导出使用关键字 export 来标记，可以将一个或多个变量、函数、类等导出为一个对象。使用命名导出时，需要使用花括号 {} 进行包裹。
例如，我们定义了一个名为 add 的函数和一个名为 multiply 的函数：
// math.js
export const add = (x, y) => x + y;
export function multiply(x, y) {
return x * y;
}在上面的代码中，我们使用 export 导出了 add 和 multiply 两个函数。模块中的其他文件，可以使用 import 语句来引用这两个函数，如下所示：
// main.js
import { add, multiply } from './math.js';
console.log(add(1, 2)); // 输出：3
console.log(multiply(3, 4)); // 输出：12在 import 语句中，我们使用花括号 {} 来引用导出的函数。
导入
导入使用关键字 import 来标记，可以导入默认导出或命名导出的模块。
导入默认导出
要导入一个默认导出的模块，可以在 import 语句中使用任意的名称来引用该对象，如下所示：
// main.js import person from './person.js'; console.log(person.name); // 输出：Tom
在上面的代码中，我们使用 import 语句来导入 person.js 模块的默认导出。由于我们使用了 default 关键字来导出 person 对象，因此，在 import 语句中，我们可以使用任意的名称来引用该对象，这里我们使用 person。
导入命名导出
要导入一个命名导出的模块，需要在 import 语句中使用与导出名称相同的名称进行引用，如下所示：
// main.js
import { add, multiply } from './math.js';
console.log(add(1, 2)); // 输出：3
console.log(multiply(3, 4)); // 输出：12在上面的代码中，我们使用 import 语句来导入 math.js 模块的命名导出。由于我们使用了 export 关键字来导出了 add 和 multiply 两个函数，在 import 语句中，我们需要使用与导出名称相同的名称来引用这两个函数。
如果导出的模块很多，或者我们只需要使用其中的一部分，可以使用 * 来引入整个模块，然后再使用属性访问方式引用所需的部分。例如：
// main.js import * as math from './math.js'; console.log(math.add(1, 2)); // 输出：3 console.log(math.multiply(3, 4)); // 输出：12
总结
本文详细介绍了 ES6 中的模块化编程和导出、导入语法，包括默认导出和命名导出，以及在实际开发中的使用方法。模块化编程能够大大提高代码的可维护性和可重用性，是现代前端开发中必不可少的技能，希望本文能够为大家提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ec06f0f6b2d6eab36529d0