JavaScript 中 ESModule 怎么使用 as 关键字重命名导入导出的成员属性-js教程-PHP中文网

as关键字用于esmodule中对导入或导出成员进行静态别名重命名，解决命名冲突、提升可读性；支持命名导出、默认导出及重新导出的重命名，但不可省略default且不支持动态名称。

javascript 中 esmodule 怎么使用 as 关键字重命名导入导出的成员属性

在 ESModule 中，as 关键字用于在导入（import）或导出（export）时对成员进行**别名重命名**，解决命名冲突、提升可读性或适配已有代码习惯。

导入时用 `as` 重命名

当从模块导入的成员名与当前作用域已有变量同名，或原名不够语义化时，可用 as 指定新名称：

import { foo as myFoo } from './module.js'; —— 将导出的 foo 导入为 myFoo
import { bar as baz, qux as q } from './utils.js'; —— 多个成员同时重命名
import { default as MyComponent } from './Component.js'; —— 重命名默认导出（注意：不能省略 default）

导出时用 `as` 重命名

在导出时也可用 as 改变对外暴露的名称，不影响内部变量名：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

export { foo as bar }; —— 将本模块的变量 foo 以 bar 名称导出
export { a as first, b as second, c }; —— 混合重命名与直导出
export { default as MainApp } from './app.js'; —— 重命名并重新导出另一个模块的默认导出

常见组合与注意事项

as 不改变原始值，只是创建别名；它常和解构、命名空间导入等配合使用：

搭配命名空间导入：import * as utils from './utils.js'; 中的 utils 是整个模块的命名空间对象，此时不能用 as 重命名该对象本身（那是 import ... as 的语法，属于另一种用法）
不能在默认导入中省略 default 后再用 as：import { default as X } ✅，但 import { as X } ❌
重命名不支持表达式或动态名称，必须是静态标识符

实际小例子

假设 math.js 导出：

export const add = (a, b) => a + b;<br>export const multiply = (a, b) => a * b;<br>export default (x) => x ** 2;

在另一文件中可这样使用 as：

import square from './math.js'; // 默认导出<br>import { add as sum, multiply as mul } from './math.js';<br>console.log(sum(2, 3)); // 5<br>console.log(mul(4, 5)); // 20<br>console.log(square(6)); // 36