ES6 中的模块导出和导入-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，模块化是一个非常重要的概念。ES6 中新增了模块化的语法，使得前端开发更加规范化和模块化。本文将详细介绍 ES6 中的模块导出和导入。

模块导出

在 ES6 中，使用 export 关键字可以将一个变量、函数或类导出为一个模块。导出的方式有两种：默认导出和命名导出。

默认导出使用 export default 关键字，只能导出一个默认值。默认导出不需要使用花括号 {} 包裹，而是直接使用名称引用。

示例代码：

// person.js
const person = {
  name: '张三',
  age: 20,
  gender: '男'
};

export default person;

// main.js
import person from './person.js';

console.log(person.name); // 输出：张三

命名导出使用 export 关键字，可以导出多个值。需要使用花括号 {} 包裹，使用名称引用。

示例代码：

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from './math.js';

console.log(add(1, 2)); // 输出：3
console.log(subtract(4, 2)); // 输出：2

在 ES6 中，使用 import 关键字可以导入一个模块。导入的方式和导出的方式一样，有默认导入和命名导入两种方式。

默认导入使用 import 关键字，直接导入默认导出的值。导入的名称可以自定义。

示例代码：

// person.js
const person = {
  name: '张三',
  age: 20,
  gender: '男'
};

export default person;

// main.js
import myPerson from './person.js';

console.log(myPerson.name); // 输出：张三

命名导入使用 import 关键字，使用花括号 {} 指定导入的值的名称。导入的名称必须和导出的名称一致。

示例代码：

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from './math.js';

console.log(add(1, 2)); // 输出：3
console.log(subtract(4, 2)); // 输出：2

ES6 中的模块导出和导入非常方便，使得前端开发更加规范化和模块化。使用默认导出和命名导出可以导出多个值，使用默认导入和命名导入可以导入多个值。使用模块化的方式开发可以使得代码更加清晰、易于维护。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6582f3a4d2f5e1655ddff377