ES6中导入{ f1 }显示undefined，如何正确导入单个函数？

你遇到的问题核心是导出方式和导入方式不匹配。你当前在./list里用的是默认导出一个包含函数的对象，而不是直接对每个函数做命名导出，所以用import { f1 } from './list'自然拿不到正确的函数。

下面给你两种可行的解决方法：

方案1：改成命名导出（推荐） #

直接在./list里把每个函数单独做命名导出，这样就能直接用解构语法导入单个函数了：

// ./list.js
export const f1 = a;
export const f2 = b;
export const f3 = c;

之后在其他文件里，你就可以正常用import { f1 } from './list'，调用f1()也完全没问题。

方案2：保持现有导出，解构默认导入 #

如果不想修改原文件的导出逻辑，你可以先导入整个默认导出的对象，再从中解构出需要的函数：

// 写法一：显式解构默认导出
import { default as list } from './list';
const { f1 } = list;

// 写法二：更简洁的常用写法
import list from './list';
const { f1 } = list;

这样处理后，调用f1()也能正常工作。

为什么原来的写法会失败？ #

你之前尝试的import { f1 } from './list'是在查找模块的命名导出成员，但你的文件里只有一个默认导出的对象——这个对象里的f1只是对象的属性，并不是模块的命名导出，所以会拿到undefined。而import list from './list'是拿到了整个默认导出的对象，所以访问list.f1就能拿到正确的函数。

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