利用 ES9 中的新特性批量改名变量：import() 面向可执行字符串

ES9 提供了一种新的特性，可以让我们批量改变变量的名称。这个特性是 import()，是面向可执行字符串的。

什么是 import()

在 ES6 中，我们一般使用 import 语句来加载其他模块中导出的变量、函数或类。但这种方式无法动态加载模块，因为 import 语句的路径必须是静态的字符串。

import() 就是为了解决这个问题而生的。它是一个函数，接受一个可执行字符串作为参数，返回一个 Promise 对象，Promise 对象的 resolve 回调函数返回一个模块对象。

import() 常见用法

import() 是一个非常灵活的函数，常见的用法有：

1. 动态加载模块

import() 可以接收一个可执行字符串作为参数，这个参数可以是变量、表达式、模板字符串等等。因此，我们可以根据不同的条件动态加载不同的模块，例如：

let moduleName = 'module1'

import(`./${moduleName}`).then(module => {
  // do something with module
})

这个例子中，我们根据变量 moduleName 加载不同的模块。

2. 异步加载模块

import() 返回的是一个 Promise 对象，因此我们可以使用 async/await 或 Promise 的 then 方法来等待模块加载完成。

async function loadModule() {
  let module = await import('./module1')

  // do something with module
}

loadModule()

3. 批量加载模块

import() 也可以一次性加载多个模块，例如：

Promise.all([
  import('./module1'),
  import('./module2'),
  import('./module3')
]).then(modules => {
  // do something with modules
})

利用 import() 批量改名变量

import() 还可以用来批量改名变量。假设我们有一个模块，导出了多个变量：

// module1.js
export const a = 1
export const b = 2
export const c = 3

我们可以使用 import() 批量加载并改名这些变量：

async function loadModule() {
  let { a: x, b: y, c: z } = await import('./module1')

  console.log(x, y, z) // 1 2 3
}

这个例子中，我们使用了解构赋值语法，将模块中的 a 变量赋值给了 x，将 b 变量赋值给了 y，将 c 变量赋值给了 z。这样，我们就可以批量改变变量名称了。

注意事项

需要注意的是，import() 返回的是一个 Promise 对象，因此我们需要使用 async/await 或 Promise 的 then 方法等待模块加载完成后再处理返回的变量。否则会抛出 “ReferenceError: x is not defined” 等错误。

总结

import() 是 ES9 中的新特性，用于动态加载模块。它是一个非常灵活的函数，常见的用法有动态加载模块、异步加载模块和批量加载模块。我们还可以利用 import() 批量改变变量名称。需要注意的是，import() 返回的是一个 Promise 对象，因此我们需要使用 async/await 或 Promise 的 then 方法等待模块加载完成后再处理返回的变量。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659e53b3add4f0e0ff751e67