JavaScript 中“导出”和“默认导出”之间的区别 [复制]

Java

JavaScript中的导出和默认导出之间的区别

JavaScript是一种非常强大和灵活的编程语言，它允许我们在不同的文件之间共享代码。在JavaScript中，有两种主要的导出方式：普通导出和默认导出。虽然它们的目的都是实现代码的共享，但它们有一些重要的区别。

普通导出

在JavaScript中，我们可以使用普通导出来导出多个变量、函数或对象。使用普通导出时，我们需要将要导出的内容放在一个对象中，并使用模块的导出语法将其公开出来。其他文件在导入时需要使用相应的模块导入语法来引用这些导出的内容。

下面是一个示例，展示了如何使用普通导出来共享多个变量和函数：

// utils.JS 文件
export const PI = 3.14159;
export function square(x) {
  return x * x;
}
export function cube(x) {
  return x * x * x;
}
// mAIn.JS 文件
import { PI, square, cube } from './utils.JS';
console.log(PI); // 输出 3.14159
console.log(square(2)); // 输出 4
console.log(cube(3)); // 输出 27

在上面的示例中，我们将常量PI以及两个函数square和cube导出到utils.JS文件中。然后，在mAIn.JS文件中，我们使用模块导入语法从utils.JS文件中导入并使用这些导出的内容。

默认导出

与普通导出不同，JavaScript还支持默认导出。默认导出允许我们在一个模块中只导出一个默认的变量、函数或对象。默认导出的好处是，我们可以使用更简洁的语法来导入它，而无需指定导出的名称。

下面是一个示例，展示了如何使用默认导出来共享一个函数：

// utils.JS 文件
export default function sayHello(name) {
  console.log(<code>Hello, ${name}!</code>);
}
// mAIn.JS 文件
import sayHello from './utils.JS';
sayHello('John'); // 输出 "Hello, John!"

在上面的示例中，我们将一个函数sayHello使用默认导出从utils.JS文件中导出。然后，在mAIn.JS文件中，我们使用简洁的模块导入语法直接导入并使用这个默认导出的函数。

普通导出 vs 默认导出

普通导出和默认导出在使用时有一些重要的区别：

1. 普通导出可以导出多个变量、函数或对象，而默认导出只能导出一个。

2. 普通导出需要在导入时使用相应的模块导入语法来引用导出的内容，而默认导出使用简洁的导入语法来导入默认导出的内容。

3. 普通导出的名称是由导出时的命名决定的，而默认导出的名称可以根据需要在导入时自定义。

JavaScript中的导出和默认导出是实现代码共享的两种方式。普通导出允许导出多个变量、函数或对象，并需要在导入时使用相应的模块导入语法来引用导出的内容。默认导出只能导出一个变量、函数或对象，并使用简洁的导入语法来导入默认导出的内容。

无论是普通导出还是默认导出，它们都为我们提供了一种方便的方式来在不同的文件中共享代码，从而提高了代码的可重用性和可维护性。根据具体的需求和场景，我们可以选择适合的导出方式来组织和管理我们的JavaScript代码。