ES6 中的“export const”与“export default”

JS

ES6中的"export const"与"export default"用于在模块中导出变量、函数或类。这两种导出方式有着不同的使用场景和语法规则。

"export const"用于导出一个或多个具名的变量、函数或类。它的语法如下：

export const variableName = value;
export function functionName() {
  // function body
}
export class ClassName {
  // class body
}

当使用"export const"导出时，需要使用相同的变量名、函数名或类名来导入模块。例如，在一个名为"moduleA.JS"的模块中，我们可以这样导出变量和函数：

Javascript
// moduleA.JS
export const PI = 3.1415926;
export function calculateArea(radius) {
  return PI * radius * radius;
}

在另一个模块中，我们可以使用相同的变量名和函数名来导入模块，并使用导出的变量和函数：

Javascript
// moduleB.JS
import { PI, calculateArea } from './moduleA';
console.log(PI); // 输出 3.1415926
console.log(calculateArea(5)); // 输出 78.539816

"export default"用于导出一个默认的变量、函数或类。它的语法如下：

export default value;
export default function functionName() {
  // function body
}
export default class ClassName {
  // class body
}

当使用"export default"导出时，可以为导出的变量、函数或类取任意名称来导入模块。例如，在一个名为"moduleC.JS"的模块中，我们可以这样导出一个函数：

Javascript
// moduleC.JS
export default function sayHello(name) {
  console.log(<code>Hello, ${name}!</code>);
}

在另一个模块中，我们可以使用任意名称来导入模块，并调用导出的函数：

Javascript
// moduleD.JS
import greet from './moduleC';
greet('Alice'); // 输出 "Hello, Alice!"

使用"export const"与"export default"的最佳实践

在实际开发中，我们应根据具体的需求来选择使用"export const"还是"export default"。

1. 当一个模块只需要导出一个变量、函数或类时，可以使用"export default"。这样可以简化导入的语法，并且可以为导出的内容取任意名称。

2. 当一个模块需要导出多个变量、函数或类时，可以使用"export const"。这样可以明确指定导出的内容，并且需要使用相同的名称来导入模块。

3. 当一个模块需要同时导出默认的内容和其他具名的内容时，可以结合使用"export const"和"export default"。

Javascript
// moduleE.JS
export const PI = 3.1415926;
export default function calculateArea(radius) {
  return PI * radius * radius;
}

在另一个模块中，可以这样导入模块并使用导出的内容：

Javascript
// moduleF.JS
import calculateArea, { PI } from './moduleE';
console.log(PI); // 输出 3.1415926
console.log(calculateArea(5)); // 输出 78.539816

ES6中的"export const"与"export default"提供了灵活的模块导出方式。"export const"用于导出具名的变量、函数或类，需要使用相同的名称来导入模块。"export default"用于导出默认的变量、函数或类，可以为导出的内容取任意名称来导入模块。根据实际需求，可以选择合适的导出方式来组织和管理模块的代码。