ES6 中的默认导出和单个导出
ES6 是 JavaScript 的一个重大更新版本，它引入了许多新的语法和特性，其中包括了默认导出和单个导出两种导出方式。这两种导出方式可以帮助我们更好地组织和管理 JavaScript 代码，使其更加可读、可维护、可重用。本文将深入探讨 ES6 中的默认导出和单个导出，并提供相应的代码示例帮助读者更好地理解和应用这种技术。
1. 默认导出
默认导出是 ES6 中一种较为常用的导出方式。当模块中只有一个输出时，我们可以使用默认导出。默认导出的语法如下：
export default expression;
其中，expression 可以是任何合法的表达式，如：
// javascriptcn.com 代码示例
// 定义默认导出
const name = 'Tom';
export default name;
// 或者
function add(a, b) {
return a + b;
}
export default add;
// 或者
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`Hello, ${this.name}!`);
}
}
export default Person;在上面的几个示例中，我们分别使用 const、function 和 class 来定义了默认导出。当我们需要在另一个模块中使用这些导出时，可以直接以如下的方式导入它们：
import name from './module'; import add from './module'; import Person from './module';
在上面的代码中，我们使用 import 语句将 module 模块中的默认导出导入到当前模块中。这时 name、add 和 Person 分别对应了 module 模块中的默认导出。
需要特别注意的是，一个模块中只能有一个默认导出。如果你想导出多个变量或函数，应该使用单个导出。
2. 单个导出
单个导出是指在一个模块中通过 export 语句单独导出一个或多个变量或函数。单个导出的语法如下：
export const name1 = value1;
export function name2() { /* ... */ };
export class name3 { /* ... */ };其中，name1、name2 和 name3 分别为导出的变量、函数和类的名称，value1、function 和 { ... } 为相应的值或函数体。
下面是一个例子：
// javascriptcn.com 代码示例
// 定义单个导出
export const name = 'Tom';
export function add(a, b) {
return a + b;
}
export class Person {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`Hello, ${this.name}!`);
}
}当我们需要在另一个模块中使用这些导出时，可以使用如下的方式进行导入：
import { name, add, Person } from './module';在上面的示例代码中，我们使用了花括号 { ... } 将单个导出一一对应，其中 name、add 和 Person 分别对应了 module 模块中导出的变量、函数和类。
需要注意的是，单个导出可以用于导出任意数量的变量或函数，但每个变量或函数都必须使用 export 语句进行导出。使用单个导出可以使我们更加灵活地导出模块中的各个部分，并允许我们在其他模块中自由组合这些部分。
3. 使用默认导出还是单个导出？
在实际开发中，我们应该根据具体情况选择使用默认导出或单个导出。
当模块中只需要导出一个变量、函数或类时，我们可以使用默认导出。因为默认导出的语法更为简洁，而且可以避免命名冲突。例如：
// 定义默认导出 const PI = 3.1415926; export default PI;
当模块中需要导出多个变量或函数时，我们应该使用单个导出。单个导出不仅更加灵活，还可以定义多个导出名称，方便使用。例如：
// 定义单个导出
export const PI = 3.1415926;
export function add(a, b) {
return a + b;
}需要注意的是，在实际开发中，我们应该尽可能地使用单个导出，以便于在其他模块中自由组合各个部分。而默认导出应该尽量减少使用，以避免命名冲突和代码可读性问题。
4. 总结
本文介绍了 ES6 中的默认导出和单个导出两种导出方式。两种方式各有优缺点，应根据具体情况选择使用。需要注意的是，在实际开发中，我们应该尽可能地使用单个导出，以便于在其他模块中自由组合各个部分，而默认导出应该尽量减少使用，以避免命名冲突和代码可读性问题。
希望本文对读者对 ES6 中的默认导出和单个导出有更深入的理解和应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654df9817d4982a6eb75294d