JavaScript 是一门非常流行的编程语言，它在 Web 开发、移动应用开发、桌面应用程序开发等众多领域都有广泛的应用。在 JavaScript 中，import 是一个用于加载模块的语句，它可以让我们在 JavaScript 文件中引入其他文件中的函数、类、变量等。
虽然 import 已经存在了一段时间，但在 ES12 中，它发生了一些变化，本文将介绍这些变化，并探讨如何使用它们来提高我们的 JavaScript 编程效率。
ES12 中的 import() 动态导入
在 ES6 中，import 被用来静态地加载模块。这意味着我们必须在编译时知道我们要从哪个模块中导入什么内容。但在某些情况下，我们需要在运行时动态加载模块。比如，当某些模块只有在特定条件下才会被使用时，动态导入就派上用场了。
ES12 引入了 import() 动态导入函数，它允许我们在运行时异步加载模块。这个函数返回一个 Promise，当模块加载完成后，它就会被解决。
下面是一个简单的示例，我们使用动态导入函数来加载一个模块：
async function loadModule() {
const math = await import("./math.js");
console.log(math.add(1, 1));
}上述示例中，import() 函数将会异步地加载 math.js 模块，等待加载完成后，我们就可以使用其中的函数 add 了。
ES12 中的命名空间导入
在 ES6 中，我们可以使用通配符 * 来导入一个模块中的所有导出项。这种方式虽然方便，但也有一些限制，比如导入的变量名不能与全局作用域中已有的变量名重复。
在 ES12 中，我们可以使用新的语法来导入所有导出项，但将它们放在一个对象中。这样，我们就可以避免可能出现的名称冲突：
import * as math from "./math.js"; console.log(math.add(1, 1));
上述示例中，我们使用 import * as 来导入 math.js 模块中的所有导出项，并将它们放入一个名为 math 的对象中。这样，我们就可以使用 math.add 来调用 math.js 中的 add 函数了。
ES12 中的顶层await
在 ES12 中，我们现在可以在模块的顶部使用 await，这对于某些异步操作来说是很方便的。以往，我们必须将 await 语句放在异步函数中。
例如，我们可以在 index.js 文件中使用 await 来等待异步加载模块后再执行：
await import("./math.js");
console.log(math.add(1, 1));这样我们就不再需要创建一个异步函数来等待模块的加载了。
结论
ES12 中的这些变化让 import 更加好用。动态导入的引入使得我们可以在运行时加载模块，而命名空间导入则允许我们避免变量名冲突。顶层await 使得异步操作更容易，并且不再需要在异步函数中使用它。
如果您正在使用 ES12 或者以下版本，则可以开始使用这些新的 import 特性来提高您的 JavaScript 编程效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67074d45d91dce0dc86688c0