JavaScript 中的 export:命名导出和默认导出

2,125 阅读3分钟

在 JavaScript 中,export 是一个关键字,用于将模块中的函数、变量、对象等导出,以便其他模块可以使用它们。export 可以与 import 关键字一起使用,以便在不同的模块之间共享代码。

export 有两种用法:命名导出和默认导出。

1. 命名导出

命名导出是指将一个或多个函数、变量、对象等通过 export 关键字导出,以便其他模块可以使用它们。例如:

// module.js
export const PI = 3.14;

export function add(a, b) {
return a + b;
}

export class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}

在上面的例子中,我们使用 export 关键字将 PI、add 和 Person 导出,以便其他模块可以使用它们。在其他模块中,我们可以使用 import 关键字,并使用花括号{}来包含需要导出的成员:

// main.js
import { PI, add, Person } from './module.js';

console.log(PI); // 3.14

console.log(add(2, 3)); // 5

const person = new Person('Tom', 18);
console.log(person.name); // Tom
console.log(person.age); // 18

在上面的例子中,我们使用 import 关键字从 module.js 模块中用{}引入了 PI、add 和 Person,然后在 main.js 中使用它们。

使用不同的名称

使用 export 和 import 关键字时,可以使用不同的名称来引用导出的成员。例如,使用命名导出时可以使用as关键字来指定新的名称:

// module.js

export const PI = 3.14;

export function add(a, b) {

  return a + b;

}

// main.js

import { PI as myPI, add as myAdd } from './module.js';

console.log(myPI); // 3.14

console.log(myAdd(2, 3)); // 5

在上面的例子中,我们使用as关键字将 PI 和 add 函数导入为 myPI 和 myAdd。然后在 main.js 中使用它们。使用不同的名称来引用导出的成员并不会影响这些成员的行为,它们仍然是原来的成员。

2. 默认导出

默认导出是指将一个函数、变量、对象等通过 export default 关键字导出,以便其他模块可以使用它们。例如:

// module.js
export default function add(a, b) {
return a + b;
}

在上面的例子中,我们使用 export default 关键字将 add 函数导出。在其他模块中,我们可以使用 import 关键字来引入这个默认导出:

// main.js
import add from './module.js';

console.log(add(2, 3)); // 5

在上面的例子中,我们使用 import 关键字从 module.js 模块中引入了 add 函数的默认导出,并在 main.js 中使用它。另外我们可以给引出的函数换个名称,例如import add_num from './module.js';

需要注意的是,一个模块只能有一个默认导出,但可以有多个命名导出。如果一个模块既有默认导出又有命名导出,我们可以使用 import 关键字来同时引入它们:

// module.js
export const PI = 3.14;

export default function add(a, b) {
return a + b;
}

// main.js
import add, { PI } from './module.js';

console.log(PI); // 3.14

console.log(add(2, 3)); // 5

在上面的例子中,我们同时引入了 module.js 模块中的默认导出 add 和命名导出 PI。

3. 总结:

export 是 JavaScript 中用于导出模块中函数、变量、对象等的关键字,它有两种用法:命名导出和默认导出。命名导出可以导出一个或多个函数、变量、对象等,而默认导出只能导出一个函数、变量、对象等。在其他模块中,我们可以使用 import 关键字来引入导出的内容。需要注意的是,一个模块只能有一个默认导出,但可以有多个命名导出。