随着 JavaScript 在前端开发中的广泛应用，模块化已成为 Web 开发中不可或缺的部分。ECMAScript 2015（ES6）引入了模块化的概念，使用 import 和 export 关键字，使得前端开发人员可以更加方便地组织代码并实现复用。而在 ES9 中，新增了一些导出和导入使用方法，本文将对其进行详细介绍。
ES9 中新增的导出方法
导出默认值
在 ES6 中，我们可以使用 export default 关键字来导出默认值。在 ES9 中，我们可以直接使用 export default 和声明式函数、类等一起使用，这样可以使得代码更加简单易懂。例如：
// 导出默认值时，不需要使用大括号
export default function add(a, b) {
return a + b;
}
// 使用时直接引用默认值
import add from './math';命名导出
ES9 中，我们可以针对一个模块，同时导出多个命名变量或函数。这样可以使得代码的组织更加清晰，也方便了其他模块的调用。
// 导出名为 foo 和 bar 的变量
export const foo = 'foo';
export const bar = 'bar';
// 在另一个模块中引用
import { foo, bar } from './module';
console.log(foo, bar); // 'foo', 'bar'统一导出
除了默认值和命名导出之外，ES9 还添加了一种特殊的导出方式：统一导出。使用统一导出，我们可以将多个模块暴露的命名变量、函数、类等以一个对象的形式导出。
// javascriptcn.com 代码示例
// 在多个模块中导出变量、函数等
export const foo = 'foo';
export const bar = 'bar';
export function add(a, b) {
return a + b;
}
export class Person {
constructor(name) {
this.name = name;
}
}
// 使用统一导出
export {
foo,
bar,
add,
Person
};
// 在其他模块中引用
import * as math from './math';
console.log(math.foo, math.bar, math.add(3, 4), new math.Person('Alice'));ES9 中新增的导入方法
动态导入
ES9 引入了动态导入（Dynamic Import），使得我们可以在运行时根据需要导入模块。这有利于我们在需要使用的时候才去加载模块，从而提高性能和维护性。
// javascriptcn.com 代码示例
// 动态导入 math 模块
const math = import('./math');
// 使用动态导入获取默认值
math.then(module => {
console.log(module.default);
});
// 使用动态导入获取命名变量
math.then(module => {
console.log(module.foo, module.bar);
});需要注意的是，动态导入返回的是一个 Promise 对象，我们需要使用 then 方法取得导入的模块。
导入全部内容
在 ES9 中，我们可以使用 import * as 关键字一次性导入一个模块中所有的内容。这种方法使得我们可以在一个模块中轻松地获取多个模块的全部内容。
// javascriptcn.com 代码示例
// 导入一个模块中所有内容
import * as math from './math';
// 使用命名变量
console.log(math.foo, math.bar);
// 使用默认函数
console.log(math.default(3, 4));
// 使用导出的类
const person = new math.Person('Alice');
console.log(person.name);总结
ES9 中新增的模块导入和导出方法在使用上更加灵活和方便，使得代码的组织更加清晰易懂。虽然这些语法特性不会对功能产生影响，但对于代码的可读性和可维护性却有着至关重要的作用。在实际开发中，我们可以根据需要选择不同的导入和导出方式以更好地组织代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65364f047d4982a6ebe547b3