运行时生成函数对象后导入单个函数出现undefined问题咨询

嘿，我来帮你捋清楚这个问题——你遇到的f1为undefined的情况，本质是ES模块的导出和导入方式不匹配。咱们一步步拆解来看：

问题出在哪？ #

你在functionsList.js里做的是导出一个名为list的对象：

const list = getFunctions();
export { list };

这里导出的是list这个变量本身（它是个包含函数的对象），而不是直接将list内部的f1、f2这些函数作为独立的命名导出。

但你在导入时写的是：

import { f1 } from './functionsList';

这种写法是在找文件中直接导出的名为f1的成员，而不是list对象里的f1属性，所以自然会拿到undefined。

三种可行的解决方案 #

方案1：直接导出对象里的函数成员

如果你希望继续用import { f1 }的方式导入，那可以在导出时把list里的函数解构出来作为命名导出：

const list = getFunctions();
// 解构list对象，把内部的函数单独导出
export const { f1, f2, f3 } = list;

这样修改后，你的原导入代码就能正常拿到f1函数了。

方案2：默认导出整个对象，导入后解构

如果不想拆分导出，也可以把list设为默认导出：

const list = getFunctions();
export default list;

然后在导入文件里这样使用：

// 先导入整个默认对象，再解构出f1
import functions from './functionsList';
const { f1 } = functions;

// 或者一行搞定（看个人习惯）
import { default as functions } from './functionsList';
const { f1 } = functions;

方案3：导入整个list对象后再解构

要是你不想改动导出代码，那就在导入时先拿到list对象，再从中提取f1：

import { list } from './functionsList';
const { f1 } = list;

这种方式最不用改导出端的代码，但导入时多了一步解构。

小总结 #

ES模块的命名导入是和命名导出一一对应的——你导出什么名字，导入时就要用什么名字去匹配。如果导出的是一个包含多个成员的对象，那导入的也是这个对象，需要自己从对象里取出需要的属性~

内容的提问来源于stack exchange，提问作者alyx