导出模块的不同方式：export default和export const

您所在的位置：网站首页 › temporary反义 › 导出模块的不同方式：export default和export const

导出模块的不同方式：export default和export const

2023-10-16 18:17| 来源: 网络整理| 查看: 265

export default 和 export const 是 JavaScript 中用于导出模块的两种不同的导出语法。

export default:

用于导出模块的默认值。可以在一个模块中只有一个 export default。在导入时，可以使用任意名称来引用默认导出的值。导入时可以省略花括号 {}。

示例：

// 模块A.js const name = 'John'; export default name; // 模块B.js import myName from './A.js'; console.log(myName); // 输出: 'John'

export const:

用于导出命名的常量或变量。可以导出多个常量或变量。在导入时，需要使用相同的名称引用导出的值。导入时需要使用花括号 {} 包裹导入的值。

示例：

// 模块A.js export const name = 'John'; export const age = 25; // 模块B.js import { name, age } from './A.js'; console.log(name); // 输出: 'John' console.log(age); // 输出: 25

需要根据使用场景和需求选择适当的导出方式。如果你的模块只导出一个默认值，可以使用 export default。如果你需要导出多个命名的常量或变量，可以使用 export const。在导入时也要根据导出方式使用相应的语法进行导入。

当涉及到模块的导入和导出时，除了 export default 和 export const，还有其他一些常用的导出语法和导入方式。

其他导出语法包括：

导出命名的函数或类：

export function myFunction() { // 函数逻辑... } export class MyClass { // 类定义... }

导出命名的变量：

export const myVariable = 'Hello'; export let myOtherVariable = 42;

导出多个命名的变量或函数：

const name = 'John'; const age = 25; export { name, age };

导出时重命名：

const myVariable = 'Hello'; export { myVariable as greeting };

除了 import 语句用于导入模块之外，还有其他导入方式：

导入默认导出的值：

import myName from './A.js';

导入具名导出的值：

import { name, age } from './A.js';

导入所有导出的值到一个对象中：

import * as myModule from './A.js'; console.log(myModule.name); console.log(myModule.age);

进阶的技巧和用法：

默认导出和具名导出的混合使用：在一个模块中，可以同时使用默认导出和具名导出。这种情况下，可以在导入语句中混合使用默认导入和具名导入。

示例：

// 模块A.js export default 'Hello'; export const name = 'John'; // 模块B.js import defaultGreeting, { name } from './A.js'; console.log(defaultGreeting); // 输出: 'Hello' console.log(name); // 输出: 'John'

导出时重命名和导入时重命名的结合使用：可以在导出模块时使用重命名，然后在导入模块时再次进行重命名。这种方式可以更灵活地控制导入和导出的命名。

示例：

// 模块A.js const myVariable = 'Hello'; export { myVariable as greeting }; // 模块B.js import { greeting as message } from './A.js'; console.log(message); // 输出: 'Hello'

导入和导出时使用别名：可以使用 as 关键字来创建导入和导出时的别名，以提高代码的可读性或避免命名冲突。

示例：

// 模块A.js const myVariable = 'Hello'; export { myVariable as greeting }; // 模块B.js import { greeting as welcomeMessage } from './A.js'; console.log(welcomeMessage); // 输出: 'Hello'

export default 用于导出模块的默认值。一个模块只能有一个默认导出，而且在导入时可以使用任意名称引用默认导出的值。

export const 用于导出命名的常量或变量。可以导出多个常量或变量，并且在导入时需要使用相同的名称引用导出的值。

总结一下两者的区别：

export default 导出的是默认值，导入时可以使用任意名称。 export const 导出的是具名的常量或变量，导入时需要使用相同的名称。

对于在 Vue 中的使用，如果你只需要导出一个默认的 Vue 组件或对象，可以使用 export default。如果你需要导出多个组件或对象，可以使用 export const。

注意：不要混淆 module.exports 、export不是一个概念！

module.exports 是在 Node.js 中用于导出模块的特殊对象。与 export 和 import 在 ES6 中用于导出和导入模块的语法不同，module.exports 是 Node.js 中的一种导出方式。

通过 module.exports，你可以将一个值或对象作为模块的导出内容，以便其他模块可以使用 require 函数来引入该模块并获取导出的值。

以下是 module.exports 的使用示例：

// 模块A.js const name = 'John'; const age = 25; module.exports = { name, age, }; // 模块B.js const myModule = require('./A.js'); console.log(myModule.name); // 输出: 'John' console.log(myModule.age); // 输出: 25

在模块A中，我们使用 module.exports 将一个包含 name 和 age 属性的对象导出。然后，在模块B中，我们使用 require 函数引入模块A，并将其返回值赋给 myModule 变量。通过访问 myModule 对象的属性，我们可以获取模块A导出的值。

需要注意的是，使用 module.exports 导出的是一个整个对象或值，而不是单个的变量或函数。如果你只想导出一个单独的变量或函数，可以直接给 module.exports 赋值，例如 module.exports = myVariable。

总结起来，module.exports 是 Node.js 中用于导出模块的方式，通过它可以导出一个对象或值，并在其他模块中使用 require 来引入和访问导出的内容。与 ES6 中的 export 和 import 语法相比，module.exports 是在 Node.js 环境下使用的常见模块导出方式。

module.exports 和 export 都是用于在 JavaScript 模块中导出内容的方式，但是它们在语法和使用上有一些差异。

module.exports：

在 Node.js 环境中使用的导出方式。可以直接赋值为一个对象、函数、类或其他任意值。导出的内容可以是单个的变量、函数、类，也可以是一个包含多个属性或方法的对象。可以通过 require 函数引入模块并获取导出的内容。用法示例： // 模块A.js const myVariable = 'Hello'; module.exports = myVariable; // 模块B.js const myModule = require('./A.js'); console.log(myModule); // 输出: 'Hello'

export 和 import：

在 ES6（ECMAScript 2015）及以上版本中引入的模块导入导出语法。可以使用 export 关键字导出变量、函数、类或其他声明。导出的内容可以是具名导出（通过名称导出）或默认导出（只有一个默认导出）。可以使用 import 语句引入模块并获取导出的内容。用法示例： // 模块A.js export const myVariable = 'Hello'; // 模块B.js import { myVariable } from './A.js'; console.log(myVariable); // 输出: 'Hello'

主要的区别在于语法和使用环境。module.exports 是在 Node.js 中使用的导出方式，而 export 和 import 是在支持 ES6 模块的现代浏览器或使用了 Babel 等工具进行转译的环境中使用的导出方式。

在使用时，可以根据你的开发环境和需求选择适当的导出方式。如果你正在开发一个 Node.js 应用程序或使用 CommonJS 模块规范，可以使用 module.exports。如果你正在开发一个现代的 JavaScript 应用程序，可以选择使用 export 和 import 来进行模块导入导出操作。

需要注意的是，在同一个模块中不应同时使用 module.exports 和 export 来导出内容，因为它们使用的是不同的导出语法。

### 干货：关注我或微信公众号：全栈思维导航，目前在写一套开源项目（社交类）：基于Spring Boot + Vue3 + 小程序 + APP的开源项目。关注不错过！！！

【本文地址】

公司简介

联系我们