JavaScript 中import 什么时候使用{}什么时候不用{}

在 JavaScript 中，是否使用 {} 取决于模块的导出方式。以下是两种常见的导出方式以及使用 {} 的规则：

---

1. 命名导出（Named Exports）

当一个模块使用 export 导出多个内容时，你需要用 {} 来引用这些命名导出的内容。

模块文件 (e.g., config.js)：

export const CONTRACT_ADDRESS = "0x123...";
export const ABI = [{ /* ABI 内容 */ }];

导入文件：

import { CONTRACT_ADDRESS, ABI } from "../config.js";

为什么需要 {}？

• 因为命名导出支持多个导出项，{} 表示从模块中按名称精确获取指定的导出。
• 如果名字不匹配，导入会失败。

---

2. 默认导出（Default Export）

如果模块使用 export default 导出某个内容，则导入时无需使用 {}，并且可以自由命名。

模块文件 (e.g., config.js)：

const config = {
  CONTRACT_ADDRESS: "0x123...",
  ABI: [{ /* ABI 内容 */ }]
};
export default config;

导入文件：

import config from "../config.js";

// 使用方式：
console.log(config.CONTRACT_ADDRESS);
console.log(config.ABI);

为什么不需要 {}？

• 默认导出意味着模块只导出一个内容，所以不需要名称匹配，可以直接导入。

---

综合使用场景

在你的代码中：

import { CONTRACT_ADDRESS, ABI } from "../config.js";

说明：

• CONTRACT_ADDRESS 和 ABI 是命名导出（Named Exports），所以需要用 {}。
• 如果 config.js 中用的是默认导出，则应该改成：

import config from "../config.js";
console.log(config.CONTRACT_ADDRESS);
console.log(config.ABI);

判断依据：

• 如果模块使用 export，用 {}。
• 如果模块使用 export default，不用 {}。

---

如何记住：

1. 命名导出时：用 {} 按名字取值。
2. 默认导出时：不需要 {}，直接取值。